Keeping your browser rendered graphics in IE.

with 3 comments

What we have here folks, is a cheat. Plain and simple. But it’s a good one, so please, read on…

What happens when you’ve put your heart and soul into the perfect CSS3 button, only to then be told it must look the same in IE? Personally, I used to go into a corner and have a little cry. But not anymore! With this super swell tip, from yours truly, you can CSS3 until your heart literally explodes with joy, yet still retain that delicious Mac rendering goodness on the dastardly IE 8 and below.

Step 1

Get that page marked up properly, with particular focus on wrapping that <html> element with the appropriate conditional comments:
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

Step 2

Mark up your splendificent button in a browser that, you know, doesn’t smell like formaldehyde – and other old people fragrances.
Here’s one I made earlier (It’s true. I did) :

A CSS3 styled button

Then, with your Mac keyboard shortcuts of pure awesome perform a simple Shift-⌘-4 and drag a selection around the box like so:
Using the Mac OSX screen selecting tool to take a screen grab

This will save a lovingly crafted PNG file straight onto your very desktop! Probably some Moose magic going on there. Who knows.

Step 3

Throw that image class into your site’s images folder (I take no responsibility for broken monitors). And now, with those amazing classes you previously placed on the <html> element, head into your style sheet of wonders and lay on your basic image replacement code:

.ie7 #button, .ie8 #button {
display: block;
text-indent: -999em;
overflow: hidden;
background: url(/images/button.png) center center no-repeat;
}

Tweak it to your image’s properties, like width and height, and be sure to remove any borders and padding you applied previously.

Final Step

Sit back, and smile. You’ve cheated the system. Treat yourself to a cookie.

« »

Comments

  1. Clever idea, I like that. Loving the mass-adoption of using different classes around the HTML tag now – Paul Irish has a lot to answer for bringing that one right into the public eye with HTML5 boilerplate.

    How would you cater for hover/active states with this technique? I usually build up application buttons in PhotoShop first, that way you can simply export all the different button states as a sprite and use those where CSS3 isn’t supported. I can’t see how you’d be able to take screenshots of hover/active states directly from the browser with this technique.

    John Kavanagh

  2. This certainly isn’t meant to be an ultimate answer. More of a nice little idea when necessity dictates. Having said that, the way to screenshot active/hover states is to temporarily switch the CSS round between inactive and hover, then screenshot that state.

    Graham

  3. Great tip – much appreciated.

    Ryan Forrest

Leave a Reply