In regards to coding standards compliant websites with CSS, dealing with Internet Explorer can be a nightmare. Of course, all browsers have CSS bugs, but IE is known to have significantly more due to their own implementation of browser standards.
This is a list of some well-known issues found in Internet Explorer starting with version 5. Based on browser popularity and saturation reports, many web designers have targeted which versions of Internet Explorer they will support and which they will drop.
Neal Advertising’s general policy is that we do NOT support IE6 any longer and provide simple redirection for IE6 users to gain access to more recent and advanced browsers. We know this will limit some users and aggravate users on a network that doesn’t allow them to upgrade their version of IE. However, with any new sites we create and develop, we always make a point to analyze the demographic of that site and decide whether it’s a good idea or not to drop IE6.
No matter how well you write HTML and CSS, it is inevitable that you will need to specify certain adjustments for Internet Explorer. With this fact in mind, there are several different ways to target a specific version of Internet Explorer for optimal viewing results.
Using Conditional Comments
Using conditional comments can be valuable because they are easy to define in the head of your document and keep all of your specific CSS fixes in one separate, contained location. It is important to keep in mind that they will only work in Internet Explorer on Windows. (Since Apple dropped IE at version 5.5 and added the more compliant-friendly Safari, this isn’t really a huge problem.)
Conditional comments are considered a CSS “hack” because they give special and specific style instruction to some browsers. They are different from in-CSS hacks though because they don’t use one browser bug to solve another one. Conditional comments are a deliberate feature implemented by Microsoft for developers to purposely target Internet Explorer only.
In-CSS hacks can be confusing and ugly and sometimes will make CSS files invalid to the W3C validator. The are also not 100% future proof to browser updates. (Peter-Paul Kotch of http://www.quirksmode.com has written a great article against using in-CSS hacks.)
How To Implement Conditional Comments
Below is a basic example of a conditional comment found within the <head> </head> tags at the beginning of an HTML document:
<!--[if IE]><link href="screenIE.css" type="text/css" rel="stylesheet" media="screen" /><![endif]-->
The basic structure of a conditional comment is the same as an HTML comment <!-- -->. Internet Explorer has been programmed to recognize the <!--[if IE]> syntax – it will resolve the if statement and parse the rest of the conditional comment as though it were normal page content.
Referring back to the above example – if the browser is any version of Internet Explorer and reads this line, then it will include the screenIE stylesheet.
You can also specify a specific version of Internet Explorer:
<!--[if IE 6]><link href="screenIE6.css" type="text/css" rel="stylesheet" media="screen" /><![endif]-->
In this example, the screenIE6 stylesheet will only be included if the browser being used is Internet Explorer 6.
There are also very specific operators you can add to the if statement for greater control. Suppose you want to specify any Internet Explorer greater than version 5:
<!--[if gt IE 5]><link href="screenIEall.css" type="text/css" rel="stylesheet" media="screen" /><![endif]-->
So technically this would work in Internet Explorer versions 5.5, 6, 7 and even 8. A fair warning that some versions of IE handle certain css declarations differently, so if you are using a solution like this be sure to double check all versions to ensure you are getting the proper results.
Here is a full list of all operators and their results.
More About Conditional Comments
A great way to use conditional comments is to simply overwrite a specific declaration from your main CSS that is causing display problems in IE.
For example, sometimes IE will display padding or margin values differently. If I’m seeing a discrepancy in IE 7 and in my main CSS I have a declaration like:
#header{ background:red; padding:20px 0; }
To target and fix the issue in IE 7 you’re conditional comment in the <head> of your document would look like:
<!--[if IE 7]><link href="screenIE7.css" type="text/css" rel="stylesheet" media="screen" /><![endif]-->
Then included in screenIE7.css would be a simple overwriting to the above padding value (keep in mind that when overwriting main CSS styles, it’s required to include your conditional comments BELOW your main CSS declaration). It might look something like:
#header{ padding:10px 0; }
There are other uses for conditional comments besides targeting stylesheets based on browsers. They can be used to implement a specific JavaScript file or function based on a user’s browser. They can even be used directly in HTML markup to show specific content based on a user’s browser.
Microsoft has a great overview of conditional comments on their developer network. Take a look and learn more!
This topic is quite trendy in the net right now. What do you pay the most attention to while choosing what to write about?
Yay, now I can use Javascript to attack all those under the control of IE6!
Great read and good advice.