Dealing with IE6 and png's - part 1
This is the first of two short entries on dealing with png's in IE6.
Personally I like to use png's in my site designs, often to create a glow effect on a element laying on top of a gradient and/or patterned background, you can see it here on my blog as well. Here's the css code for the top part of the blog:
#banner {
height: 114px;
background-image: url(/images/header_bg.png)
}
height: 114px;
background-image: url(/images/header_bg.png)
}
Now let's see how this looks in IE 6:
Not very pretty. To fix this I added the following css:
/* IE hack */
* html #banner {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/header_bg.png');
}
* html #banner {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/header_bg.png');
}
Adding * html before the #banner id selector is a hack that makes only IE read this piece of css, and here we use a IE specific filter to put the background png in, and doing this the png will maintain it's transparency.
Comments
[Add Comment]
Thanks for this, I remembered your post from the other day, and I just used it today in a site. :)
# Posted By Jacob Munson
| 3/15/07 12:15 PM
[Add Comment]
