Am I right in thinking that all government bodies are legally bound to make their websites accessible to all? Maybe it's just an American thing. Either way I was surprised when I visited my local County Council's website and noticed fonts on certain pages were unreadable in Firefox, while ok in IE.
Being an upstanding member of the local community (ahem) I used the contact form to let them know. Hey, I was bored. So bored in fact, that I went even further and decided to look in to what the problem was. Here's how:
The first thing I did was view source. As expected, they use a stylesheet. To find out which bits of this applied to which parts of the page I needed to understand the make-up of the page. To do this I opened the DOM Inspector, which is under the Tools menu in Firefox. Using the Inspector (detailed explanation of how in my next blog entry!) I found that the small text links live in spans with class "leftnavlinks", which live within cells of a table. Looking through the stylesheet I found the following rules:
Can you see what's happening? As the styles cascade down from the cell to the span, Firefox is making the font size equal to 75% of the normal size of "x-small"!
Here's some text that demonstrates the effect:
|This is x-small and in a cell.|
Why the difference between the way IE and Firefox render the text? They both make the text in the span 75% of x-small! It's just that they both have different ideas about how big x-small is in the first place. In IE it's fairly small, whereas in Firefox it's really small. Because it's down to the browsers to decide, there's bound to be differences in interpretations. Having font sizes based on a percentage of an "unknown" size can therefore have a devastating knock-on effect.
It's also affectged by the doctype of the page. In this case the council have used the following DOCTYPE (coincidentally the same as Domino uses for this site):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
This puts the page in "Quirks Mode" (Tools -> Page Info to see which mode a page is in). Now, if you change this to the following DOCTYPE, which includes the DTD, the page is put in to "Standards Compliance Mode" and then IE makes the font unreadable as well! Here's a sample page in HTML 4.0 Transitional and one in HTML 4.0 Strict. Notice the different renderings in IE and note that all that's changed is the DOCTYPE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This doesn't solve the problem for NCC so. They need to re-consider using font sizes that are a percentage of a certain size. If they want the links on the left to be slighlty smaller than x-small they could use "xx-small", as below, or maybe "smaller":
|This is x-small and in a cell.|
And the moral is? Well, be careful when sizing fonts that may inherit other size properties from their ancestors. When nothing seems to be going as you'd expect, remember that the page's doctype can have an effect on the way different browsers apply styles.
But, we're Domino developers, and so don't have much control over the DOCTYPE. My only advice is to develop and test your CSS with the same DOCTYPE as the target server uses. I normally mock-up a site using a dummy HTML page created in TopStyle. This page is normally in Compliance Mode and so it's probably better to edit the doctype and use Domino's. Alternatively TopStyle allows you to switch between doctypes while in edit and preview mode.