IE8 & FF XHTML error or badly formed span?

Question

I recently have found a strange occurrence in IE8 & FF.

The designers where using js to dynamically create some span tags for layout (they were placing rounded corner graphics on some tabs). Now the xhtml, in js, looked like this: <span class=”leftcorner” /><span class=”rightcorner” /> and worked perfectly!

As we all know dynamically rendering elements in js can be quite processor intensive so I moved the elements from js into the page source, exactly as above.

... and it didn’t work... not only didn’t it work, it crashes IE8.The fix was simple, put the close span in ie: <span class=”leftcorner”></span>

I am a bit confused by this. Firstly as far as I am aware <span class=”leftcorner” /> is perfectly valid XHTML! Secondly it works dynamically, but not in XHTML?!?!?

Can anyone shed any light on this or is it simply another odd occurrence of browsers?

Answer 1

The major browsers only support a small subset of self-closing tags. (See this answer for a complete list.)

Depending on how you were creating the elements in JS, the JavaScript engine probably created a valid element to place in the DOM.

Answer 2

I had similar problem with a tags in IE.

The problem was my links looked like that (it was an icon set with the css, so I didn't need the text in it:

<a href="link" class="icon edit" />

Unfortunately in IE these links were not displayed at all. They have to be in

<a href="link class="icon edit">&nbsp;</a>

format (leaving empty text didn't work as well so I put   there). So what I did is I add an few extra JS lines to fix it as I didn't want to change all my HTML just for this browser (ps. I'm using jQuery for my JS).

if ($.browser.msie) {
    $('a.icon').html('&nbsp');
}

Answer 3

See I think that one of the answers to http://stackoverflow.com/questions/348736 will answer your question.

Answer 4

IE in particular does not support XHTML. That is, it will never apply proper XML parsing rules to a document - it will treat it as HTML even with proper DOCTYPE and all. XHTML is not always valid SGML, however. In some cases (such as <br/>) IE can figure it out because it's prepared to parse tagsoup, and not just valid SGML. However, in other cases, the same "tagsoup" behavior means that it won't treat /> as self-closing tag terminator.

In general, my advice is to just use HTML 4.01 Strict. That way you know exactly what to expect. And there's little point in feeding XHTML to browsers when they're treating it as HTML anyway...

Answer 5

XHTML is only XHTML if it is served as application/xhtml+xml — otherwise, at least as far as browsers are concerned, it is HTML and treated as tag soup.

As a result, <span /> means "A span start tag" and not "A complete span element". (Technically it should mean "A span start tag and a greater than sign", but that is another story).

The XHTML spec tells you what you need to do to get your XHTML to parse as HTML.

One of the rules is "For non-empty elements, end tags are required". The list of elements includes a quick reference to which are empty and which are not.