My family has been buying Mac's since I no longer do their Windows tech support. Now I'm Apple Tech support. Can't win.

Images disappear in IE6

Yes, 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


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.

5 Responses to “Images disappear in IE6”

  1. Thank you, saved me a lot of time!

  2. May I state how mutch I dislike Ie? Web design would literaly take half the time if it wasn’t for getting stuff to work in Ie. Firefox forever.

  3. @Jason – I agree. What a pain it is to still have to worry about testing for IE6, when IE7 was released over 1 1/2 years ago. Upgrade already.

  4. thanks a lot

  5. thanks