Getting DOCTYPE right

Discussion in 'HTML' started by Nick Wedd, Feb 20, 2007.

  1. Nick Wedd

    Nick Wedd Guest

    At http://www.files.maproom.org/00/18/present.php?m=0004 you can see a
    page which looks as I want it to. It validates (using the validator at
    http://validator.w3.org/), except that it is missing a doctype tag.

    So I have added the line
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    as recommended at
    http://validator.w3.org/docs/help.html#faq-doctype, giving the page
    http://www.files.maproom.org/00/18/presentrh.php?m=0004. This page is
    identical to the other one apart from the addition of the doctype tag.
    It validates perfectly, but looks wrong - the vertical spacing in the
    table near the top is wrong.

    I have tried other doctype tags, with the same, or worse, results. How
    should I set about creating a page which looks right _and_ passes the
    validator?

    Nick
    --
    Nick Wedd
    Nick Wedd, Feb 20, 2007
    #1
    1. Advertising

  2. Nick Wedd wrote:
    > At http://www.files.maproom.org/00/18/present.php?m=0004 you can see a
    > page which looks as I want it to. It validates (using the validator at
    > http://validator.w3.org/), except that it is missing a doctype tag.
    >
    > So I have added the line
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">
    > as recommended at
    > http://validator.w3.org/docs/help.html#faq-doctype, giving the page
    > http://www.files.maproom.org/00/18/presentrh.php?m=0004. This page is
    > identical to the other one apart from the addition of the doctype tag.
    > It validates perfectly, but looks wrong - the vertical spacing in the
    > table near the top is wrong.
    >
    > I have tried other doctype tags, with the same, or worse, results. How
    > should I set about creating a page which looks right _and_ passes the
    > validator?


    Try:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    And if you want to remove the space above your 'topbar' table then
    remove the default margin from the top of your document

    BODY { margin-top: 0; }

    If you want to remove all space, then BODY { margin: 0; padding: 0; }

    You know this isn't valid

    <p><table class="pai"><tbody><tr>
    ....
    </p>

    TABLE is a block element as is P, but P can *only* contain inline
    elements. If you want a space above the TABLE then style it with a margin!

    TABLE.pai { margin-top: 1.5em; }


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 20, 2007
    #2
    1. Advertising

  3. Nick Wedd

    Nick Wedd Guest

    In message <5e3e4$45db4ccc$40cba7a4$>, Jonathan N. Little
    <> writes

    Thank you for your help. I am slowly increasing my understanding of
    what is going on here, I can see that it isn't easy, and I appreciate
    the time you must have spent on it.

    >Try:
    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >


    Ok, I've tried this. It still has the same problem.

    >And if you want to remove the space above your 'topbar' table then
    >remove the default margin from the top of your document
    >
    >BODY { margin-top: 0; }


    I've done that (but it wasn't the problem that I wanted to fix).

    >If you want to remove all space, then BODY { margin: 0; padding: 0; }
    >
    >You know this isn't valid
    >
    ><p><table class="pai"><tbody><tr>
    >...
    ></p>
    >
    >TABLE is a block element as is P, but P can *only* contain inline
    >elements.


    Ah yes - that was an error. Now fixed. Thank you for pointing it out.

    >If you want a space above the TABLE then style it with a margin!
    >
    >TABLE.pai { margin-top: 1.5em; }


    No, that wasn't my problem -

    I have simplified the whole page, removing the javascript and other
    irrelevant elements, and using a simplified stylesheet.

    See http://www.files.maproom.org/00/18/a.html
    and http://www.files.maproom.org/00/18/b.html

    a.html looks the way I want it, b.html has unwanted vertical spacing.
    The only difference is that b.html has a valid doctype, a.html has no
    doctype.

    Nick
    --
    Nick Wedd
    Nick Wedd, Feb 21, 2007
    #3
  4. Nick Wedd

    Steve Pugh Guest

    On Feb 21, 10:42 am, Nick Wedd <> wrote:

    > I have simplified the whole page, removing the javascript and other
    > irrelevant elements, and using a simplified stylesheet.
    >
    > Seehttp://www.files.maproom.org/00/18/a.html
    > andhttp://www.files.maproom.org/00/18/b.html
    >
    > a.html looks the way I want it, b.html has unwanted vertical spacing.
    > The only difference is that b.html has a valid doctype, a.html has no
    > doctype.


    Get rid of the <p> element inside the second table cell.

    Steve
    Steve Pugh, Feb 21, 2007
    #4
  5. Nick Wedd wrote:

    > It still has the same problem.


    The "problem" is that including *any* DOCTYPE (there are a handful of
    exceptions) will flip your browser out of "quirks mode". "Quirks Mode" is a
    bad place to be, as it means that your web page will behave unpredictably
    across different browsers.

    You have clearly written your page in "quirks mode", relying on some
    quirky behaviour in your browser -- Internet Explorer 5's broken box
    model is one of the key features of quirks mode.

    Now that you have added a DOCTYPE, your browser is no longer in quirks
    mode, so the quirky behaviour you were relying on has gone.

    The solution is to use a strict DOCTYPE:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    and adjust your CSS to get your site to display correctly.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

    * = I'm getting there!
    Toby A Inkster, Feb 21, 2007
    #5
  6. Nick Wedd wrote:
    > In message <5e3e4$45db4ccc$40cba7a4$>, Jonathan N. Little
    > <> writes
    >
    > Thank you for your help. I am slowly increasing my understanding of
    > what is going on here, I can see that it isn't easy, and I appreciate
    > the time you must have spent on it.
    >
    >> Try:
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">

    <snip>

    > No, that wasn't my problem -
    >
    > I have simplified the whole page, removing the javascript and other
    > irrelevant elements, and using a simplified stylesheet.
    >
    > See http://www.files.maproom.org/00/18/a.html
    > and http://www.files.maproom.org/00/18/b.html
    >
    > a.html looks the way I want it, b.html has unwanted vertical spacing.
    > The only difference is that b.html has a valid doctype, a.html has no
    > doctype.


    Firstly, one way to guarantee display quirkiness is to *not* have a
    valid doctype.

    Secondly, this is a new document so you should use the strict doctype as
    I suggested.

    Thirdly, a P element is a 'block' element so by default it is going to
    insert 'space' above and below the block...look up SPAN.

    Fourthly, your markup has errors, your table's first row has 2 table
    cells, but the second has 3 as a colspan="3". That will give you display
    problem right from the start. But it looks like the only reason you have
    a table is for layout...tsk-tsk. Not need, a more flexible way...just
    used placeholders for your links...

    <!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=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>Tableless</title>

    <style type="text/css">
    BODY { color: #000; background-color: #ffd; font-family: arial,
    helvetica; sans-serif; }

    ..maproom H1 { font-weight: normal; font-size: 1.3em; text-align: right; }
    ..maproom H1 SPAN.title { display: block; float: left; }
    ..maproom H1 SPAN.title A { font-weight: bold; }
    ..maproom H1 SPAN.index STRONG { color: #080; }
    ..maproom H2 { font-size: 1.3em; font-style: italic; }
    ..maproom UL { list-style: none; }
    ..maproom LI { margin: 0; padding: 0 1em 0 0; display: inline;}

    </style>

    </head>
    <body>

    <div class="maproom">
    <h1>
    <span class="title">
    Plate from <a href="#">Cary's New Itinerary</a>
    by <strong>John Cary</strong>
    </span>
    <span class="index">
    Index no. <strong>0018:0004</strong>
    </span>
    </h1>
    <h2>Isle of Wight</h2>
    <ul>
    <li>Change Image Scale:</li>
    <li><a href="#">0.8</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">1.4</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">Screen Width</a></li>
    <li><a href="#">Screen Height</a></li>
    </ul>
    <img src="http://www.files.maproom.org/00/18/0004.jpg"
    alt="Isle of Wight" height="351" width="438">
    </div>
    </body>
    </html>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 21, 2007
    #6
  7. Nick Wedd

    j1mb0jay Guest

    Jonathan N. Little wrote:
    > Nick Wedd wrote:
    >> At http://www.files.maproom.org/00/18/present.php?m=0004 you can see
    >> a page which looks as I want it to. It validates (using the
    >> validator at http://validator.w3.org/), except that it is missing a
    >> doctype tag.
    >>
    >> So I have added the line
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    >> "http://www.w3.org/TR/html4/loose.dtd">
    >> as recommended at
    >> http://validator.w3.org/docs/help.html#faq-doctype, giving the page
    >> http://www.files.maproom.org/00/18/presentrh.php?m=0004. This page is
    >> identical to the other one apart from the addition of the doctype
    >> tag. It validates perfectly, but looks wrong - the vertical spacing
    >> in the table near the top is wrong.
    >>
    >> I have tried other doctype tags, with the same, or worse, results.
    >> How should I set about creating a page which looks right _and_
    >> passes the validator?

    >
    > Try:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > And if you want to remove the space above your 'topbar' table then
    > remove the default margin from the top of your document
    >
    > BODY { margin-top: 0; }
    >
    > If you want to remove all space, then BODY { margin: 0; padding: 0; }
    >
    > You know this isn't valid
    >
    > <p><table class="pai"><tbody><tr>
    > ...
    > </p>
    >
    > TABLE is a block element as is P, but P can *only* contain inline
    > elements. If you want a space above the TABLE then style it with a
    > margin!
    >
    > TABLE.pai { margin-top: 1.5em; }

    Try using the strict DTD forces to use correct code.
    --
    Regards JJ (UWA)
    j1mb0jay, Feb 21, 2007
    #7
  8. Nick Wedd

    Nick Wedd Guest

    In message <>,
    Steve Pugh <> writes
    >On Feb 21, 10:42 am, Nick Wedd <> wrote:
    >
    >> I have simplified the whole page, removing the javascript and other
    >> irrelevant elements, and using a simplified stylesheet.
    >>
    >> Seehttp://www.files.maproom.org/00/18/a.html
    >> andhttp://www.files.maproom.org/00/18/b.html
    >>
    >> a.html looks the way I want it, b.html has unwanted vertical spacing.
    >> The only difference is that b.html has a valid doctype, a.html has no
    >> doctype.

    >
    >Get rid of the <p> element inside the second table cell.


    Thank you - this has fixed my problem.

    Nick

    --
    Nick Wedd
    Nick Wedd, Feb 21, 2007
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tom
    Replies:
    0
    Views:
    412
  2. =?Utf-8?B?QmlzaG95?=
    Replies:
    0
    Views:
    963
    =?Utf-8?B?QmlzaG95?=
    Dec 28, 2006
  3. MattB

    The right DOCTYPE?

    MattB, May 7, 2007, in forum: ASP .Net
    Replies:
    1
    Views:
    307
    Michael Nemtsev
    May 7, 2007
  4. Bogdan
    Replies:
    1
    Views:
    770
    Bogdan
    Jun 16, 2009
  5. Larry Lindstrom
    Replies:
    19
    Views:
    1,269
    Jonathan N. Little
    Jun 12, 2012
Loading...

Share This Page