IE CSS hack without using any hacks!

Gopal Raju — Sat, 04 Oct 2008 10:33:19 +0000

A few days back while working for a MAJOR client (sorry, can’t mention their name), I discovered something new (I hope it’s new ) – A pure CSS based image replacement solution for IE. This method is helpful especially to solve the PNG issue in IE6. I know there are many CSS hacks available out there to solve the PNG transparency issue, but this method doesn’t need any hacks!! Interesting isn’t it?

Step-1: Let’s review the HTML part first.

HTML
01 
02 
03  
04 
05 ProductiveDreams
06 
07 
08  
09 
10 
11 
12  
13 
14

The following are the images that I've used for this tutorial. The image without saturation is a .gif and the colored one is a .png. You may right click and save the image.

Colorful PNG Image

Desaturated GIF Image

Step-2: The stylesheet

I included the following code in the stylesheet

CSS
01 body{
02 background:#000;
03 text-align:center;
04 }
05  
06 div.bg-image{
07 background:transparent url(images/pd.png) no-repeat center !important;
08 width:134px;
09 height:134px;
10 }

Let me walk you through the CSS. The first part simply applies a background color to the body and center aligns the div element. In the second part, I've specified the width and height of the div (134px) based on the image dimensions and have given the .png as the background image. Everything works fine?

Step-3: Solution for IE

This the most interesting part that does the magic.

I added another line of CSS code just below
background:transparent url(images/pd.png) no-repeat center !important;
and the following is the code
background-image:url(images/pd.gif);

Check out the result in IE! Awesome.... isn't it? In all other browsers except IE you will see the colorful png image.

Consolidating the entire thing

So. the final css would look like:

CSS
01 body{
02 background:#000;
03 text-align:center;
04 }
05  
06 div.bg-image{
07 background:transparent url(images/pd.png) no-repeat center !important;
08 background-image:url(images/pd.gif);
09 width:134px;
10 height:134px;
11 margin:0px auto;
12 }

For your ease, I have attached the sample files as a zip. Feel free to download it and do let me know your feedbacks.

Productivedreams.com » XHTML

IE CSS hack without using any hacks!

Step-1: Let’s review the HTML part first.

Step-2: The stylesheet

Step-3: Solution for IE

Consolidating the entire thing

RELATED POSTS

01	body{
02	background:#000;
03	text-align:center;
04	}
05
06	div.bg-image{
07	background:transparent url(images/pd.png) no-repeat center !important;
08	width:134px;
09	height:134px;
10	}