If it is XHTML 1.0 Strict, if I use <div style="width:300px;height:200px;background:#ffc"></div> or <div style="width:300px;height:200px;background:#ffc" /> they both validate well (pass W3C validation), but the top one is self contained 300 x 200 div, while the second one seems to include the content below the "div" line... so it seems that the div actually didn't close yet. So 1) can we close the div that way actually? 2) if both of them validate 100%, why will they give different results when rendered as a webpage? Thanks very much.
I don't see the problem you mention at all. Which browser? Also, an empty div does not make sense. It's purpose is to contain other elements. The W3C says: Since you aren't serving it as XHTML, that might be the cause of your problems, depending on the browser. IE, for example, does not handle XHTML at all. Firefox, otoh, displayed your example properly.
hm, it seems that if i name the file "file.html", then none of IE 7, FF 3, or Chrome handles it as XHTML. if the file is renamed "file.xhtml", then all of IE 7, FF 3, and Chrome will take <div /> as a closing one. so it is weird that 1) DOCTYPE doesn't matter 2) people usually say IE doesn't handle XHTML, but it actually renders <div /> as a closing div. 3) in my case, IE 7, FF 3, and Chrome either all display it one way or the other. There was no case where they differ... Dr Howard above actually see them being different.
No, I said FF handles it properly. <div /> is invalid HTML. The doctype doesn't matter. It's all HTML to the browser since you aren't serving it as XHTML. And, yes, it's true. IE has never been able to render XHTML and it never will. Only modern browsers can do that.
<div /> shouldn't validate, div tags require both a starting and closing tag (if they didn't then where would you put what is inside the div?)
just wonder, if IE 7 doesn't render XHTML, then why would it render <div style="width:300px;height:200px;background:#ffc" /> <div>hello world</div> correctly like on FF 3 and Chrome? on all 3 browsers, they all close the div first, and render the hello world outside of the 300x200 region. If IE 7 doesn't render XHTML, then shouldn't the hello world go inside the 300x200 region? (since IE 7 won't think that the first div is closing).
But they don't. Firebug shows it actually encloses the second div with the first. I can't think of why it does it that way. Opera does the same. In any case, all the browsers look at it as HTML and do the best they can with it. In order to be taken as XHTML, the document must be served as application/xml+xhtml in the http header from the server. Link Here is an example of a real XHTML page. View it in any browser. Then try it in IE.
that's really strange... i was able to make IE 7 display a file named file.xhtml and it rendered <div style="width:300px;height:200px;background:#ffc" /> as a self closing div... stranage... seems like today i try it, it always asked to save the file to hard disk.
That I expect. Since IE doesn't know what xhtml is, it doesn't know what to do with it, so it thinks you want to download some file.
It's possible the browser is processing the "self closing" div element as an XML tag, and then styling it appropriately, but it is definitely not valid. Come on, does the extra six characters hurt your fingers? You might find this discussion on Jyte interesting: jyte.com/cl/the-self-closing-tag-syntax-is-not-valid-for-all-xhtml-elements
You should only be using the /> for tags that necessarily don't have an ending such as the img or a or break. I wouldn't use them for divs at all.