For your IEs Only
September 8th, 2007 by NikhilIf 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:)
Tags: IE Bugs, IE Fixes, IE Hacks, IE Issues
Subscribe to ExpressingIT by Email | Follow Me on Twitter