For my home PCs I typically run the latest and greatest web browsers. I even run Internet Explorer 9 which is even not that bad™. Lately I’ve been vacillating between Firefox and Chrome.
At my wife’s work they’re now using Internet Explorer 8. That’s an improvement, they’ve been on version 6 for years.
This blog’s theme uses CSS border radius effectively and it doesn’t render correctly on version 8. You get square blocks where you wanted round corners. The next version it works fine, version 8 and below not so much.
There is a work around but it’s ugly. Add conditional CSS to your head for any version of IE less than 9 and reference PIE.htc from CSS3 PIE.
This is easily done by adding some code to my theme’s functions.php file.
1. Download the zip file for PIE.
As of this writing that is PIE-1.0beta5.zip. Head over to http://css3pie.com/download-latest and grab a copy.
2. Create a pie directory where your theme is and extract that zip file there.
I’m using a child theme of Elemin, so for me that’s located in mostlyharmless-elemin/pie. I like to make a separate directory to keep things organized. In 6 months I don’t want to ask myself “what’s that file again?”
3. Find the “offending” CSS.
In your theme’s style.css look for any references for border radius, those are the elements you’ll need to apply the fix to. The one’s I’ve looked for are these.
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
Those are the elements that need this hack for IE 8. For my theme those elements (separated by commas) are
#header, .post-nav span span, .number, .back-top a, input[type=reset], input[type=submit], input[type=text], input[type=password], textarea, input[type=search]
4. Add code to your functions.php file.
What we want to do is add to the head a conditional so that if the Internet Explorer browser is less than version 9, add the behavior tag to those CSS elements. We could do if via editing the theme’s header.php but that’s an even uglier solution.
add_filter( 'wp_head' , 'mh_ie_lt_9_hack' );
function mh_ie_lt_9_hack() { ?>
<!-- child theme hack for versions of IE 8 or less -->
<!--[if lt IE 9]>
<style type="text/css" media="screen">
#header, .post-nav span span, .number, .back-top a,
input[type=reset], input[type=submit], input[type=text],
input[type=password], textarea, input[type=search] {
behavior: url("<?php echo get_stylesheet_directory_uri() . '/pie/PIE.htc'; ?>");
position: relative;
zoom: 1;
}
</style>
<![endif]-->
<!-- /child theme hack for versions of IE 8 or less -->
<?php }
To get it work I had to add position and zoom. Not sure why, my CSS is often lacking.
Now visit your site via Internet Explorer 8 or even 7. The site should now enjoy it’s CSS3 radius glory for those elements you’ve identified.
5. I don’t have Internet Explorer 8 installed, how can I test this?
Neither did I. I had to test from work and my wife’s laptop. But if you have patience you can check out your site via Browser Shots or via Adobe’s Browser Lab.
This is something I’m doing mainly to get the web site to look spiffy for older browsers. In IE 8 and IE 9 this blog renders well. Even in version 7 it looks mostly okay. IE version 6 and below need not apply.
People should be encouraged to upgrade to the latest version of their browser. Even Microsoft get’s that and is trying to stomp out version 6. But for half of my visitors who use Internet Explorer 8 this works fine for now.