I Hate Browser Bugs

I'm terribly naïve.

I wrote my own blogging software for this site (which you've surely noticed is still very much a work in progress) and I decided to do the Right Thing™ by being standards-compliant. In the process, I've so far found four problems in web browsers (IE 6.0 and Opera 7.11) that frustrate my efforts.

I'm using HTML 4.01 (Dec. 1999) and CSS level 1 (Jan. 1999), which are old enough that they should be supported without problems. Tee-hee, aren't I cute?

(I use the DTD to declare I'm using HTML 4.01, so there should be no ambiguity to the browser. I don't know how to specify what CSS version is being used.)

1. Quoting

IE 6.0 does not process the <Q> element, defined in §9.2.2 of the HTML 4.01 spec, which says the following:

Visual user agents must ensure that the content of the Q element is rendered with delimiting quotation marks. Authors should not put quotation marks at the beginning and end of the content of a Q element. [Emphasis added] [source]

So when I do the following: Thomas Jefferson said, To compel a man to furnish contributions of money for the propagation of opinions which he disbelieves and abhors, is sinful and tyrannical, people reading in IE 6.0 don't see the quotation marks and will be confused where the quotation begins and ends.

Sigh... what can I do about that?

2. Line breaks

Opera 7.11 doesn't handle line breaks properly, as defined in §B.3.1 of the HTML 4.01 spec, which says the following:

... a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception. [Emphasis added] [source]

So if you're reading in Opera 7.11, the following text renders with extra whitespace that's very annoying: Once upon a time , the boy said , It was a dark and stormy night .

I currently work around this by being very careful how I write my source documents, so when they're converted into HTML by my scripts they won't turn out so ugly.

3. PNG support

IE 6.0 doesn't support PNG files correctly.

The most obvious problem is that the gamma correction is wrong — my images look significantly darker in IE than in other browsers. I recently changed the image behind the text you're currently reading, because on IE it was so dark it obscured the text.

IE 6.0 also doesn't support gradual transparency correctly. If you look at the brownish border around each article in IE 6.0 (especially the corners), you see grey. You're supposed to see gradual transparency, with the brown gently fading into the water that comprises the page background. Opera and Netscape do this correctly.

4. Centering

Opera 7.11 doesn't handle centering in CSS1 correctly, as described in §4.1.2 of the CSS1 spec, which says the following:

Otherwise, if both 'margin-left' and 'margin-right' are 'auto', they will be set to equal values. This will center the element inside its parent. [source]

The following text should be centered:

For text it isn't a big problem, because the text-align property can be used — but for centering images, that's the only spec-sanctioned way I've found. My workaround is to place the image within a paragraph that uses its text-align property.

I haven't reported this one to the Opera people yet, but I'll get around to it eventually. If these browser bugs hadn't sucked away my will to live, I'd have done it already.

UPDATE 2003-10-04 22:55:44 UTC: This bug was my own fault.