Layout of self-closing divs - can anyone explain this?

[Jeff Dege]

I'm trying to lay out some divs that have content inserted via
javascript. Just because it's cleaner, I've been using self-closing div
elements: "<div />"

And I've been having the hardest time getting things to lay out cleanly.

What I've discovered makes no sense.

Consider the following bit of html:

<div id="first">
<div id="second">
<div id="third">
</div>
</div>
</div

And add CSS for these three IDs:

#first {
position:relative;
top:0px; left: 0px;
width:256px; height: 256px;
background-color:gray;
z-index:0;
}
#second {
position:absolute;
top:32px; left: 32px;
width:128px; height: 128px;
background-color:yellow;
z-index:1;
}
#third {
position:absolute;
bottom: 16px; right: 16px;
width:64px; height: 64px;
background-color:blue
z-index:2;
}

Everything draws exactly as you'd expect, a gray box with a yellow box
inside it, offset from the top left, and a blue box inside the yellow
box, offset from the bottom right.

Now try a second, slightly different, bit of html:

<div id="first">
<div id="second">
</div>
<div id="third">
</div>
</div

Because the third div is no longer contained within the second div, the
blue box now draws offset from the bottom right of the outer gray box.
Which is again, exactly as we'd expect.

Now try a third bit of html:

<div id="first">
<div id="second" />
<div id="third" />
</div

I'd expect this to draw exactly the same as the second example, above.
We've made no substantive changes from it. Instead, it draws the same as
the first - as if the third div is nested within the second div. Which
it isn't, according to everything I thought I understood about how SGML
parsing worked.

But I've tried this in EI6, and I've tried it in Firefox 2.0, and both
render this the same way. I've looked at it in Firefox's DOM Inspector,
and according to that, the third div _is_ being parsed as being contained
with the second div.

Does this make any sense at all?

Can anyone explain to me why this works this way?

 

[David Dorward]

Now try a third bit of html:

<div id="first">
<div id="second" />
<div id="third" />
</div

I'd expect this to draw exactly the same as the second example, above.
We've made no substantive changes from it. Instead, it draws the same as
the first - as if the third div is nested within the second div. Which
it isn't, according to everything I thought I understood about how SGML
parsing worked.

In HTML <div /> means the same as <div>&gt;.

I believe SGML can cause it to mean the same as <div></div> (and that
is the case for XML), but the declaration for HTML isn't set up that
way.

Additionally, browsers use tag soup slurpers and not real SGML
parsers, so <div /> actually gets treated as <div>.

You've basically got two missing end tags in that last example.

 

[Ben C]

In HTML <div /> means the same as <div>&gt;.

I believe SGML can cause it to mean the same as <div></div> (and that
is the case for XML), but the declaration for HTML isn't set up that
way.

That is the case for XML, but not I think for SGML. It means something
else entirely in SGML but I don't believe that bit of SGML syntax made
it into HTML or if it did no browsers support it anyway.

Additionally, browsers use tag soup slurpers and not real SGML
parsers, so <div /> actually gets treated as <div>.

It will get treated as <div></div> if the browser realizes it's dealing
with XML. Whether it gets that from the Content-Type header or from the
doctype, I'm not sure.

 

[Jim Moe]

I'm trying to lay out some divs that have content inserted via
javascript. Just because it's cleaner, I've been using self-closing div
elements: "<div />"

That is XML syntax, not HTML. To an HTML parser "<div />" resolves to

Now try a third bit of html:

<div id="first">
<div id="second" />
<div id="third" />
</div

I'd expect this to draw exactly the same as the second example, above.
We've made no substantive changes from it. Instead, it draws the same as
the first - as if the third div is nested within the second div. Which
it isn't, according to everything I thought I understood about how SGML
parsing worked.

Can anyone explain to me why this works this way?

It is HTML, not SGML or XML. You example reduces to:

<div id="first">
<div id="second">
<div id="third"></div>

</div> <-- error recovery
</div> <-- error recovery

with error recovery to handle the unclosed <div>s.

 

[Jeff Dege]

That is XML syntax, not HTML. To an HTML parser "<div />" resolves to
"<div>".
Run the code through a validator.

I'd figured that since every time I type "<br>" into my editor, it
changes it to "<br />", that HTML 4+ had incorporated self-closing
elements.

So off I go to the W3C validator.

Turns out that "<br />" is legal in both html 4.01 and in xhtml 1.0, but
that "<div />" is legal in xhtml 1.0, but illegal in html 4.01.

Which makes no sense to me whatsoever. The parsing of element tags and
element closings should not be dependent upon which element we're talking
about. But that's what I'm seeing.

And now I'm more confused than before, because the document I was having
trouble with had an xhtml 1.0 DOCTYPE - which means that self-closing
div's should have been correct code.

But both IE6 and Firefox 2.0 proceeded to treat the page as if they
weren't.

--
The most dangerous man, to any government, is the man who is able to think
things out for himself without regard to the prevailing superstitions
and taboos. Almost inevitably he comes to the conclusion that the
government he lives under is dishonest, insane and intolerable, and so,
if he is romantic, he tries to change it. And even if he is not romantic
personally he is apt to spread discontent among those who are.
- H.L. Mencken

 

[Chris F.A. Johnson]

I'd figured that since every time I type "<br>" into my editor, it
changes it to "<br />", that HTML 4+ had incorporated self-closing
elements.

So off I go to the W3C validator.

Turns out that "<br />" is legal in both html 4.01 and in xhtml 1.0, but
that "<div />" is legal in xhtml 1.0, but illegal in html 4.01.

Which makes no sense to me whatsoever. The parsing of element tags and
element closings should not be dependent upon which element we're talking
about. But that's what I'm seeing.

And now I'm more confused than before, because the document I was having
trouble with had an xhtml 1.0 DOCTYPE - which means that self-closing
div's should have been correct code.

But both IE6 and Firefox 2.0 proceeded to treat the page as if they
weren't.

Save yourself some trouble, and use HTML 4.01 strict.

 

[Sherm Pendley]

Turns out that "<br />" is legal in both html 4.01 and in xhtml 1.0

That's not legal in HTML, just XHTML. A browser will probably just ignore
the / and interpret it as <br>, which doesn't have a closing tag, so the
error correction will usually do what you intended. But that's a far cry
from it being "legal in HTML."

, but
that "<div />" is legal in xhtml 1.0, but illegal in html 4.01.

It's legal in XHTML. Your page is being parsed as HTML.

And now I'm more confused than before, because the document I was having
trouble with had an xhtml 1.0 DOCTYPE - which means that self-closing
div's should have been correct code.

But both IE6 and Firefox 2.0 proceeded to treat the page as if they
weren't.

Of course they do. That's what serving XHTML as text/html does; it causes
browsers to use their HTML parsers, treating your content as broken HTML
rather than XHTML.

How do I know you're serving it as text/html? Easy - if you were serving
it with the correct text/xhtml+xml, IE wouldn't be parsing it at all.

This is why many of the regulars here view XHTML as interesting in theory,
but impractical in practice. You can only get IE to parse it by lying about
the content-type, but if you do that, your page will be parsed using HTML
rules. That being the case, you're better off just serving HTML.

sherm--

 

[David Dorward]

That is the case for XML, but not I think for SGML.

As I said - it depends on the SGML declaration.

It means something
else entirely in SGML but I don't believe that bit of SGML syntax made
it into HTML or if it did no browsers support it anyway.

Emacs-W3 did. I believe it was crippled after the travesty that was
XHTML 1.0 Appendix C.

It will get treated as <div></div>

Any end tags inserted by error recovery will depend on what follows
the tag, and end tag won't be implied soley by the presence of a tag
in that style.

if the browser realizes it's dealing with XML.

Which it presumably isn't. The OP implied he was dealing with HTML.

Whether it gets that from the Content-Type header or from the doctype, I'm not sure.

I'm not aware of any user agent, except the W3C Markup Validator, that
switches parser depending on factors other then the Content-Type.

 

[David Dorward]

So off I go to the W3C validator.

Turns out that "<br />" is legal in both html 4.01 and in xhtml 1.0, but
that "<div />" is legal in xhtml 1.0, but illegal in html 4.01.

In HTML, <br /> means "A br start tag followed by a greater than
sign". Since the end tag for br elements is forbidden (since the
element is empty and can never have any content), this is fine. <div /

means "A div start tag followed by a greater than sign". Since the

end tag for div elements is required, this is not fine. Additionally
most browsers don't support the / syntax for ending a tag in HTML and
an appendix of the spec warns against using it.

And now I'm more confused than before, because the document I was having
trouble with had an xhtml 1.0 DOCTYPE - which means that self-closing
div's should have been correct code.

Welcome to the wonderful world of trying to write XHTML that works in
the real world. A few user agents considered important by many (such
as Internet Explorer and GoogleBot) don't support XHTML, so you can't
serve your XHTML as application/xhtml+xml if you want it to work. If
you want it to 'work' in such browsers you have to pretend it is HTML
by claiming a content-type of text/html. Depending on how you read the
specs and what you make of statements by the old HTML working group
you can come to conclusions ranging from "You must follow the
guidelines set forth in Appendix C" to "Well, you should follow some
of the guidelines in Appendix C because stuff will break horribly if
you don't, but some you can ignore" to, my personal favorite "XHTML
served as text/html is relatively hard and extremely pointless, stick
to HTML 4.01 until you need XHTML more then you need MSIE support".
(One of the guidelines covers when you should and shouldn't use the

But both IE6 and Firefox 2.0 proceeded to treat the page as if they
weren't.

Because they are treating it as HTML not XHTML since that is what the
Content-Type claims.

 

[Jim Moe]

I'd figured that since every time I type "<br>" into my editor, it
changes it to "<br />", that HTML 4+ had incorporated self-closing
elements.

What editor are you using that is so helpful?

 

[Jeff Dege]

What editor are you using that is so helpful?

Microsoft's, of course. Visual Studio.

(There are times where I really miss editing html in vi.)

--
Of all the dogs I have known the terrier has the best memory for friends.
Even casual friends are not forgotten if once accepted. As for the
master, what can exceed the patience and fidelity of the terrier if
once his heart is given; and if he is a little jealous and exclusive,
after all that is not peculiar to dogs.
-T.F. Dale