Coping with incompatible browsers

You hear of new software’s to browse the internet before you know it, be it new browsers or new versions. But how many of these really run the code on your website as expected? In spite of the W3C’s (World Wide Web Consortium) attempts to establish common standards, not many browsers comply, not to mention the oldest browser around, Internet Explorer. At the same time, you cannot expect users to use a W3C compliant web browser. Ask a newbie if s/he knows what Firefox is. “Fire… What?” would be an expected answer. If you are building a website, make sure its runs on atleast the popular browsers around, IE, Firefox, Chrome, Opera and Safari.

Here I list a few browser compatibility problems I’ve faced, and how I managed to solve them.

HTML

Opacity :
How would you define opacity for an element, style=”opacity:0.5″ ?

This is guaranteed not to work in IE, any version.
While IE goes ahead and defines its own format for defining opacity, it also changes the scale on which opacity is measured from 0-1, to 0-100.

Here is how you need to define opacity on versions prior to IE 8,

filter:alpha(opacity=50);

IE 8 was taken a step further in defining new rules. IE does not recognize the opacity attribute unless you define it as given below.

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

While you need to define opacity in all three ways above to make sure it works on IE, there is another constraint. IE 8 does not recognize the attribute unless ordered as below.

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
filter:alpha(opacity=50);
opacity:0.5;

All this for defining opacity for one element.

Cursor :
You have come across “cursor: hand;” for changing the cursor to ‘hand’ on mouseover of an element. While IE reads this attribute, Firefox and Chrome does not, unless you add another attribute, “cursor: pointer;”.

MouseOver on the two span’s below to see for yourself. One uses only the ‘hand’ property, while the other includes ‘pointer’ as well.

cursor: hand;

cursor: hand; cursor: pointer;

Z-Index :
Coming to IE again, it does not support the z-index property ‘inherit’. Which means, you are bound to specify a z-index value for all your elements unless you have no overlapping content.

I believe Internet would have been a better place if Microsoft just choose to follow the W3C standards instead of making their own. And to make life more complicated, they pushed in a ‘Compatibility View’ on their latest version, IE 8. This ‘Compatibility View’ mode is not meant to comply with W3C, but just an option to view websites as it appeared on IE 8 prior versions.

And, you need an extra meta-tag to make sure your websites runs on IE in the compatibility mode.

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

Comm’on, This is just a browser, not a operating system to define its own rules.

P.S, this post lists only few issue’s I came across. There are bound to be many more browser compatibility issues such as screen resolutions, font sizes, etc.