An excerpt from an email to the webmasters at the Chicago Sun-Times chastising them for significant HTML issues, some of which hamper proper rendering.
This letter refers to Roger Ebert's Great Movies series. The March 16, 2003 column included a sidebar.
I first looked at the page in Opera 7. There was a paragraph that was partially obscured by the sidebar. When I looked with IE6, the paragraph was there. I saved the HTML to a file to investigate. When I reopened the file in Opera, the paragraph re-appeared. It took me a few minutes, but I think I understand.
Opera was served a horizontal banner to display in the right-hand pane of the page. This put the squeeze on the main content column. That doesn't hurt very much because most of the content in that column can just be repaginated. The problem: the sidebar appears in a table with both a specific pixel width and the "align" attribute in the table's opening tag. The "align" causes it to float, which was your intention. Since the content column's width had a lower bound of the sidebar's table width, Opera was forced to render the paragraph under the sidebar! The sidebar had a solid background, so the first part of the paragraph disappears entirely. I suspect specifying the table's width as a percentage (and not specifying the one cell's width at all) would also have eliminated the problem.
Why did the paragraph reappear when I saved the file to disk and reopened it? The ads in the right pane didn't load, so there was nothing to squish the content column, and the text flowed to the right of the sidebar, as expected.
In examining the HTML, I noticed some glaring problems. I count five "<head>" containers and two "<HEAD>" containers. One is sufficient. I count four "<body>" containers. One is sufficient. You're lucky that most browsers ignore the extras. I found text-level containers like "<font>" surrounding block-level elements like "<h2>". I am baffled to see that one-celled tables are being used at all, when "<div>" would do the job in less code.
I also noticed the lack of proper punctuation in a few of the "<font>" tags. To quote the HTML 4.01 spec:
In certain cases, authors may specify the value of an attribute without any quotation marks. The attribute value may only contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45), periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons (ASCII decimal 58). We recommend using quotation marks even when it is possible to eliminate them.
The typeface lists are comma-delimited, which means the quotes are required.
This kind of coding invites browser-specific disaster, which is extremely shortsighted considering the increasing diversification of devices with which people are accessing web sites. I encourage you to put more effort into creating valid HTML with fewer assumptions about the size of the display so that the Sun Times will be available to the widest possible audience.
Have a nice day!
Posted by ventura at March 16, 2003 06:12 PM