SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    XHTML <div /> and <div></div> both validate well, but give different results

    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&#37;, why will they give different results when rendered as a webpage? Thanks very much.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,598
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Are you actually serving it as XHTML or is it getting served as HTML? If the latter then the second version is incorrect and will produce the result you say you are getting. Served properly as XHTML the two are identical and so will produce identical results.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, does it matter if i name the file as "test.html"?

    i am including this at the top of the file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    so i thought they will be taken as XHTML 1.0 Strict no matter what the modern browser is? ( i am using IE 7, FF 3, and Chrome)

  4. #4
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's weird. it seems that no matter what doctype i give it, if i name the file as file.html, then it is not rendered on IE 7, FF 3, Chrome as XHTML. I must rename it to file.xhtml so that it is rendered so...

    what if the file is file.php? do I actually have to use header( ) to set the proper file type? Simply DOCTYPE won't do huh? Many thanks.

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    To render XHTML correctly it requires more than a doctype, you are required to define the MIME type and as HTML files are automatically assigned to HTML (text/html) rather than XHTML (application/xhtml-xml) you will be required to use PHP headers to declare the MIME type to browsers that support it. Be warned: Internet Explorer does not support XHTML and will not work with it.

  6. #6
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Be warned: Internet Explorer does not support XHTML and will not work with it.
    wait wait wait... if i do rename the file to "file.xhtml", then it renders properly on all IE 7, FF 3, and Chrome, so seems like IE does support XHTML?

  7. #7
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one more thing that is weird is that, if i use FF3 to look at "Page Info" of the "file.xhtml" page, then i see the Type as "application/xhtml+xml"

    but when i look at a facebook page, which is also XHTML 1.0 Strict and it renders <div /> correctly, and use FF 3 to look at the "Page Info", the Type is shown as "text/html".

  8. #8
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As stated above, you are NOT serving it as XHTML just because you use the doctype. Page View in FF shows what the doctype is but not what it is being served as.

    IE does NOT handle XHTML and there are no plans for it to do so.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,598
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    The mime type of application/xhtml+xml is what defines a page as being XHTML, the presence or absence of a doctype makes no difference as that isn't a part of the XHTML in any case. Both HTML and XHTML start with an <html> tag and end with a </html> tag. In the case of XHTML you also need to use the xmlns attribute to define the namespace.

    When you serve a page with that mime type IE will offer the file for download so you will need to use any browser except IE in order to view an XHTML page. IE can only display HTML and XML pages.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  11. #11
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(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.

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by winterheat View Post
    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).
    I think you are having problems understanding exactly what XHTML is because you are clearly not serving the document correctly otherwise it would not render at all through Internet Explorer.

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,598
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by winterheat View Post
    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.
    Perhaps you gave it to IE7 as HTML instead of as XHTML and IE7 worked out the right place to insert the missing </div> tag.

    Also XHTML doesn't need that space before the />when you are specifying that a tag is self closing. That is only needed for some browsers when you serve it as HTML so the browser doesn't try to treat the / as part of the preceding attribute.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by winterheat View Post
    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?
    I tried this in IE7. With a .html suffix it rendered as expected, i.e., the text inside the yellow box.

    With a .xhtml suffix it asked whether I wanted to download the file.

    With a .xml suffix it gave me an error message:
    The server did not understand the request, or the request was invalid.
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
    Without the doctype declaration it showed the DOM tree.

    Opera handled all three cases correctly, of course.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

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