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>_______________________________________________________________
This article originally appeared on http://www.onyx-design.net.
Reprinted with permission.