CSS Help
It’s that time, once again, when I can’t figure out how to do something with CSS and I need your help. I’ve created a full description of the problem and examples of solutions I’ve tried.
The long and short of it is that I have a control that writes messages to the screen. I am currently using an unordered list to render these messages, but I want to format them at the top & center of the screen. I want each message to be on it’s own line, and I want all of the messages to be encapsulated by a solid rectangular background. I want the solid rectangular background to be only as wide as it needs to be in order to encapsulate the widest message.
I’ve been able to accomplish this with a table, but that’s just semantically wrong.
Please check out the examples and let me know how you would solve this problem.
Update
Evdawg posted a solution that works cross-browser! I’ve updated the examples with his working version.
Update 2
Inky posted another kickass center-float solution that also works cross-browser. I’ve added that one to the examples as well.
This works in Safari 3 and Firefox 3. I haven’t tested it elsewhere.
http://codealchemy.com/help/messages.html
@Kevin – That breaks in IE
you could try this http://rafael.adm.br/css_browser_selector/ plus kevins suggestion.
this combo should work.
@fk – that’s not gonna fly because I can’t find any way to make it work in IE.
Yeah, sorry, Mark.
I can fix broken CSS, but not broken browsers.
Hopefully somebody here knows something about IE’s ActiveX filters or something and makes my example work.
I don’t want to have to use tables, but it looks like I must.
problems in all versions of ie or just specific versions like ie6 or ie7?
other than that i could try some magic tonight but without any guarantee (tonight @ europe)
ps: when worse comes to worse, have you also some alternative ideas or a plan b? like (mouseover’ish) collapsible items, to expand long messages?
Kevin almost had it! You just gotta apply the right hacks
http://pastebin.me/49f0b1155a624
/me vomits
Don’t know if it’s of any help, but what about using float and relative positioning?
http://test.inkscape-forum.de/float.html
I also don’t know if it works with all browsers. I came across floats, because this would shrinkwrap the list elements to the widest one. After that I googled about centering floats and came across http://pmob.co.uk/pob/centred-float.htm.
I hope I understood the problem.
wow @ evdawg – it works!
I seriously thought you just couldn’t do it.
—
In other news – sorry for being so slow on the replies here. Ever since I moved to my new server, wordpress doesn’t send me email anymore:
http://wordpress.org/support/topic/264681
Mark, IE6 still has padding to the left that the other browsers do not. You need to add list-style-position: outside; to #Example5 li, which will make it go away.
Thanks, Colin!
Just out of interest. You didn’t respond to my proposal/solution.
Was it complete crap?
Have I misunderstood your requirements?
@Inky – I feel stupid for saying this, but I was so busy yesterday that I didn’t even see yours. I’m sorry. Your method is actually great since it doesnt require any funky css trickery. I’ve added it to the examples and credited you above.
Thanks!
No problem. (Sh)It happens.
TBH it wasn’t because of the credit, I was just curious if my solution would meet all your requirements which I thought it does.
Glad I could help.