It’s Always Something
Published 20 years, 9 months pastAnyone visiting the main page of meyerweb with IE6 in the last fifteen hours (it’s now about 1300 EST) may have noticed the sidebar was intruding into the main content column, and generally looking icky. The problem has now been fixed. It happened thanks to, of all things, a bug in IE/Win’s rendering engine. (Gasp! No! How can this be?)
Here’s what happened. I added the “Redesign Watch” and “Platelets” lists to the sidebar, which is actually marked with an id of extra in the source because it’s what I regard as extra material; it comes after the page’s content in the source. I wanted the two lists to be side by side, and here’s how I originally did it:
#extra #redesigns {float: left; width: 9.5em;}
#extra #platewatch {margin-left: 9.5em;}
Simple enough, or so you’d think. Instead, this caused IE6 to push the sidebar about half an em to the left, which is what led to the overlap. The (previous) link at the bottom of the Platelets column was also way out of joint. If I removed the two lists, then everything went back to normal. So clearly IE/Win was having trouble with the floats, or perhaps with floats inside a positioned element. At any rate, it was the new material that was triggering a bug.
I seriously considered doing this:
#extra>#redesigns {float: left; width: 9.5em;}
#extra>#platewatch {margin-left: 9.5em;}
By using the child-selection combinator (>), which IE/Win doesn’t understand, I could have entirely hidden both rules from IE/Win. That would have meant the Redesign Watch and Platelets lists would simply follow one another, as Destinations does Navigation, because none of the floating or margin-modification would have been allowed to confuse Trident (IE/Win’s layout engine). This solution, while practical, didn’t really satify me, so I decided to try another approach. Perhaps floating both elements will be sufficient, I thought. So:
#extra #redesigns {float: left; width: 9.5em;}
#extra #platewatch {float: right; width: 5.5em;}
It worked: the two lists ended up side by side as I wished, and the sidebar was no longer pushing its way into the main content column.
This should not have been a real surprise to me, as I’d been aware that IE/Win has trouble with floats overlapping the margins of normal-flow elements that follow them in the document source. I just forgot, which I seem to do pretty regularly—it’s the one IE/Win bug I can’t seem to permanently store in long-term memory. I have some hopes that writing it up will help affix it in my brain, in addition to helping out anyone who’s had similar problems with their layouts.
Thanks to The Ferrett for pointing out the layout problem, so I could track down and fix it. I hadn’t sworn at IE enough this week anyway.
I also rediscovered Explorer’s lack of support for the keyword inherit. So the “previous” link in the Platelets column will use a monospace font in IE. Other browsers will properly see it in the site’s default font (Arial, as of this writing). I could write a rule or two to make the display more visually consistent, but I decided against it. In this case, I’ll accept the visual evidence of limitations in IE over needlessly complicating my CSS.
Oh, by the way… did you notice that I added HTML+CSS redesign and license-plate information to the sidebar? My personal page also has a new sidebar feature, one which will be of particular interest to anyone who wants to know what I’m reading in my few spare moments. These are all the result of my working on creating “blogmark”-type data structures and pushing them live via XSLT (<shudder />). I haven’t bothered to set up individual RSS feeds for them, but it wouldn’t be difficult. I may extend this to a real “blogmark” area where I point at stuff that I find interesting, but don’t want to spend time writing about. Most of the things I’d be likely to link I’d be getting from other people’s blogmarks anyway, and somehow the process of taking someone else’s blogmark and turning it into a local blogmark just seems silly.