As long as Internet Explorer will be around holding onto their share of the market in the world of legacy browsers, you’ll have to face the facts and develop your CSS to work around versions of Internet Explorer 7 and 8. We have had a ray of hope with the shunning of Internet Explorer 6 as it has now begun to join Netscape in the graveyard of browsers past.
I understand, getting Internet Explorer to comply can be infuriating at times. And I’ve had to take a stance against developing in Internet Explorer 6, as we all should, but there is help and I hope this article points you where you need to go. One of the first steps when putting the project together is figuring out what browsers you need to develop for. If you ask the client, 9 times out of 10 they’ll say “All the browsers!”. You’ll need to take a step back and examine who their target audience is. Are most of their users tech savvy and use modern browsers like chrome? OR will their users be accessing the site, often at work, behind some sort of firewall system, and forced to endure a browser like Internet Explorer 7 or 8 due to corporate security reasons?
Chrome, while great, at times can make us see our sites through rose colored glasses. It understands HTML5 tags, has little to no compliance issues, and makes everything right the first time. A lot like a warm development security blanket. Depending on how you built your site, particularly in this case dealing with WordPress, there is a good chance that everything will not be as kosher when you view it in Internet Explorer 7/8. That doesn’t mean you’ll have to toil day and night trying to sort out all of the compatibility issues, trust me I’ve been there and done that. Then there is that eureka moment where it all starts to come together.
I will admit it did take some honest feedback and a hard look at how my code was structured and a fair amount of research on a previous project to get it to even look half way decent in Internet Explorer. Instead of sweating the details over positioning and floats, IE likes elements that stack well together. In this case it was a background image in a featured area. I was trying to wrap everything under one .container class when I should have created 3 different stackable divs with a width of 100% and margins left and right to auto. That being said, if your audience will be viewing the site in IE 8 or 7 it might be a good idea to tackle building for those browsers first, then branching out into Firefox, Safari, and Chrome.
In this article, I will be showing you how to make your conditional statements, transparencies, and fonts renderings help make Internet Explorer 7/8 more compliant browsers. The use of conditional tags to target specific browser cannot be stressed enough in this article. Much like media queries, the conditional tags that can be found in your <head> section, execute certain variables once met with the condition of the statement. Let begin by structuring a tag:
<!--[if IE 6]>
<style type="text/css">
#browserWarning { display: block; }
<h1 id="browserWarning"> Still using Internet Explorer 6? Don't you think it's time for an upgrade? Download <a href="http://chrome.com">Chrome today.</a></h1>
</style>
<![endif]-->
<!--[if IE 7]>
/*Do Something Cool*/
<style type="text/css">
#browserWarning { display: none; }
</style>
<![endif]-->
<!--[if IE 8]>
/* Do Something */
<style type="text/css">
#browserWarning { display: none; }
</style>
<![endif]-->
<!--[if gt IE 8]>
<!-->
/*This is where your HTML tags for modern browsers would go*/
<style type="text/css">
#browserWarning { display: none; }
</style>
<!--
<![endif]--><!--[if IE 7]>
<html class="no-js ie7" <?php language_attributes(); ?>>
<![endif]-->Now you can begin to format your CSS in the same sytlesheet, if you so choose, with the prefix class of: .ie7 #wrap { width: 80% }
All of you’re IE 7 specific styles should then apply themselves accordingly. If you keep running into issues and your website still looks like a hot mess more than the structured design you envisioned, you’ll need to make Internet Explorer recognize several of your linchpin elements in the code.
One snippet of Javascript I’ve found rather useful creates element names based on the HTML5 tags that you’ve used. That means you can still utilize the navs, headers, articles, and so forth. It’s nothing complex, so let’s take a look:
<!--[if IE 8]>
<html class="no-js ie8" <?php language_attributes(); ?>>
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->And almost like magic, your website begins to look consistent between various browsers. You can then begin to use positioning in your main CSS files with with the classes of .ie8 or .ie7 before the CSS property. Like so:
.ie8 .logo {
width: 200px;
height: 180px;
position: relative;
top: 0;
left: 0;
z-index: 2;
}You should take a moment to toy around with the position and elements till you can get them close as possible if not perfect. As most of us have moved onto greener pastures with our browser choices, there are ways you can test your designs in Internet Explorer 7 or 8. IE Tester, is a good place to start. It is the closest testing environment I’ve used that mimics how the site will look and all of it’s quirks. There’s also the cloud based in browser application Browser Stack which allows you to test all of your browsers even mobile browsers. God help us if someone was evil enough to make IE7 for a windows phone.
HTML5 Shiv
HTML5 Shiv or ‘Shim’ targets browsers older than Internet Explorer 9 in the same regards as the above Javascript. Shiv allows older versions of Firefox, safari, and Internet Explorer to read HTML5 tags and you can style them through the CSS. The only major difference between using this and the code above is the method of implementation.
You can download HTML5 Shiv from the GitHub repository maintained by Alexander Farkas, Johnathan Neal, and Paul Irish.
Transparency and PNG images
Both versions of Internet Explorer 7 and 8 have native support for transparency, but it often falls short of what you need. You can either face what is called the ‘black-halo’ when you set your opacity to 100%. Granted it can be removed when you remove the alpha properties, but what about gradients, etc.? This is where ‘filters’ play a role in our CSS. Let’s take a look:
.logo {
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=logo.png, sizingMethod='crop');
}In the above example we’ve set the background of our div class to transparent, then introduced a filter property. The 2 parameters outline our image source and the method we’re using to size it.
If we wanted to utilize a gradient inside of our div, we use a filter that is a not more complex than the Alpha Transparency. All your doing instead of calling the source and size in the filter, you are calling your starting bottom color #90B4B2 to your top ending color #D7EEED.
.logo {
background: url('logo.png'); background-repeat: no-repeat;
filter: progid:DXImageTranform.Microsoft.gradient(startColorstr=#90B4B2, endColorstr=#D7EEED);
}Quick Fix
If you need go back even further, there is hop in the form of the pngfix.js file from Bob Osloa. This JS file has been around a while as a response to the poor PNG rendering methods of Internet Explorer 6. I feel that the script itself still holds up today.
Font Rendering
In the several cases I’ve seen you can run into issues as well with ClearTypes. ClearType was introduced as a technology to improve the readability of text on LCD’s by Microsoft. Using ClearType with a background fill is best for that situation that way your fonts can appear as intended in the browsers.
It’s really a matter of choice. You can opt not to use ClearType, but those of you reading this that tend to be shall we say a bit “retentive” with the sites that you produce, such as myself, go for the ClearType with background fill option.
Hopefully if this article does not help you resolve the Internet Explorer compatibility issues your facing, I hope I could have at least provided you with a stepping stone. Using the methods and tools in this article can help save you hours or literally days of compatibility development time and a headache or two. Remember to keep your headache medicine close.
If you have any questions please leave them in the comments and I will respond to them promptly.
