Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Scary behaviour of divs!

    Hello!!

    So I just came across this and I don't quite understand:

    <div></div>
    <div></div>

    - this is output in the dom exactly as seen

    <div />
    <div />

    - it output in the dom like this:

    <div>
    <div></div>
    </div>

    Why on earth is this!?!?

    P

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    I had a similiar problem once, make sure that you don't have any open tags anywhere. I thought i didn't but i forgot to close a div tag about 18 lines of code up. Just a suggestion!

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    something like notepad++ really helps because when you highlight a tag it shows where the close tag is, really helps on probs like this

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    The validator will show the problem.

  • #5
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think you've missed what I meant sorry. I've attached a screenshot of the output and the dom output for the following HTML page. My thinking is that it shouldn't look like this (ie, the 2 divs shouldn't be nested).



    The actual HTML I provided was this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>Simple Scary Divs Page</title>
    </head>
    <body>
    <div style="border: solid 1px #000; margin: 5px;" />
    <div style="border: solid 1px #000; margin: 5px;" />
    </body>
    </html>

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    A div is not supposed to be an empty tag(with a self close like meta,link etc). This might be the reason for browsers behavior.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well actually, I think I disagree. Occasionally a div can be an empty tag - if you intend on dynamically filling it later with something like javascript - sort of like a placeholder. In that case, why would I not write <div />? And why would it be nesting them anyway? It happens with span's as well.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello MrPea,
    A div needs closed with </div>. When you close yours with /> the browsers, and the validator, parse the two as nested.

    That /> belongs in a tag like <br /> or <img /> ... here would be the img line with attributes:
    Code:
    <img src="myimage.gif" alt="My Image" width="400" height="300" />
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Quote Originally Posted by abduraooft View Post
    A div is not supposed to be an empty tag(with a self close like meta,link etc). This might be the reason for browsers behavior.
    I would have to agree with abduraooft on this. I know you might want to use it a place holder but some browser will just close an empty div. You may need to adjust your code so that you can use code such as

    Code:
    <div> </div>
    Other than that i dont see why it would be processing them that way.

  • #10
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know, I'm happy to change what we're writing (and already have), I'm just interested in why this is actually happen. I'd understand if it was a weird IE thing, but it's also FF and Chrome, which makes me think it's the way html parsing is supposed to happen....but whyy, it has, in my mind, technically got a closing tag on it if you write it like <div />. So somewhere out there has invented a rule for one, but not for all tags. That's insane!

  • #11
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Quote Originally Posted by MrPea View Post
    I know, I'm happy to change what we're writing (and already have), I'm just interested in why this is actually happen. I'd understand if it was a weird IE thing, but it's also FF and Chrome, which makes me think it's the way html parsing is supposed to happen....but whyy, it has, in my mind, technically got a closing tag on it if you write it like <div />. So somewhere out there has invented a rule for one, but not for all tags. That's insane!
    Alot of things are insane, unfortunately we have to adjust to make good. Until all browser's live in holy happy harmony (cough... IE) we have to adjust everything. Sorry we couldnt help more but it may be the best to close them..

  • #12
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes I'm aware I need to close them, I knew that before I started the thread. What I reeeeally wanted to know, is why. Somewhere someone knows why HTML has been written in a way that means /> doesn't work for divs or spans and I'd really like to find out why this was made the case. If this was just an IE quirk then I'd let it go, but it's not - it's all browsers, which means it's a conscious decision by someone to parse HTML in that way.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I'll just quote the page I found, maybe this explains it? -
    Closing Tags

    The previous two changes to HTML should not be a particular problem to you if your HTML code is already well formed. The final change to HTML tags probably will require quite a lot of changes to your HTML documents to make them XHTML compliant.

    All tags in XHTML must be closed. Most tags in HTML are already closed (for example <p></p>, <font></font>, <b></b>) but there are several which are standalone tags which do not get closed. The main three are:

    <br>
    <img>
    <hr>

    There are two ways in which you can deal with the change in specification. The first way is quite obvious if you know HTML. You can just add a closing tag to each one, e.g.

    <br></br>
    <img></img>
    <hr></hr>

    Although you must be careful that you do not accidentally place anything between the opening and closing tags as this would be incorrect coding. The second way is slightly different but will be familiar to anyone who has written WML. You can include the closing in the actual tag:

    <br />
    <img />
    <hr />

    This is probably the best way to close your tags, as it is the recommended way by the W3C who set the XHTML standard. You should notice that, in these examples, there is a space before the />. This is not actually necessary in the XHTML specification (you could have <br/>) but the reason why I have included it is that, as well as being correct XHTML, it will also make the tag compatible with past browsers. As every other XHTML change is backwards compatible, it would not be very good to have a simple missed out space causing problems with site compatibility.

    In case you are wonder
    ing how the <img> tag works if it has all the normal attributes included, here is an example:

    <img src="myimage.gif" alt="My Image" width="400" height="300" />

    Again, notice the space before the />
    And here's the link.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I assume this is because you haven't forced XML rendering, so Firefox falls back to the old SGML/HTML parsing methods, where self-closing tags aren't supported.

    Empty elements in original HTML are standalone elements with no closing tags: there is no such thing as a self-closing element. /> is really just shorthand for a closing tag, which are always required in XML. SGML had other ways of doing this: <span>miaow</> is technically valid but unsupported.
    Last edited by Apostropartheid; 12-01-2008 at 10:17 PM.

  • #15
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Well, yes, the closing tag is a requirement of the HTML standard and the other 'self closing' tags are all specified in the docs. This all falls back to the original SGML and how it works but it's been so long since I've read about it that I don't recall why some do and some don't.

    In any case, there is no such thing as <dv /> so that's the end of that. Besides, your XHTML only gets interpreted as HTML anyway since you don't serve XHTML.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •