Web Design

When and How to Make Sure your Website is Compatible with IE8

You’ve felt the horror. You’re busy plugging away at creating a website for a company, eaking out visual design and code with passionate intensity. Suddenly you get a phone call with edits…

Estimated Read Time:  5 minutes


You’ve felt the horror. You’re busy plugging away at creating a website for a company, eaking out visual design and code with passionate intensity. Suddenly you get a phone call with edits for problems you can’t reproduce on your computer. Perhaps you’re using Chrome, pull up firefox… nothing. Click on safari.. looking good.

“Um, excuse me.. what browser are you using?”

“Internet Explorer 8”

You can just smell the dust wafting through the air at their office, some foregone conclusion that nope.. it’s just the accounting computer we don’t need to update it’s software.

Just like the move for more empathy for website visitors, making sure our websites are backwards compatible is a empathetic move. One that could make and retain customers.

If your website caters to non web savvy people, IE8 is now the standard of who you need to make your website backward compatible for.

Although the bane of our existence as web designers there are some go to tools for people who want to be able to have cool things and still cater to people who are a little less web technology forward to say the least.

Modernizr is a great tool for simulating media queries in older browsers

If you have responsive elements on your website, and particularly if you have built mobile first your up-to-date visitors might have a really great experience but media queries that help with catering to mobile devices can make a website look weird on Internet Explorer 8. Modernizr allows you to simulate those media queries using a polyfill. Download it here, and add it the head of your site with a simple call to javascript. Of course this code assumes you have modernizr.js in a file called js within the same file your site files are in.

<script src="js/modernizr.js"></script>

Or if you are working in WordPress add modernizr to your theme by enqueuing the script in your functions.php file.

function childtheme_script_manager() {
wp_register_script('new_service', get_stylesheet_directory_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);

Likely there will already be a place where the theme is ‘enqueuing scripts’ so the part after from wp_register_scripts down to the last semicolon will be placed inside that script manager.

If editing the functions.php file of your WordPress theme is new to you, try it… it’s a powerful feeling. But if you still can’t bring yourself to it, theres’ a plugin for that.

You can use Internet Explorer workarounds that will allow you to target only that browser with your CSS.

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

So in your page if you had an element that had a class of .header-logo, you could give it some IE8 specific CSS by putting this in your style sheet.

.ie8 .header-logo {margin-top: 10px;}

This is lovely and perfectly legitimate ‘hack’ that is super useful if you spot something you’d like to fix on only one class in Internet Explorer 7

.element {
margin-bottom: 20px;
*margin-bottom: 10px;

Adding an asterisk targets IE7 and doesn’t serve up that specific style to any other browsers

This is a ‘hack’ that is positively delightful if you’d like to fix only one class for Internet Explorer 8

.element {
margin-bottom: 20px;
margin-bottom: 10px\9;

Adding a \9 after the style and before the semicolon makes it so the style can only be read by IE8. Highly useful if an element isn’t quite working how’d like it on only that one browser.

I highly suggest dusting off a cheap old PC if you are currently rocking a Mac, and checking out your websites in developer mode on Internet Explorer. Newer versions of Internet Explorer allow you to emulate older versions of the software to see if you have any bugs or visual quirks. And with the method above you can smooth them over and deliver a good experience for people using older versions of Internet Explorer.

For further reading consider checking out CSS3 Pie

CSS3 PIE (http://css3pie.com/) – PIE stands for Progressive Internet Explorer. It is an IE specific behavior that can, when applied to an element, allow IE to recognize and display a number of CSS3 properties. Using PIE helps you be able to use commonly appreciated CSS properties such as border-radius, box-shadow and background gradients in IE8.

Have any other awesome resources for targeting and serving up deliciousness to older browsers or in particular making your website compatible for IE8? Tweet at me or leave a comment. I’d love to have you as part of the conversation.

Notify of
Oldest Most Voted
Inline Feedbacks
View all comments
Joey Augustin
Joey Augustin
8 years ago

Some good resources here, Tim. The modernizr, .ie8 method is a good one for minor adjustments. Making sure browser support is part of the initial build spec can definitely prevent these types of headaches, too.
I like your site! I’m from Minneapolis area too, and went to AI for Web Design and Interactive Media.

Tim Brown
Tim Brown
8 years ago
Reply to  Joey Augustin

Amen to that brother. I always like to push the limits and reach out to new tech. It’s just tough making sure everything has the appropriate fallback all the time. Thank you for the compliment on the site sir, I really appreciate it. My buddy is going to AI this year for web design, you like it? Thanks for dropping a line!

Joey Augustin
Joey Augustin
8 years ago
Reply to  Tim Brown

Yea AI was good. Some great instructors. It was expensive though.

Tim Brown
Tim Brown
8 years ago
Reply to  Joey Augustin

I feel you! Time to pay off student loans 😉 I’ll be doing that for a bit too.

Are You a Home Service Business Who Wants to Increase Your Qualified Leads?

Contact Us Now




The Roofing Academy