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

Discussion in 'HTML' started by Jeff Dege, Aug 3, 2007.

  1. Jeff Dege

    Jeff Dege Guest

    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?

    --
    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
     
    Jeff Dege, Aug 3, 2007
    #1
    1. Advertising

  2. On Aug 3, 4:30 pm, Jeff Dege <> wrote:
    > 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.

    --
    David Dorward
    http://dorward.me.uk/
    http://blog.dorward.me.uk/
     
    David Dorward, Aug 3, 2007
    #2
    1. Advertising

  3. Jeff Dege

    Ben C Guest

    On 2007-08-03, David Dorward <> wrote:
    > On Aug 3, 4:30 pm, Jeff Dege <> wrote:
    >> 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.


    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.
     
    Ben C, Aug 3, 2007
    #3
  4. Jeff Dege

    Jim Moe Guest

    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: "<div />"
    >

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

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Aug 3, 2007
    #4
  5. Jeff Dege

    Jeff Dege Guest

    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: "<div />"
    >>

    > 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
     
    Jeff Dege, Aug 3, 2007
    #5
  6. 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: "<div />"
    >>>

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


    <br> is an empty tag; <div> 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 <http://cfaj.freeshell.org>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Aug 3, 2007
    #6
  7. Jeff Dege <> writes:

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

    --
    Web Hosting by West Virginians, for West Virginians: http://wv-www.net
    Cocoa programming in Perl: http://camelbones.sourceforge.net
     
    Sherm Pendley, Aug 3, 2007
    #7
  8. 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 <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.


    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 <div /> actually gets treated as <div>.

    >
    > 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
    http://dorward.me.uk/
    http://blog.dorward.me.uk/
     
    David Dorward, Aug 3, 2007
    #8
  9. On Aug 3, 9:28 pm, Jeff Dege <> wrote:

    > 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
    <foo /> 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/
     
    David Dorward, Aug 3, 2007
    #9
  10. Jeff Dege

    Jim Moe Guest

    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: "<div />"
    >>>

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

    What editor are you using that is so helpful?

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Aug 4, 2007
    #10
  11. Jeff Dege

    Jeff Dege Guest

    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: "<div />"
    >>>>
    >>> 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.
    >>

    > 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
     
    Jeff Dege, Aug 4, 2007
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ralf W. Grosse-Kunstleve
    Replies:
    16
    Views:
    595
    Lonnie Princehouse
    Jul 11, 2005
  2. Ralf W. Grosse-Kunstleve
    Replies:
    18
    Views:
    602
    Bengt Richter
    Jul 11, 2005
  3. Ralf W. Grosse-Kunstleve
    Replies:
    2
    Views:
    409
    Dan Sommers
    Jul 12, 2005
  4. falcon
    Replies:
    0
    Views:
    381
    falcon
    Jul 31, 2005
  5. Bart Kastermans
    Replies:
    6
    Views:
    409
    Bart Kastermans
    Jul 13, 2008
Loading...

Share This Page