Dealing with IE6 and png's - part 3

Posted At : October 18, 2007 8:37 AM | Posted By : Trond Ulseth
Related Categories: CSS

This entry will look at a couple of problems that might arise when using the methods outlined in part 1.

Let's look at what we did. We had this part of css...

#banner {
height: 114px;
background-image: url(/images/header_bg.png)
}

...where the transparent background png would not work in IE6.

What we did was change it to this:

#banner {
height: 114px;
background-image: url(/images/header_bg.png)
}

/* IE hack */
* html #banner {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/header_bg.png');
}

Here we use a IE hack to set background to none, and uses the IE only AlphaImageLoader filter to provide the png background.

So far, so good.

Problem 1

The #banner element has a set height in our example here. But if you try this on an element which have no set heigth, the background will not show. What usually makes the trick here is to add height: 100%; to the fix like so:

/* IE hack */
* html #banner {
background-image: none;
height: 100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/header_bg.png');
}

Problem 2

When using this fix you will often experience that url's will not be clickable, and form elements and text is not selectable.

What I have found to work is to first create a inner element. So if your html code was so:

<div id="banner">
Some text and/or images here.
</div>

This needs to be changed to:

<div id="banner">
<div id="innerbanner">
Some text and/or images here.
</div>
</div>

Then change your css to something like this:

/* IE hack */
* html #banner {
background-image: none;
height: 100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/header_bg.png');
}

* html #innerbanner {
position: relative;
height: 100%;
width: 100%;
z-index: 10;
}

The most important thin here as I understand is the relative positioning of the innerbanner element, but the other attributes might help as well, so I always leave them in there.

Problem 3

The code css code above is ugly, messy and it will not validate. I suggest you make a separate css file called something like ie6_or_less.css and put the IE hack css into it.

Then in your html template call it like this:

This conditional statement within html comments makes sure that only IE browsers version 6 or less will load and use the ugly code.