I have started to Firefox-proof the web site for Tim. Firefox support is important because that browser has achieved a market share of 20%(particularly among savvy users) that is still growing. Once that is done, I should get one of the Apple users to test the web site under Safari (3rd place browser after Internet Explorer and Firefox).
Tables of tightly spaced image fragments
One of the differences that gave a lot of headaches was (quoting from Tedster):
Say you’ve got some images held together nice and tight in a group of table cells. And in Explorer that’s exactly what happens – the images interface with no gaps at all. Maybe now after some hard work your mark-up has validated to some nice DTD – maybe XHTML strict. But when you view your page in a recent browser (especially Mozilla, Netscape) you find a fat extra space, commonly below the image.
It turns out that Internet Explorer, although displaying what I intended, was actually wrong: it was ignoring the CSS standard. And Firefox was simply right, in the sense that it did follow the standard. A readable explanation and a few alternative solutions can be found here (thanks to Rob Jansen op de Haar for finding this). One of the most curious things you can learn from the explanation (ultimately about what the standard says about image alignment and text baselines) is that modern browsers try to distinguish between older and newer web pages. If the web page starts with something fancy like
‹!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"›
the browser will assume you know what you are doing and will strictly do what the standard says (“standards mode”). If such a line is not found (“quirks mode”) it will revert to old rendering conventions used in older browsers because it assumes this is an old page written before the rule book changed (or more accurately: written before there was a rule book).
I have also been busy converting the web site from plain HTML to pages generated using PHP scripting. This will hopefully clean up the code and simplify achieving a consistent look-and-feel across pages. It also creates the option of making the pages more intelligent or dynamic (the main reason people use PHP in the first place). Till now, the results are not conclusive: the amount of lines of code is growing, despite moving to a higher level of abstraction. The total amount of lines of code will hopefully drop once more pages have been converted to using the shared code (currently called