How did the browsers do?
Having designed and marked-up all my pages and tested them in Mozilla, I tried them in Internet Explorer 5.1.5 on my Mac. Luckily, most things worked right off and if they didn't, my previous tips about avoiding the 'margin' property of boxes and not assuming default behaviours of nested boxes took care of the nasties.Browsers used for testing
- Netscape 4.78 Mac
- Netscape 7 PR1 Mac
- Mozilla 1.1 Mac
- Mozilla 1.0 Windows
- Explorer 5.1.5 Mac
- Explorer 5.5 Windows
- Explorer 6.0 Windows
- Opera 6.05 Windows
- iCab Preview 2.8.1 Mac
I then moved over to Explorer 6.0 on my Windows XP machine and was pleasantly surprised. Only a few minor tweaks needed there too. Explorer 5.5 on Windows 2000 was a little more troublesome and I had to revise a few layouts to find workarounds, but it wasn't as bad as I expected. There are a few minor cosmetic glitches remaining, but I doubt if many will notice them unless they are doing a side-by-side comparison with Mozilla or IE 6. The main problem with Explorer (on Windows) seems to be that it doesn't get the font 'line-height' property quite right when font sizes are specified as pixels.
Explorer 6 and 5.5 on Windows and 5.1 on Mac, accounts for something like 95% of all Web users - if you believe the stats. The site works perfectly in Netscape 7/Mozilla 1.0. What about the rest?
The latest 6.05 version of Opera for Windows lagged behind the mainline browsers in CSS rendering capabilities. It claims to be fast, but it wasn't noticeably faster that the other browsers, in fact screen redrawing of the layered graphics seemed slower than the other browsers on my machine.
Note: A couple of readers have pointed out how a few minor changes to my CSS definitions can make Opera render these pages much better. I have amended the scores accordingly. More about that next time.
Likewise, iCab Preview 2.8.1 for Mac, was hopelessly inadequate at rendering many of the CSS positioned pages. It broke most of them and failed to render five pages to any meaningful standard.
Good old Netscape 4.78 coped with absolute positioning reasonably but failed to render any background colours or layered graphics. With this browser, most of the pages were compromised to one extent or another but in no instance did it totally fail to render a page. A side effect of the inability to cope with positioning is that, although you could see the navbar on the screen, the links just did not work making it impossible to navigate the site. To get around this problem, I produced an alternative menu page, 'altmenu.html', using tables instead - it's still W3C compliant!