Browser differences can drive a web developer mad

As a web developer, one important task is testing web pages with multiple different browsers and even different versions of the same browser.  This could drive a person insane, but I’d like to share a couple of discoveries.

Trying to be a good developer I’m using ‘div’s more than tables these days, using CSS extensively, and trying to code to ‘strict’ page layout rather than ‘quirks’ mode or ‘transitional’.

If all the above paragraph makes no sense to you and you’re developing web pages, I can guarantee they won’t look the same across Internet Explorer 6 (IE6) or earlier (shudder), Internet Explorer 7 (IE7), and the about to be released IE8, FireFox (FF 1.x, 2.x, 3.x), Safari, Opera, endless mobile phones, oh and Google Chrome, etc.

First admission – I do not bother testing on all the above browsers.  That would be the first step toward insanity.  I look at browser statistics to see what the vast majority of people are using.  Anyone else?  Best of luck to you.  I refer to w3school’s excellent page on this.  As of writing, this shows IE6, IE7 and FireFox account for 91% of all browsers in use!  So that’s what I test.  I have an old computer I deliberately don’t upgrade to IE7 (it has IE6 SP1), I have IE7 and FireFox 3 on other computers including my main desktop.  IE6 is sliding down (thankfully) from 34% to 20% in one year but that doesn’t mean I can avoid the testing for a while yet.

<rant> The biggest headache by a long shot is IE6.  It has some BIZARRE behavior.  For one of the wealthiest and most successful companies on the planet to have its most widely used piece of software be so riddled with bugs and incompatibility with MASSIVELY documented web standards is inexcusible. </rant>  OK, I feel better now. 🙂

There are MANY web sites documenting IE flaws, but the biggest problems I’ve found are with IE6 and earlier, and specifically with its confusion and completely screwed up calculations relating to widths, margins, padding, borders, and even positioning.  Apart from that it’s great.

The page here demonstrates ‘default’ differences in browsers.  It looks different in IE6, IE7, FF.  Go ahead and look at the html/style tags – not much to it!  IE and FF have different default body margins, different default paragraph line heights, and a HORRIBLE bug in IE6 which DOUBLES the margin sizes of any divs that are FLOATED!  Ugh.

Fortunately, there are fixes that countless wasted hours have been spent discovering.

For the doubling (and worse) of margin sizes for floats by IE6, the fix is to add “display: inline;” to the style definition (or inline style value of the element) which since it’s a float should be ‘obvious’ and the default, and does seem to be for IE7 and FF, but IE6 needs this to get it right.  Thanks to this excellent web site for this solution!

For other problems, setting defaults are the main solutions.

The second page here has these fixes applied and looks pretty much identical in the 3 browsers.

I hope this helps.