For your IEs Only

September 8th, 2007 by Nikhil

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 */
}

This hack has been used nicely to demonstrate a cross browser vertical align solution, have a look at this article to find our more


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: , , ,


get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter


Leave a Reply

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter