Cheap Shared Hosting

Friday, March 7, 2008

IE6 background image/color bug and fix

Ran into this just now. I was working on alternate css for IE6, since I had a div that was using a translucent (semi-transparent) PNG, and of course IE6 doesn't support them. I tried the javascript PNG fix for IE6, but it doesn't seem to work on background images.

Anyways, so I wanted to use a regular white background for IE6. I used the IE conditional statements to set that in the CSS, and sure enough IE6 would display the white background color. And then it wouldn't display most of the contents of the div! Took me a while to figure out, but apparently it decided that the div and its background color were a higher z-index than the contents. Go IE! Rendering like a champ as always.

So for IE6 I had to tell it that the contents of that div (thankfully in their own divs) were z-index 100, and that fixed it.

1 comment:

offender said...

Hi, you can have 24bit pngs on background images with ie6pngfix.

Just add the following to css.

#myDiv {
background: url(../images/myImg.png) no-repeat top left;
behavior: url(/scripts/iepngfix/iepngfix.htc);
}