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.
but what to do. Still it is alive..
Thanks for the info dude
this is the same method which we using as min-height hack. IE will negate the !important line. But nice post.
Thanks again, Steven
!important is a very old school way of achieving this.
Why do we need to care ie6 now?
Only we (developers) can make IE6 out of the world. Ask more pay from client if they want to see their site in IE.
Anyway, this trick is nice for some not big images.
But the truth remains the same: Someone, kill IE! Please.
Here is a test I did with your example above. http://iarewill.com/projects/ie/
If I did something wrong or I am completely off then please let me know. Awesome site by the way, I really like the design.