HTML differences between browsers

Question

Do you know of any differences in handling HTML tags/properties in different browsers? For example, I once saw a page with a input tag with a maxlength field set to "2o". Firefox and Opera ignore the "o", and set the max length to 2, while Internet Explorer ignores the field altogether. Do you know of any more?

(Note: seeing as this will probably be a list, it would be great if the general name of the difference was in bold text, like: Different erratic value handling in tag properties)

Answer 1

Check out http://www.quirksmode.org/

Answer 2

If you are programming in javascript the best advice I can give is to use a javascript library instead of trying to roll your own. The libraries are well tested, and the corner cases are more likely to have been encountered.

Scriptalicious - http://script.aculo.us/
jQuery - http://jquery.com/
Microsoft AJAX - http://www.asp.net/ajax/
Dojo - http://dojotoolkit.org/
Prototype - http://www.prototypejs.org/
YUI - http://developer.yahoo.com/yui/

Answer 3

The one that really annoys me is IE's broken document.getElementById javascript function - in most browsers this will give you something that has the id you specify, IE is happy to give you something that has the value in the name attribute, even if there is something later in the document with the id you asked for.

Answer 4

Bug Lists

Web developers have already compiled some pretty comprehensive lists; I think it's better to compile a list of resources than to duplicate those lists.

• http://www.positioniseverything.net/
• http://www.richinstyle.com/bugs/table.html
• http://www.quirksmode.org/ (as mentioned by Kristopher Johnson)

Javascript

I agree with Craig - it's best to program Javascript using a library that handles differences between browsers (as well as simplify things like namespacing, AJAX event handling, and context). Here's the jump to Craig's answer (on this page).

CSS Resets

CSS Resets can really simplify web development. They override settings which vary slightly between browsers to give you a more common starting point. I like Yahoo's YUI Reset CSS.

Answer 5

Do you know of any differences in handling HTML tags/properties in different browsers

Is this question asking for information on all differences, including DOM and CSS? Bit of a big topic. I thought the OP was asking about HTML behaviour specifically, not all this other stuff...

Answer 6

I am asking about HTML behavior specifically, not Javascript or CSS or rendering differences. HTML only. Like the example I've given.

Answer 7

I once saw a page with a input tag with a maxlength field set to "2o".

In this specific case, you're talking about invalid code. The maxlength attribute can't contain letters, only numbers.

What browsers do with invalid code varies a great deal, as you can see for yourself.

If you're really asking "what do all the different browsers do when faced with HTML code that, for any one of an infinite number of reasons, is broken?", that way lies madness.

We can reduce the problem space a great deal by using valid code.

So, use valid HTML. Then you are left with two main problem areas:

• browser bugs -- how the browser follows the HTML standard and what it does wrong
• differences in browser defaults, like the amount of padding/margin it gives to the body

Answer 8

Inconsistent parsing of XHTML in HTML mode

HTML parsers are not designed to handle XML.

If an XHTML document is served as "text/html“ and the compatibilities guidelines are not followed you can get unexpected results.

Empty tags is one possible source of problems. <tag/> and <tag></tag> are equivalent in XML. However the HTML parser can interpret them in two ways.

For instance Opera and IE treat <br></br> as two <br> but Firefox and WebKit treat <br></br> as one <br>.