Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Floats And Position:Absolute:IE6 Magic

DZone's Guide to

Floats And Position:Absolute:IE6 Magic

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}