floats and pos:abs
Even though most css bugs out there are already well documented and provided with fixes, it's not always easy to recognize a bug you're encountering right away. Because of that, I think it won't hurt to put some of the more obscure bugs in the spotlight from time to time. Our favored subject is of course ie6, a true html and css magician. This article will focus on one of ie6's more cunning disappearing acts.
recognizing the trick
From time to time, elements disappear in ie6. This is actually not too uncommon. Backgrounds that go missing, borders that disappear or even whole elements which are not where you'd expect them to be. A seasoned css expert knows how to handle these problems. He gets out his toolbox filled with zoom:1's and position:relative's and throws them into the ie6 stylesheet until everything shows again.
Maybe not too subtle, but it often works. Sadly, on some occasions it doesn't and the bug is triggered by something else. Not too long ago I ran into an issue where all the usual ie6 fixes in the world wouldn't make the element appear. Only after breaking down the entire page did I find that the problem was not the element itself, but one of its direct neighbors. Quite stumped I turned to the web to provide me with answers. What I discovered is one of ie6's lesser known bugs.
floats and absolutes
An absolutely positioned box sometimes disappears when in the source code it is the preceding or the following sibling of a float. This condition doesn't always trigger the problem, but seems necessary for the problem to occur.
The most difficult bugs to solve are those that aren't directly related to the element on which the bug acts. In my case, the disappearing of my absolutely positioned box was triggered by the appearance of a floated element on the same level right before the box and with a width:100% set on the float.
It's a ridiculous set of conditions which in some cases will trigger this bug to appear. There are still some unknown factors in play, but it seems that these conditions are absolutely necessary for the bug to be triggered. Luckily the bug is easy to fix, as it suffices to put an element in between the floated and absolute box and/or to delete the width declaration.
more, more, more
It would be futile to go into more detail about the finer points of this bug myself, as I would just be copying the article I found online, so for those of you who want to read up on the bug, check the test page on brunildo.org which has a fair set of test cases and some more in-depth musing about this issue.
Credits for information and solutions go to the creators of the brunildo.org website.
staying alert
Even though the conditions for this bug are not too common, when the bug hits it might cost you a lot of time figuring out what is happening, if only because you're probably trying out a lot of zoom/position combinations which amount to nothing. If none of that helps right away, it might be good to remember this issue and see if you've ran into it yourself.