IE6 Image Display Bug

November 5, 2007 2:44 PM

In IE6, I occasionally get an image being covered by the background color of the div that contains it. Huh?

If I have this (much simplified, both HTML and CSS) structure:

<div>
   <div>
      <div style="background-color: #fff;">
         <p><img src="ie_blows.jpg" width="100" height="100" style="float: left;" />Howdy neighbors!</p>
         <p style="clear: both;">Next paragraph, etc.</p>
      </div>
   </div>
</div>

In IE6, the page lays out as you'd expect, with a space for the image, but the #fff background color will be all you can see. Oddly, if you right-click, you can save the image, or view it in a new window, but it always displays behind the background of its containing div. So it's there but not there. This doesn't happen all the time, so it must be a combination of style attributes that causes this to happen.

I googled, probably not very precisely, trying to find if this is a known bug and what its trigger might be, but didn't see anything. IE7, FF, etc. don't have this problem.

I've tried a few different things but the only thing that actually works is removing the background attribute from the containing div, not a real elegant solution.

posted by maxwelton to Computers & Internet (4 answers total)

Response by poster: I should note the multiple divs are to demonstrate that it's within a nest, not that I'm randomly stacking divs...
posted by maxwelton at 2:46 PM on November 5, 2007

Best answer: z-index of floats in a positioned element is broken in IE. Usual fix is adding 'position: relative' to the floated image.
posted by BobInce at 3:17 PM on November 5, 2007

Sounds a bit like the peekaboo bug. I would try giving hasLayout to the div with the background color by adding "zoom: 1" to its style (or maybe to the image or one of its other ancestor nodes).

Another thing to try might be adding a background-color to the image itself.
posted by Sxyzzx at 9:01 PM on November 5, 2007

Response by poster: Thanks BobInce, dunno why I didn't think of that, but it worked. I now have the same feeling of frustration waiting for old IE versions to die as I did waiting for NS 4 to die a few years back...
posted by maxwelton at 12:29 AM on November 6, 2007