Ross on
22nd February 2015

Developing websites for different browsers can often get complicated. I recently had an issue when trying to make a really visual site, which looked great in the most bleeding edge version of chrome, but looked awful in Internet Explorer.

Here are a few things I learnt along the way which may just help you from tearing out all your hair. It’s too late for me, but you can still save yourself. 

Versions are important

The old fashioned way of doing style controls for I.E were fairly straightforward. You placed an IF statement within your HTML in comments. That way if another browser read it, it would just think it was a comment and discard it. I.E on the other hand would understand and then run whatever was in between the IF statement. For example:-

<!–[if IE]>

<link type=”text/css” rel=”stylesheet” href=”/stylesheets/ie.css” />

<![endif]–>

The downside is that this no longer work in I.E 10 and above which is why versions are important.

jQuery is your friend

Another great way around this problem is to use jQuery. You can add a really small script which you can then add a class to your main document (or even just specific parts) to add explorer styling.

Just like so (don’t forget to add the jQuery library as well.)

if ($.browser.msie) {
 $("html").addClass("internet-explorer");
}

The  downside this time is if the user has JavaScript disabled the script above will have no effect.

CSS @media queries are awesome

Now this will only work in I.E10 and above so you will have to use a combination of the above to get a full range of browser support.

By using a CSS media query which only targets features found in Internet Explorer you have a really reliable way of making edits that will only effect styling in I.E.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

/* Code goes here */

}

Obviously there are tons of other techniques out there but it’s always good to have a few go to solutions.

If you are still struggling to make your site look amazing in Internet Explorer give us a shout. We can definitely help.