...

View Full Version : Scary behaviour of divs!



MrPea
12-01-2008, 02:07 PM
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

jcdevelopment
12-01-2008, 03:04 PM
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!

AmmO
12-01-2008, 03:30 PM
something like notepad++ really helps because when you highlight a tag it shows where the close tag is, really helps on probs like this

drhowarddrfine
12-01-2008, 04:20 PM
The validator will show the problem.

MrPea
12-01-2008, 04:31 PM
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).

http://www.postimage.org/Pq2l3qJS-5093244bd4890b580515e3a4764a5efc.jpg

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>

abduraooft
12-01-2008, 04:36 PM
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.

MrPea
12-01-2008, 04:44 PM
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.

Excavator
12-01-2008, 04:48 PM
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:
<img src="myimage.gif" alt="My Image" width="400" height="300" />

jcdevelopment
12-01-2008, 04:49 PM
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


<div> </div>

Other than that i dont see why it would be processing them that way.

MrPea
12-01-2008, 04:57 PM
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!

jcdevelopment
12-01-2008, 05:00 PM
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..

MrPea
12-01-2008, 05:08 PM
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.

Excavator
12-01-2008, 06:23 PM
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. (http://www.freewebmasterhelp.com/tutorials/xhtml/2)

Apostropartheid
12-01-2008, 07:36 PM
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.

drhowarddrfine
12-01-2008, 09:02 PM
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.

abduraooft
12-02-2008, 07:01 AM
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


<div> </div>

Other than that i dont see why it would be processing them that way.
Oh.. I got that post by Arbitrator after a long search. Have a look at http://www.codingforums.com/showpost.php?p=685810

jcdevelopment
12-02-2008, 04:03 PM
Oh.. I got that post by Arbitrator after a long search. Have a look at http://www.codingforums.com/showpost.php?p=685810

Couldnt have said it any better.... I guess in a dumbed down explanation you could basically say..

Some tags can have content placed inside of them, and some can't for obvious reasons.

There is no

<br>Walking in the park</br>

That doesnt make much sense..

But


<h1>Walking in the Park</h1>

that does. I think it just keeps a standard when it comes to proper Xhtml.

MrPea
12-03-2008, 09:31 AM
Ah ha! An answer - that's what I was after. So basically - for tags that aren't supposed to have innerHtml, then you can use < /> notation, and for tags where it is supposed to have innerHtml, you have to use<> < /> and can't use the short form. That makes sense!!

(I shant mention <p />, it'll cause arguments)

jcdevelopment
12-03-2008, 02:47 PM
(I shant mention <p />, it'll cause arguments)

Well, you may have caused one any ways. What do you mean by that? That is the closing tag of a paragraph. Proper XHTML states that there must be an open and closed P tag.

Am I misunderstanding this? :confused:

Apostropartheid
12-03-2008, 07:58 PM
Well, you may have caused one any ways. What do you mean by that? That is the closing tag of a paragraph. Proper XHTML states that there must be an open and closed P tag.

Am I misunderstanding this? :confused:
No. This is a method of shorthand which is valid (http://validator.w3.org/check). However, in HTML, you must have the closing tag. In browsers parsing your XHTML as text/html (vanilla HTML) rather than application/xml (XML) or application/xhtml+xml (XHTML), this will cause problems.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum