Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Getting DOCTYPE right

Reply
Thread Tools

Getting DOCTYPE right

 
 
Nick Wedd
Guest
Posts: n/a
 
      02-20-2007
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 http://www.velocityreviews.com/forums/(E-Mail Removed)
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-20-2007
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
 
Reply With Quote
 
 
 
 
Nick Wedd
Guest
Posts: n/a
 
      02-21-2007
In message <5e3e4$45db4ccc$40cba7a4$(E-Mail Removed)>, Jonathan N. Little
<(E-Mail Removed)> 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 (E-Mail Removed)
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      02-21-2007
On Feb 21, 10:42 am, Nick Wedd <(E-Mail Removed)> 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

 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      02-21-2007
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!
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-21-2007
Nick Wedd wrote:
> In message <5e3e4$45db4ccc$40cba7a4$(E-Mail Removed)>, Jonathan N. Little
> <(E-Mail Removed)> 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
 
Reply With Quote
 
j1mb0jay
Guest
Posts: n/a
 
      02-21-2007
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)
 
Reply With Quote
 
Nick Wedd
Guest
Posts: n/a
 
      02-21-2007
In message <(E-Mail Removed) .com>,
Steve Pugh <(E-Mail Removed)> writes
>On Feb 21, 10:42 am, Nick Wedd <(E-Mail Removed)> 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 (E-Mail Removed)
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Newbie - CSS Works With Invalid DOCTYPE. Fails With Valid DOCTYPE. Larry Lindstrom HTML 19 06-12-2012 02:07 PM
The right DOCTYPE? MattB ASP .Net 1 05-07-2007 07:23 PM
Dynamic Menu Items is not right aligned with Right to Left documen =?Utf-8?B?QmlzaG95?= ASP .Net 0 12-28-2006 11:39 AM
Tool to enable Right click on pages where Right click is disabled tsteinke@gmail.com Computer Support 4 08-28-2005 11:53 PM
pass the right form input to the right control Tom ASP .Net 0 12-11-2003 03:07 AM



Advertisments