IE CSS hack without using any hacks!
04
Oct 2008
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 | <html> |
| 03 | |
| 04 | <head> |
| 05 | <title>ProductiveDreams</title> |
| 06 | <link href=”style.css” rel=”stylesheet” type=”text/css”/> |
| 07 | </head> |
| 08 | |
| 09 | <body> |
| 10 | <div class=”bg-image”></div> |
| 11 | </body> |
| 12 | |
| 13 | </html> |
| 14 |
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 | } |
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.
