As many of you are doing the right thing and testing your sites in more than just one browser you are becoming more likely to face the dreaded problem of ie browsers not rendering your styles as you expecting. The problems that we notice are usually are not subtle rendering issues but full blown nightmares such as your 3rd column is sitting below your other columns not next to them!!!
Possible solution- a JavaScript browser detection but I think this is overkill and pointless if the user has JavaScript turned off.
Which brings are to the other possible solutions of CSS hacks and conditional comments.
Conditional comments only work in IE so are perfect for giving instructions just for IE. They are supported from Internet Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.
Conditional comments work as follows:
<!–[if IE 6]>
Special instructions for IE 6 here
<![endif]–>
As you can see the basic structure is the same as an HTML comment (<!– –>). Therefore all other browsers will see them as normal comments and will ignore them entirely.
Internet explorer though, has been programmed to recognize the special <!–[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.
So one possible options to avoid your ie problems is to create an alternative style sheet and use a conditional statement to which feed specific style sheets for specific browsers.
Here’s some example syntax rules to feed the different IE versions:
<link rel=”stylesheet” href=”styles.css” type=”text/css” />
<!–[if IE]>
<link rel=”stylesheet” href=”IEStyles.css” type=”text/css” />
<![endif]–>
<!–[if IE 5]>
<link rel=”stylesheet” href=”IE5Styles.css” type=”text/css” />
<![endif]–>
<!–[if IE] 5.5>
<link rel=”stylesheet” href=”IE5_5Styles.css” type=”text/css” />
<![endif]–>
<!–[if IE 6]>
<link rel=”stylesheet” href=”IE6Styles.css” type=”text/css” />
<![endif]–>
<!–[if IE 7]>
<link rel=”stylesheet” href=”IE7Styles.css” type=”text/css” />
<![endif]–>
<!–[if gte IE 5]>
<link rel=”stylesheet” href=”IE+5Styles.css” type=”text/css” />
<![endif]–>
<!–[if lt IE 6]>
<link rel=”stylesheet” href=”IE-6Styles.css” type=”text/css” />
<![endif]–>
<!–[if gt IE 6]>
<link rel=”stylesheet” href=”IE+6Styles.css” type=”text/css” />
<![endif]–>
Code
The syntax means:
<!–[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]–>
<!–[if IE 5]>
According to the conditional comment this is Internet Explorer 5
<![endif]–>
<!–[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]–>
<!–[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]–>
<!–[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]–>
<!–[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]–>
<!–[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]–>
<!–[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]–>
<!–[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6
<![endif]–>
Note the special syntax:
- gt: greater than
- lte: less than or equal to
These conditional statements can also be used to override just single style declarations rather than having to have complete alternative style sheets but more on that later.