Mon, 15/09/2008 - 21:57 — horuskol

I was presented with an interesting problem today.

We supply some of our clients with a desktop CMS application with which they can publish articles and pages to their websites. The CMS was written a good few years ago, and outputs mostly transitional HTML4 and some CSS. Like all “WYSIWYG” systems, it can throw a spoke in the works which cause pages to break. Digging out the cause isn’t always simple, although it generally turns out to be a very simple cause once found.

In this case, the problem was that, in Internet Explorer, only the first published paragraph was taking the required font settings (although it looked fine in the CMS itself, of course). Oddly, FireFox was behaving (despite what a lot of people will have you believe, FF is not always perfect, and there are somethings that IE does closer the standards than FF does – but FF is probably better).

The Root Cause of the Problem

Eventually, I found the problem – when saving the page as an HTML fragment to be included in the templated, the code was being written as (bearing in mind that this is transitional HTML4):

<p>
  <font face="Verdana, Arial, Helvetica, Sans Serif" size="1">Blah<br>
</p>
<p>
  More blah
</p>
<p>
  etc, etc, etc...
</p>

Here you can see the problem – the selected font settings are set in a font tag, but that font tag is only included in the first paragraph.

The Reasons

What IE did with this code was to close the unclosed font element before its containing paragraph was closed (which is correct according to how browsers should deal with badly formed code).

What FF was doing was to reopen the font in each subsequent paragraph (which is also correct according to how browsers should deal with badly formed code) – this can easily be seen thanks to the tools which can display the ‘generated’ source, showing what the source looks like after FireFox has done its thing.

How can both be correct? Well, the HTML4 standard dictates that browsers deal with malformed code as best as they can, and in any they chose.

Since any browser can do what they think is right, and that there is no guarantee any particular browser will work with invalid code, it is always a good idea to achieve a valid document regardless of what doctype you settle on, whether it is HTML or XHTML, transitional or strict. Most browsers are standards-compliant now, and a valid document is much more likely to render the same cross-platform.

Recommended Links

W3C Markup Validator