If you have been writing CSS for while, you would have experience those times when you literally pull your hair when your CSS layouts looked fine in all the new browsers ( I mean browsers later than IE6) , but IE 6 throws a tantrum. You struggle hard to adjust your CSS but it doesn’t work … Well! Try These HACKs…
1. Underscore Hack :-
By definition, CSS 2.1 specification allows underscore (“_”) in CSS identifiers. But many browsers still seem to ignore any identifies proceeded with an underscore but IE. This IE’s bug/feature thus becomes a very clear way to set CSS properties for IEs only. so remember, A CSS property written with the underscore on the start is visible for Internet Explorer (all versions but IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}View demonstration of this underscore hack
Also, The min-height hack for IE6 uses the underscore hack, check out
2. Hash(#) Hack :-
Like the underscore hack, this one is too is for IEs oly, with a good difference, property identifiers preceded with # on the start is visible for All IE versions , IE7 included and is invisible for any other standard browser.
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}
3. CSS for IE6 only:-
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}
These hacks seems heaven sent, when nothing else works… If any of these hacks saves your life someday, dont forget to treat me to a coffee:)
