Why does using a self-closing tag have such an outstanding and bizarre effect in this situation?

Question

Possible duplicate:
Is it possible to close an interval using <span />?

<p>This is a test <span id='span1' style='display:inline-block;'></span> to see if I can embed an inline block.</p> <p>This is a test <span id='span2' style='display:inline-block;'/> to see if I can embed an inline block.</p>​ 

http://jsfiddle.net/T7ByE/

The first line includes a span with a regular closing tag, and the second uses a self-closing tag. The first line works correctly, and the second has a strange result.

I'm just wondering why there is such a difference in the processing of an element in each case. I know that with non-line xhtml, self-closing tags are not well supported. Apparently, a self-closing tag is considered as an open tag.

Is there a good reason modern browsers still don't support self-closing html tags? Should I change the type of document or something to make it work?

The irony is that I actually started with an explicit closing tag, but passed it through the browser xml parser and back to html, and the parser felt like it was dumping an empty element into a self-closing tag that quickly broke everything.

Answer 1

Web browsers have DOM inspectors that show us the structure of the resulting DOM tree. For example, in Firebug:

As you can see, Firefox does not recognize a self-closing tag, but instead treats it as a start tag. Firefox automatically closes this SPAN element when it reaches the end of the paragraph, which means that the SPAN will contain the remaining paragraph text.

Now, since you are inserting a DIV element into a SPAN element, the DIV will be laid out below the text content of this SPAN element. This is because the DIV element is a block level element. Block-level elements that appear after text content are laid out below that text content.

Answer 2

Is there a good reason modern browsers still don't support self-closing html tags?

Backward compatibility.

Did I expect to change doctype or something to make it work?

You want to use XML, you need to send the document in XML format ( application/xhtml+xml , to be specific). This is mainly due to the MIME type, not the doctype type. Of course, there is no way to make it work in IE <9 .

Answer 3

When you include a tag as span yourself, as far as I can imagine ***, you don’t actually close it - these tags do not have this ability. What you are actually doing leaves it open. And when you leave things open, the browser gets freedom and closes them yourself, usually at the end of its parent closing tag.

So, in your example, in case nº2, you get a built-in block that goes all the way to the end of the element p. Now inside this inline block you add a block level element. Well, this time and again ... by placing the block inside the built-in (built-in) block, the browser uses one more of its freedom and (basically) puts all the contents surrounding the block element, as many elements of the block block as it needs before (1 or 2 - no more).

In your case, you get one “anonymous” block around the text preceding the inserted div (“to see if I can inline the inline block”).

Since the blocks are stacked vertically, this is not surprising, then the look you get in the second paragraph.

See color fiddle: jsfiddle.net/T7ByE/1/ (not clickable) to see it better.

Relevant Links
display: block inside display: built-in

*** it kind'a seems that depending on your content spaces may actually be closed *