Expressing IT

Have you noticed sometimes , how simple things just refuses to work in IE6 …location.href is just such a thing.

If you have added an onclick function to your anchor tag like below …

<a href=”javascript:void(0);” onclick=”onClickLink(‘xxx’);” > go to new location </a>

With some function like this…
function onclickLink(id){
var URI = “test2.html?id=”+id;
window.location.href = URI;
}

To your irony, you would notice that such a piece of simple script refuses to work in IE …  Well! I can discuss reasons here,  but not think it will be worthwhile … Though , I do seem to have a solution… ( I bet if you understand Javascript, you will understand , why we add this tweak for IE6)

The Solution

<a href=”javascript:void(0);” onclick=”onClickLink(‘xxx’);return false;” > go to new location </a>

If you any simple answers , please do write a comment. It will really be appretiated, I bet , by Many!

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