IE6/IE7 and transparent background bugs - What is a practical fix for all of them?

Question

I am getting a number of strange rendering issues in IE6/IE7 when there are transparent backgrounds applied to the elements involved.

They have included but are not limited to:

• When scrolling back up a page a background image appears moved as if padding is applied.
• When hovering over a link the background image applied to its containing div appears to disappear.
• When using a drop down, hovering over a containing element of the drop down closes calls the mouse out event.

These are just 2 of the 7 I have had to fix so far and as you can see they are unlinked and a pain to debug and I am sure there will be a number more that I will encounter before this project is over.

To stop I have modified a default CSS rule that was setting nearly all elements to have a default image of "spacer.gif" - a 1KB 1x1 transparent image.

Old:

background: transparent;

New:

background: url('../images/spacer.gif');

However I am now worried about the overhead this could have on both the server and client machines. Such as increased loading times (and load on the server) caused by downloading the spacer.gif for each element from a "dumb" browser and a CPU hit on the client side when scrolling through the page as it has to render the additional images.

Are my worries justified and if so how can they be rectified? Or am I just worrying over nothing and this is an appropriate fix for such a stupid issue??

tl;dr - transparent backgrounds on elements (NOT images) causes issues caused by the way they are interpreted in IE. This is not a rendering of images issue this is a IE-logic-fail issue.

Thanks in advance.

Answer 1

IE 6 (and possibly IE7, I'm not sure) has some weird transparency issues.

Check out http://homepage.ntlworld.com/bobosola/index.htm for the fix which I use all that time - just have to add a little javascript and convert any gifs you have to png.

Answer 2

Depending on the scale of things really determines how much it'll affect your server load. Ideally if you're planning on making this a significantly big deployment you should already be doing the most suitable standard methods of handling static content: cache headers, separate (sub)domain for static content, reverse proxies, CDN deployment etc.

In terms of the CSS, you either have nasty hacks like Javascript or spacer images to get around IE6/7, or restrict the way you use your page styles so that these problems don't exist because you aren't using the things that cause them. It really depends on what you feel is of greater importance.

Answer 3

I use this css hack for giving IE < 7 a gif file and everything else a 24 bit png with transparency.

background-image:url(/images/sprites/icons-sprite.png);
_background-image:url(/images/sprites/icons-sprite.gif); /* IE<7 gets the crappy icons */

IE 6 supports gif transparency just fine.

Answer 4

Look at this article: PNG8 - The Clear Winner You will need Fireworks for this fix. Since I discovered this writing I use it all the time. Major plus: you do not need different images for different browsers. PNG8 is good for all.