Today i faced a problem while trying to center align my main div in IE6.
The Problem
#main
{
width:960px;
margin:0 auto;
}
This made my div to align itself in the center in firefox and Internet Explorer 7 but, it failed to do the trick for IE6.
“What?!! the dawn of IE8 is upon us and someone is writing about css hack for IE”
Well… my response is simple, you don’t need to use this it’s just for your knowledge. 😉
I have been using this trick for two years now, as most of the other magical css hack were above my head.
I discovered this accidentally, and it might not be an hack also, but i use it a lot in my work.
So what is this hack?
Simple, just put ‘//’ in front of any valid css declaration, most of the other browser will treat this as comment and ignore it, while our friend Internet Explorer will not treat this as comment and render the property.
<style>
.test{
color:red;
//color:green;
}
</style>
<p class='test'>I will be green in Internet Explorer, red in all other browsers</p>
The only thing that you must note is the sequence of statements. The declaration that you want to override in IE should come after the declaration for other browsers. What it means is that if you put the //color:green first in above example then even IE will show the color of text as red.
Example:
I will be green in Internet Explorer, red in all other browsers.