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

am 03.08.2007 17:30:47 von 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: "

"

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:

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:

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:

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?

--
There are three kinds of men. The one that learns by reading. The few
who learn by observation. The rest of them have to pee on the electric
fence for themselves.
- Will Rogers

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

am 03.08.2007 17:37:39 von dorward

On Aug 3, 4:30 pm, Jeff Dege wrote:
> Now try a third bit of html:
>
>

> >
> 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

means the same as

>.

I believe SGML can cause it to mean the same as

(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

actually gets treated as

.

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

--
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/

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

am 03.08.2007 19:04:54 von Ben C

On 2007-08-03, David Dorward wrote:
> On Aug 3, 4:30 pm, Jeff Dege wrote:
>> Now try a third bit of html:
>>
>>

>> >>
>> 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

means the same as

>.
>
> I believe SGML can cause it to mean the same as

(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

actually gets treated as

.

It will get treated as

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.

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

am 03.08.2007 19:54:53 von jmm-list-gn

Jeff Dege wrote:
> 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: "

"
>
That is XML syntax, not HTML. To an HTML parser "

" resolves to
"

".
Run the code through a validator.
>
> Now try a third bit of html:
>
>

<-- error recovery

<-- error recovery

with error recovery to handle the unclosed

s.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

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

am 03.08.2007 22:28:47 von Jeff Dege

On Fri, 03 Aug 2007 10:54:53 -0700, Jim Moe wrote:

> Jeff Dege wrote:
>> 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: "

"
>>
> That is XML syntax, not HTML. To an HTML parser "

" resolves to
> "

".
> Run the code through a validator.

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

So off I go to the W3C validator.

Turns out that "
" is legal in both html 4.01 and in xhtml 1.0, but
that "

" 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

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

am 03.08.2007 23:29:47 von cfajohnson

On 2007-08-03, Jeff Dege wrote:
> On Fri, 03 Aug 2007 10:54:53 -0700, Jim Moe wrote:
>
>> Jeff Dege wrote:
>>> 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: "

"
>>>
>> That is XML syntax, not HTML. To an HTML parser "

" resolves to
>> "

".
>> Run the code through a validator.
>
> I'd figured that since every time I type "
" into my editor, it
> changes it to "
", that HTML 4+ had incorporated self-closing
> elements.
>
> So off I go to the W3C validator.
>
> Turns out that "
" is legal in both html 4.01 and in xhtml 1.0, but
> that "

" 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.

is an empty tag;

isn't (or shouldn't be).

> 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.

--
Chris F.A. Johnson
============================================================ =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

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

am 03.08.2007 23:42:32 von Sherm Pendley

Jeff Dege writes:

> Turns out that "
" 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
, 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 "

" 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--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net

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

am 03.08.2007 23:45:13 von dorward

On Aug 3, 6:04 pm, Ben C wrote:
> On 2007-08-03, David Dorward wrote:
> > I believe SGML can cause it to mean the same as

(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.

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.

> > Additionally, browsers use tag soup slurpers and not real SGML
> > parsers, so

actually gets treated as

.
>
> It will get treated as

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
http://dorward.me.uk/
http://blog.dorward.me.uk/

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

am 03.08.2007 23:53:43 von dorward

On Aug 3, 9:28 pm, Jeff Dege wrote:

> So off I go to the W3C validator.
>
> Turns out that "
" is legal in both html 4.01 and in xhtml 1.0, but
> that "

" is legal in xhtml 1.0, but illegal in html 4.01.

In HTML,
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.

> 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
syntax).

> 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.

--
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/

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

am 04.08.2007 01:21:00 von jmm-list-gn

Jeff Dege wrote:
>>> 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: "

"
>>>
>> That is XML syntax, not HTML. To an HTML parser "

" resolves to
>> "

".
>> Run the code through a validator.
>
> I'd figured that since every time I type "
" into my editor, it
> changes it to "
", that HTML 4+ had incorporated self-closing
> elements.
>
What editor are you using that is so helpful?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

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

am 04.08.2007 02:26:47 von Jeff Dege

On Fri, 03 Aug 2007 16:21:00 -0700, Jim Moe wrote:

> Jeff Dege wrote:
>>>> 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: "

"
>>>>
>>> That is XML syntax, not HTML. To an HTML parser "

" resolves
>>> to
>>> "

".
>>> Run the code through a validator.
>>
>> I'd figured that since every time I type "
" into my editor, it
>> changes it to "
", that HTML 4+ had incorporated self-closing
>> elements.
>>
> 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