doctype definition and css

Martin Nadoll · Jun 11, 2005

Hello,

i am using Dreamweaver MX 2004 to develop my php and html-sites.
Dreamweaver includes a doctype-definition when creating a new page, in my
case:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Now i needed to make a table with 100% height to show the content vertical
centered on my screen.
(or is there a solution with css to center content vertical on screen?)

<table id="myTable">....... </table>
i used a id referenced style for that:
#myTable { height:100%; }

didn't work.
When i remove the doctype-definition, everything works fine.

What is the reason for that?
Is a doctype definition important?
What happens, if i remove it?
Is there another definition i can use, to bring that style to work?

Because i'm not sure, this is the right place, i will ask the same question
in a css group too.

Thanks for any help,
Martin Nadoll

Steve Pugh · Jun 11, 2005

Martin Nadoll said:
i am using Dreamweaver MX 2004 to develop my php and html-sites.
Dreamweaver includes a doctype-definition when creating a new page, in my
case:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Yeah, Dreamweaver is a bit behind the times and defaults to
Transitional rather than Strict. You can configure it to include a
Strict doctype instead.

Now i needed to make a table with 100% height to show the content vertical
centered on my screen.

Sounds like you're misusing a table.

(or is there a solution with css to center content vertical on screen?)

(I presume you mean viewport when you say screen, the centre of the
screen may not be inside the browser window at all).

Yes. Two solutions, one doesn't work in IE and the other can lead to
content being placed inaccessibly off the viewport for users with
small viewports.

<table id="myTable">....... </table>
i used a id referenced style for that:
#myTable { height:100%; }

didn't work.
When i remove the doctype-definition, everything works fine.

What is the reason for that?

height: 100% is calculated as 100% of the parent element. The parent
element in this case is the body which in the absence of a specified
height will only be as tall as it's content. So the table is as tall
as the body and the body is as tall as the table. So 100% = as small
as needed by the table's contents.

Is a doctype definition important?

Yes. No. Depends.

In theoretical terms the doctype is very important, but in practical
terms browsers don't use it for it's official purpose. However, they
do use it as a switch to determine whether they will lay out the page
in accordance with the spec or in accordance with the behaviour of
older browsers. This switching is done on the basis of the text of the
doctype rather than the version of HTML being referenced by the
doctype (i.e. there are some cases where two different doctypes, both
for the same version of HTML will trigger different rendering modes).

What happens, if i remove it?

The browser moves into "quirks mode" whereby it starts emulating lots
of bugs from older browser versions. Such as calculating heights
incorrectly.

Is there another definition i can use, to bring that style to work?

In addition to what you have, add:
html, body {height: 100%;}

Now the body element is as tall as the html element and the html
element is as tall as the viewport. So the table element will now be
as tall as the viewport.

Because i'm not sure, this is the right place, i will ask the same question
in a css group too.

And where would you like your answers? Don't multipost, crosspost with
one group set for followups.

Steve

Help with some CSS	2	Mar 29, 2023
Positioning CSS components	1	Nov 16, 2023
Interfering CSS	1	Feb 9, 2024
Scrollbar vsus doctype query	10	Jan 24, 2011
Stuck with html and css	25	Dec 14, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022

doctype definition and css

Martin Nadoll

Steve Pugh

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads