Over a million developers have joined DZone.

Floats And Position:Absolute:IE6 Magic

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

brunildo.org

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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Niels Matthijs, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}