So I was trying to work out a CSS version of some information that was previously formatted in a table. This CSS formatted list is what I came up with so far. [Ed note—Although coded using fixed widths, it can be modified to be variable width. And don’t think we don’t know how to do it!]
The CSS works in all my Win browsers (IE, Moz, Op, Fb, NN4.x excluded), which means it probably fails miserably on Mac. I had originally coded the CSS slightly differently, but it failed in IE5.5, so a couple of tweaks and boom one more browser nobody uses anymore.
It doesn’t look like much less code to me than the table version, but I do think it’s more semantic, has more going for it from an accessibility standpoint, and I hope y’all can make some use of it.
Update! So I re-checked the page in Opera on my home PC and everything looked fine. It’s virtually identical to my work PC as far as OS and browser versions, so I can’t understand why I saw a difference at work.
In any case, I didn’t update the page, so by way of compensation I added the variable width version. [ed—Like that was hard!] I wouldn’t necessarily say that it stays crispy in milk, but it’s good down to a width of about 400px.
Update 2! It turns out that my work PC had Opera v7.11 installed, while my home PC had v7.03. Opera 7.11 showed a little glitch in the presentation, but an upgrade to 7.20 fixed it. Yay for Opera, and yay for my browser addled brain.
No, it doesn’t fail on Mac.
In fact, it looks really good in Safari and in Camino. IE5.2.3 for Mac screws it up, but Microsoft have officially killed that browser anyway.
Apparently, 85% of MacEdition’s OS X using readers use Safari:
http://www.macedition.com/cb/cb_20030825.php
I don’t know how many Mac users still use IE5.2.
That’s good to know Michael, thanks!
And Mac/IE was what I was thinking of when I said it probably fails. Maybe someone will have a go at a workaround, unless no one really cares about Mac/IE anymore. =)
Ack! Damn, looks like I forgot to re-check Opera after fixing IE5.5. I know I could fix it with the http://tantek.com/CSS/Examples/boxmodelhack.html" title="tantek – Box Model Hack Explained">Box Model Hack, but I’d like to avoid that. I’ll update it later tonight one way or the other.
It does format into a nice hierarchy of info in Opera’s small screen view though. =)
I’m talking to myself again aren’t I? I gotta stop doing that! *whack*