IE CSS hack without using any hacks!

ie-css-hack-without-using-any-hacks

A few days back while working for a MAJOR client (sorry, can’t mention their name, but really wished to), 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.




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.

PNG Image

Colorful PNG Image

Desaturated GIF Image

Desaturated GIF Image

Step-2: The stylesheet

I included the following code in the stylesheet
body{
background:#000;
text-align:center;
}

div.bg-image{
background:transparent url(images/pd.png) no-repeat center !important;
width:134px;
height:134px;
}

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:
body{
background:#000;
text-align:center;
}

div.bg-image{
background:transparent url(images/pd.png) no-repeat center !important;
background-image:url(images/pd.gif);
width:134px;
height:134px;
margin:0px auto;
}

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

About Gopal Raju

Gopal Raju is a passionate designer, developer and blogger from India. He’s the founder of Convax Solutions, a web design and development agency in India. Catch up with him on dribbble, Twitter and Facebook.

24 Responses to IE CSS hack without using any hacks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. Hacking is not the solution for ie6. In the case of png images. Why dont you use ie8.js I never use hack. and in rare case only i use hack.

    (^_^)

  2. I hate IE6…
    but what to do. Still it is alive.. :(
    Thanks for the info dude :)

  3. Pingback: 10 CSS properties missing in IE6 | Special News | Technology News,Gadget Reviews,Auto & Car News,Finance & Career News,Broadband in India.

  4. Pingback: 10 properties that were impossible to implement in IE6 | Productivedreams.com

  5. bhai,

    this is the same method which we using as min-height hack. IE will negate the !important line. But nice post.

  6. still we need to support the crap ie6?

  7. Title is bit confusing. We have to use lot of ‘!important’ especially if site have plenty of png images. Personally I’m bit against using lot of ‘!important’ in css. But its cool tip and new addition to my css knowledge base. Thanks for sharing your invention :)

  8. very quick and clean fix if you ask me. I’ve seen this done with much more lengthy attempts, but this is a very native use for css. how css should work in some respect. great find. :-þ

  9. @Mariusz: Thanks for your comment :) This is just an image replacement technique, without using CSS hacks.

  10. Unfortunately, that doesn’t fix the PNG transparency issue. Anyway, thanks for posting

  11. Pingback: CSS Resources

  12. Pingback: vot.eti.me

  13. @Steven: Thanks for your comment. I agree with your suggestion on adding conditional comments for IE. But in that case you would need a separate css for IE in which you can use hacks as well. In my opinion, !important can be used as long as it doesn’t mess up with the W3C validator.

    Thanks again, Steven :)

  14. By the way, awesomely beautiful website you have Gopal.

  15. !important would not be an ideal solution IMO. But you could easily use an IE conditional comment to achieve this respectably, or provide more advanced selectors that IE doesn’t understand to deliver the PNG.

    !important is a very old school way of achieving this.

  16. It´s the same thing than using a star hack for the background image.

  17. its nor working properly… :( but nice try…

  18. Misleading title !
    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.

  19. And what about big and high quality png’s? Transforming them to *.gif would mean image information loss. Also, if you do have many images, than with your method their count doubles.
    Anyway, this trick is nice for some not big images.
    But the truth remains the same: Someone, kill IE! Please.

  20. Will, thanks for your comment :) I guess you got confused with the term “PNG transparency issue”. You would have to use a gif for IE6 to replace the png image. That’s why I’ve used a png and a gif in this article… Please do let me know if you have any questions.

  21. I might be reading this article wrong, but I don’t believe this is not a fix for transparency but just away to have ie use a different background image instead of the png. For example creating a png version for everyone and gif version for ie6.

    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.

  22. That’s pretty amazing. So this is going to be W3C and better than defining under f***ie.css :)