CSS and the Usual Suspects List
An interesting CSS problem cropped up a few weeks ago and I thought it may be worth sharing. It may sometimes seem like the world is falling down but I’ve found in the general sense that there are a line of what I’d call the usual suspects that solve most issues in short order. You know the ones – display block, position relative, yada yada…
The problem wasn’t that much of a ball buster really and its something that seems to crop up occasionally for a lot of people doing CSS layouts. The following (X)HTML shows an outer div with an id of #page, inside that is another div called #header which includes an unordered list called #menu and below the #header is another div called #content. It might be easier if you just looked at the markup directly.
<div id="page">
<div id="header">
<ul id="menu">
</ul>
</div>
<div id="content">
</div>
</div>
Visually you could imagine that the #content div was riding behind the #header div in both Firefox and Opera but things looked alright in Internet Explorer 6 (one has to be fair and say it was probably doing so because Internet Explorer 6 was wrong).
The quick little fixes were an interesting look at the likely suspects, too. In firefox to get the #content div to stay below the #header div it required the addition in the CSS file on the #header of display: table. Nothing out of the ordinary there at all. But I looked in Opera and it persisted, so there was another little fuss through this short little list that always crops up. Lo and behold for Opera it took the display: table that fixed Firefox and Opera also required position: relative. Again nothing sinister or even difficult to find and fix on that score. So Internet Explorer 6, Firefox and Opera were doing just fine.
But then I got around to checking in Internet Explorer 7 and the problem persisted. Now I was curious (although I have to admit I was pretty sure what the problem was going to turn up). If you’re having issues with Internet Explorer rendering your layout you really need to go check up on our old nemesis hasLayout. The article On Having Layout seems to be the best for explaining and tracking hasLayout so I’d recommend the regular refresher on this just to save yourself time in the long run. As time goes on you get better at flagging hasLayout issues in your code and that translates to much faster fixes on what really are in themselves quirky fixes.
So you guessed it – I’d run smack into an IE7 hasLayout issue while it was still wet behind the ears.
The cure was simple enough too because hasLayout has its own little list of the usual suspects. I had a height on the #header div and once that was removed (as it was actually doing nothing) the #content div fell below the #header and everything was resolved.
I thought this story of multiple cures for a single CSS issue would be good to share because its not always about problem X being fixed by a single and well defined solution Y. Sometimes it requires a bit of research and some persistence. Experience does go a long way, too. But with most things nowdays there are the resources out there to get your answer if you’re just willing to unturn stones and play around until the clog fits, so to speak. And if you’re being challenged by a particularly awkward CSS issue in Internet Explorer just ask yourself if you’ve considered hasLayout…
March the usual suspects past one by one and look at their faces until one breaks down and confesses in your lap. Then handcuff the villain and shunt him off to the Old Bailey as a repeat offender.
