Patching for Internet Explorer

Internet Explorer (up to version 7) lags a long way behind other browsers in its support for the various standard stylesheet commands. To get your page to display reasonably in all browsers while still allowing you to use the most modern stylesheet commands you should set up your main stylesheet file to contain all of the commands that are needed to display your page correctly in modern browsers that understand those commands. You can then set up a separate stylesheet file with the override commands that you want Internet Explorer to use to fix those commands that IE doesn't handle correctly and possibly doesn't understand at all.

By doing this you can avoid the need for any stylesheet "hacks" and futureproof your stylesheet code to make it easy to handle the necessary changes if/when Microsoft finally decide to bring Internet Explorer into the 21st Century.

How we implement this is to use special conditional comment tags that are only processed by Internet Explorer to conditionally include the second stylesheet file after the first one where it is needed.

Let's say we call our main stylesheet file master.css and our IE specific file ie.css (just for the purpose of this example, you can of course name them whatever you like). We can then link them into the head of our web page using the following code:

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

The entire code between the <!-- on line two and --> on line four is treated as a comment by all browsers except for Internet Explorer and therefore the ie.css file doesn't get included by those browsers. Internet Explorer sees the [if IE] as an if statement asking if the browser is Internet Explorer and as it is then processes the enclosed code - in this instance including the file of stylesheet commands which override our master stylesheet commands as required to get the page to display acceptably in Internet Explorer.

When Microsoft finally do catch up with processing the standard stylesheet commands we can then modify the if statement to test for which version of Internet Explorer is being run and only include the ie.css file in older versions of IE that don't understand the standard CSS used in our master.css file.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow