Conditional Stylesheets for Internet Explorer

As a web developer, I’m sure most of us code our sites in our favorite browsers such as Firefox or Google Chrome. Sure enough, we speed through coding as everything works out right, but then we get slapped down by clients when they open their Internet Explorer browser and they see a huge mess. If you haven’t experienced this trouble, then either you’re a web coding prodigy, or just haven’t checked out some of your works on IE6 and up. (I have to give IE 8 some credit for being somewhat usable).

So what’s the fastest way to clean up?

Step 1 – Another CSS file just for Internet Explorer

One of the quickest fixes, rather than trying to find in your CSS what could be the problem is to simply have another CSS file just for Internet Explorer. I usually call mine style-ie.css or ie-style.css. Once made, we need to import that stylesheet, however if we just imported like normal, then the styles in the new stylesheet will actually replace our main sheet. We only want to fix the problems in Internet Explorer, so how do we target that browser specifically?

Step 2 – Conditional HTML Statements

If and Else Conditional Statements are one of the most used logic statements used in web developing. Simply, it states “If this is true, then do the following. However, if it’s not true, then do this other thing instead”. For those that don’t know much about if statements, consider that a basic review. These statements would go in the HEAD section of your html document or php document (for those WordPress/Joomla users).

So here’s the code snippet we will use to target Internet Explorer:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->

Now, we’re off to a good start, but again, Internet Explorer plays a trick on us and decides that not all Internet Explorers are the same. You’ll notice most specifically that IE6 and IE7 are really different. IE8 is probably the most standard and close to Firefox and other modern browsers. So now you want to target just IE7, or IE6 by themeselves?

This is simply done by just adding the version after the “IE” in the if statement just like this:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />\
<![endif]-->

And from there you can quickly cheat and move some margins, do some positioning, and other CSS fixes you may need to do to make your website appear relatively the same cross-browser.

Being Cross Browser Compatible

Knowing how to be cross browser compatible and being cross browser compatible is a very good addition to your arsenal of services and also makes you more presentable to everyone. (Although, shame on them to use such an old browser). I’m not a big fan of IE, as you can see, I haven’t even done fixes in IE for my site, and personally I don’t think I will either way. However, for clients where most of their audience are using old and deprecated browsers, then it’s definitely a selling point to say that you can make their website look good across all platforms.

Final Thoughts

That’s it for my coding quick tips. I’ll most likely have a lot of these since they are more easy to handle than a big tutorial teaching everything. In addition there’s lots of resources out there that you can use to teach yourself the basics, and even more advanced techniques than what I show here. Again, I’m showing techniques that I experience in my career and ones that I find very useful for everyone to know. Keep following, and subscribe to my site. See you again tomorrow.