Getting DOCTYPE right

N

Nick Wedd

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
 
J

Jonathan N. Little

Nick said:
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?
Click to expand...

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; }
 
N

Nick Wedd

In message <[email protected]>, Jonathan N. Little

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">
Click to expand...

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; }
Click to expand...

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.
Click to expand...

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; }
Click to expand...

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
 
T

Toby A Inkster

Nick said:
It still has the same problem.
Click to expand...

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!
 
J

Jonathan N. Little

Nick said:
In message <[email protected]>, Jonathan N. Little

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.
Click to expand...
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.
Click to expand...

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>
 
J

j1mb0jay

Jonathan said:
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; }
Click to expand...
Try using the strict DTD forces to use correct code.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Scrollbar vsus doctype query 10
DOCTYPE + SAX 2
Help with code 0
doctype definition and css 1
doctype conditionals 5
Footer & DOCTYPE 17
CSS Newbie - CSS Works With Invalid DOCTYPE. Fails With Valid DOCTYPE. 19
Help with my responsive home page 2

Members online

No members online now.
Total: 41 (members: 1, guests: 40)
Robots: 192

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top