Expressing IT

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

I had this problem  where , if you had a mouseover event on a division (DIV)  and that division , for some good reason had to be transparent(as In my case, where it was required to display some tags over an image on mouseover of this transparent division),  IE failed to trigger the mouseover event ( Worked fine in FireFox).

Tried several options … many of which was just a desperate attempt to get the event to fire in IE. One of the sensible ones, that I thought might work was to set a background color to the division and set the opacity to zero … Well! dint work!

The final solution which seemed  to work and not disturb the functionality I required was to put a one pixel  repeated/transparent background image in that division

… Silly! but now IE seems happy.

Simple … To correct this problem use display:inline.

div {float:left;margin:40px;display:inline;}

If you have a floated element such as a div and you place margin-right or margin-left on that element, Internet Explorer 6.0 will double that margin value, messing up the html/css layout. To fix this simply add display:inline; to your floating element.