Images disappear in IE6
March 11th, 2008Yes, I, like most of you, still put up with ie6 and its plethora of CSS bugs. I tend to forget the easiest fix can sometimes just be
position:relative;.
I just fixed a problem I had regarding an image floating to the left of some text. The problem was that the image just wouldn’t show up in ie6. I tried the clear float solution, but to no avail. Then I remembered another solution concerning images, floats and ie6 :
img {position: relative;}
Works like a charm.
From Community MX: How To Attack An Internet Explorer (Win) Display Bug
It turns out that applying a simple {position: relative;} to the negatively margined inner box causes the missing portions to magically reappear. Why? Well, moving right along… Seriously, no one knows why this happens, except perhaps the Microsoft engineers, and they aren’t talking. Suffice to say it does work.
Soon, this fix was found to work on other IE bugs as well, specifically the Peekaboo Bug in IE6 (look on the third page of the article). We’ll get back to the Peekaboo bug in just a little while.
Another primary use for this fix is occasioned when a floated image is in a container and either the container or the floated image has been made “relative.” In that case, the floated image can and will “hide” behind any background that may be placed on the outer container element. Removing the relative positioning or making both elements relative will bring the floated image “up front,” allowing it to be seen.
