I finally put together a new layout! I tried to do as much as possible in CSS and leave the HTML as little changed as possible, and when I finished I was able to keep the default WordPress layout as an alternate. In theory I ought to be able to plug in any of the submissions from the WordPress CSS Style Competition as alternates as well.
It’s been tested so far on Mozilla, IE 6, Opera 7, and Konqueror 3.2. It doesn’t use anything more complicated than Fahrner Image Replacement, so it shouldn’t cause too many problems. I’ll try to test it in a bunch of other browsers at work tomorrow.
I consider this a first draft – among other things I figure on adding to the main title banner – but it’s something a bit more distinctive than the out-of-the-box layout we ended up with after the upgrade to 1.0.
Updated Feb. 12 and Feb. 13 to describe testing in more browsers and the interesting saga of tracking down a bug in Internet Explorer 5.0:
Update Feb. 12 @ 10:45. Well, I’ve successfully tested Opera back to 4.0, Mozilla back to 1.0, Netscape back to 6.2 and IE back to 5.5. I still need to check Safari and Mac IE 5, since Katie had turned her computer off by the time I was finished last night. (Gecko browsers are pretty consistent across platforms, so all I really need to check on Mac Mozilla is that the fonts are readable.)
So far, every browser that can be expected to handle the layout has shown it fully or reasonably, except one: IE 5.0 for Windows:
It looks like it’s treating the bottom margin of each post as padding, without moving anything out of the way. (Padding is inside the box, margins are outside.) It should be placing a blank line between the bottom of a post and the next item, but instead it’s extending the box down, causing an overlap with whatever comes next.
This reminds me of the margin problems IE 6 had with my software page layout – but this time IE 6 is fine. It’s only IE 5.0 that’s having problems, and the tweaks I allowed myself time to make haven’t been enough to solve them.
Well, if stats are to be believed, there aren’t too many of you out there still using IE 5.0. I’ll try to figure out a workaround, but for those of you still using IE 5, isn’t it time to think about either upgrading to IE 6 or switching to something better?
Update Feb. 13 @ 16:30. I took a quick look at the resulting HTML code, and suddenly it was obvious: every post on the main page, where comments aren’t visible, had the following code at the end:
<div class="storycomment"></div>. It’s perfectly valid, and most browsers just ignored the empty element. If IE 5.0 had just added the blank space, it would have been okay, but it somehow added the space when displaying the surrounding block, but not when figuring out where to put the next block.
Anyway, I moved the
<div> tags into the comment loop, so they’re only present when comments are actually shown. The IE 5 display problem is fixed!