SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot gregs's Avatar
    Join Date
    Aug 2002
    Posts
    161
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    !DOCTYPE and a blank line question

    Perusing forums, I noticed a remark:

    "Just make sure the doctype line is on the very first line of your document with no comments or white space before it to ensure proper browser rendering."

    Looking at my coding, I noticed my page has a blank line at the top, with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" on the second line.

    The reason it does that seems to be the PHP code I have been trying to learn. The HTML is placed in a PHP Function at the top and I am guessing that is causing the space.

    Will this blank line actually cause improper browser rendering? I haven't seen any ill-effect on the IE8 I use.

    Below is the top part of the code:

    PHP Code:
     
    <?php
    function renderForm($error) {
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                          "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en">
      <head>
    Another question might be, is that actually needed and correct? I have always just started my pages with <HTML>. Why all the newfangled strict and xmlns?

    I have tried looking this stuff up, but it seems people talk too technical about these things. I guess what I am saying is I need the reply to be in the simplest of forms for me to analyze and comprehend it.

    Thanks

    Edit: The blank line in the PHP box is not in my code. It was placed there on this page.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by gregs View Post
    The HTML is placed in a PHP Function at the top and I am guessing that is causing the space.

    Will this blank line actually cause improper browser rendering? I haven't seen any ill-effect on the IE8 I use.
    I don't think it's a problem, but you can get rid of the space by starting the doctype on the same line as the closing PHP tag:

    PHP Code:
    <?php
    function renderForm($error) {
    ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                          "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    I have always just started my pages with <HTML>. Why all the newfangled strict and xmlns?
    Having a doctype tells the browser that it should render the page in "standards mode", rather than "quirks mode", which basically means that the browser should assume the code writer is using modern markup rather than outdated markup. It does make a difference. The transitional/strict bits just tell the browser how rigorous your "modern" markup is. If you use strict, the browser will not be as lenient on you as if you use "transitional". However, there is no excuse to be using transitional in this day and age.

    The latest doctype is much simpler, so you can start your page with this if you like:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    It's certainly a lot neater, and has the same effect as the longer doctypes.

    EDIT:
    BTW, I think you are mixing doctypes by having xmlns="http://www.w3.org/1999/xhtml" xml: lang="en" together with an HTML 4.01 doctype. This is an HTML 4 doctype:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    and this is a xhtml doctype

    Code:
    <!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" lang="en" xml:lang="en">

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Your code sample actually wrong you have mixed up XHTML and HTML 4.01 syntax (XHTML uses xmlns) as it is an application of XML, HTML 4.01 doesn't. http://www.w3.org/QA/2002/04/valid-dtd-list.html

    Have you read Tommy's FAQ for example: http://www.sitepoint.com/forums/showthread.php?t=428205 It might help you?

    You can get rid of white-space before the markup with your PHP and personally I'd use an include file.
    Last edited by xhtmlcoder; Feb 26, 2011 at 07:07. Reason: Ralph posted while I was editing.

  4. #4
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could it be margins or padding set on your body tag in your css?

  5. #5
    SitePoint Zealot gregs's Avatar
    Join Date
    Aug 2002
    Posts
    161
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is backward compatible? How can something SHORTER be better?

    Code:
     
    <!DOCTYPE html>
    <html lang="en">
    <head>

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by gregs View Post
    This is backward compatible?
    Yes indeed.

    How can something SHORTER be better?
    Hah, I though you'd be happy with less code, given this comment:

    Quote Originally Posted by gregs View Post
    Why all the newfangled strict and xmlns?.
    Why waste all those bytes if you don't need 'em? (They do mean something, of course, but all the browser really wants to see is a doctype of any flavor.)

  7. #7
    SitePoint Zealot gregs's Avatar
    Join Date
    Aug 2002
    Posts
    161
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I was only asking about the xmlns and things because they kept showing up in coding I saw. As for them being a mix ( html and xhtml ), I probably just copy/pasted someone elses into mine.. thinking it was right.

    The empty line was not in my code, by the way. It was an extra blank line at the end of an include file. I removed it and it resolved that problem.

    Now with the help I have found on this site, I have this crisp, clean source on my login page. ( This is just a personal project and nothing online for others to see. )

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>MyPage.com</title>
          <link rel="stylesheet" type="text/css" href="../styles/admin.css">
      </head>
      <body>
        <div id="wrap">
          <p>Admin Login</p>
              <form method="POST" action="admin.php">
                <label>Username</label>
                <input size="15" maxlength="15" type="text" name="admin">
                <br>
                <label>Password</label>
                <input size="15" maxlength="15" type="password" name="password">
                <br>
                <input type="submit" name="submit" value="Log in">
              </form>
          <p><a href="mailto:webmaster@mypage.com">Webmaster@MyPage.com</a></p>
        </div>
      </body>
    </html>
    Thanks again to everyone for their help and for being patient. The above code may seem basic and trivial to most on this site, but it is a major step for me.

  8. #8
    SitePoint Enthusiast keithclark's Avatar
    Join Date
    Jan 2011
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gregs View Post
    Perusing forums, I noticed a remark:

    "Just make sure the doctype line is on the very first line of your document with no comments or white space before it to ensure proper browser rendering."

    Looking at my coding, I noticed my page has a blank line at the top, with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" on the second line.

    The reason it does that seems to be the PHP code I have been trying to learn. The HTML is placed in a PHP Function at the top and I am guessing that is causing the space.

    Will this blank line actually cause improper browser rendering? I haven't seen any ill-effect on the IE8 I use.

    Below is the top part of the code:

    PHP Code:
     
    <?php
    function renderForm($error) {
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                          "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en">
      <head>
    Another question might be, is that actually needed and correct? I have always just started my pages with <HTML>. Why all the newfangled strict and xmlns?

    I have tried looking this stuff up, but it seems people talk too technical about these things. I guess what I am saying is I need the reply to be in the simplest of forms for me to analyze and comprehend it.

    Thanks

    Edit: The blank line in the PHP box is not in my code. It was placed there on this page.
    Coding is basically about elegance like mathematics; technically there is nothing wrong with your code but how you code is the pattern you will most likely continue with. I use the following:

    <!DOCTYPE html SYSTEM "about:legacy-compat">

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by gregs View Post

    Will this blank line actually cause improper browser rendering? I haven't seen any ill-effect on the IE8 I use.
    A blank line shouldn't cause any problems but a stray character or indeed html comments will send IE into quirks mode and in quirks mode it uses the broken box model and forgets about all the other new features of css that it had learned.

    Just try this simple code in ie6 - 8 and see the dramatic difference the display makes compared to other browsers.

    Code:
    <!-- comment  -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    
    div{
        width:300px;
        height:300px;
        background:red;
        padding:150px;
    }
    </style>
    </head>
    
    <body>
    <div>test</div>
    </body>
    </html>
    As you can see the display is wildly different in IE compared to others so that's a good reason to always have a proper modern doctype.


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
  •