Some browsers don’t support CSS as well as others. Some designs require CSS-hacks to assure browser compatibility. I think that the most used CSS hack must be the use of Conditional Comments, but the major disadvantage of Conditional Comments is that they require to change the HTML file. Sometimes it’s not possible or not convenient to change the HTML, for example when you already have a site with hundreds of pages and you don’t want to add the conditional comments to make use of the new design. That’s why I’m writing an article about CSS hacks that you can use inside the CSS file.
These hacks all use valid CSS.
Hide From Internet Explorer 6
Internet Explorer 6 is causing much bugs. It often does not handle CSS correctly and that can cause some trouble. You can however easily hide some (adjusting) rules from Internet Explorer 6. This is how:
#text {
color:green; /* The color is set to green */
}
html>body #text {
color:red; /* The color is adjusted to red, but IE6 doesn’t see this rule */
}
The text will be red in all browsers, except Internet Explorer 6. For example you can use this hack to adjust the margin or padding if that’s wrong in Internet Explorer 6.
Hide From Internet Explorer 7
This is the same code as before, but we’ve added a comment between the selectors. IE7 doesn’t see this so the rule will be ignored.
#text {
color:green; /* Color is set to green */
}
html>/**/body #text {
color:red; /* Color is set to red, but NO version of Internet Explorer sees this */
}
Result
I added the 2 examples into one HTML file.
See the result (Look at the difference between Internet Explorers and other browsers)
And this is the complete source code:
<html>
<head>
<title></title>
<style>
#text1 {
color:green; /* The color is set to green */
}
html>body #text1 {
color:red; /* The color is adjusted to red, but IE6 doesn’t see this rule */
}
#text2 {
color:green; /* Color is set to green */
}
html>/**/body #text2 {
color:red; /* Color is set to red, but NO version of Internet Explorer sees this */
}
</style>
</head>
<body>
<p id=”text1″>If this text is green, you are using Internet Explorer 6 (or older)</p>
<p id=”text2″>If this text is green, you are using Internet Explorer 7 (or older)</p>
</body>
</html>
- Make your site cross browser compatible in 5 steps | Onyx Design Weblog
- CSS coding for cross browser compatibility | Onyx Design Weblog
1
Another good way to hide anything to IE6 is to use the !important directive:
width: 200px !important; /*Visible by any browsers, IE6 exepted*/
width: 150px; /*Visible by IE6, other browsers will not apply due to the !important directive.*/
The following hacks may be useful, althout, yur css will not validate.
_width:200px; /*Only IE6 sees it*/
.width: 300px; /*Only IE7 sees it (notice the dot before the property name! */
Greetings from Belgium;
jbj
2
@jbj
Thanks, maybe I should include it in my article.
That first one sounds good
But I don’t see the benefits of the second one, because it won’t validate.
Thanks for your comment!
3
I still prefer conditional comments, I think it’s easier: one tag for your seperate CSS in two comment ‘tags’.
If you use this CSS, you don’t always know what the result will be (with different browsers) and you can also make mistakes with typing CSS hacks. And often I also forget what the purpose of the code was, but you can always add comments in your CSS.