Welcome to WebmasterWorld Guest from 54.91.16.95

Forum Moderators: incrediBILL

Message Too Old, No Replies

when I add a DOCTYPE it moves my page down - Why?

     
4:29 am on Dec 23, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 23, 2007
posts:143
votes: 0


I am cleaning up a site which has no DOCTYPE or beginning html tag. When I add

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

it moves my whole page down by one or two line breaks. Does anyone know why?

I already tried

body { margin: 0px; padding: 0px; } and it did not work. Thanks

7:48 am on Dec 23, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Sept 29, 2000
posts: 12095
votes: 0


>>body { margin: 0px; padding: 0px; } and it did not work.

Is that within the html <body> tag, or in the CSS section (or stylesheet)?

If you aren't using an external stylesheet, you should use one section in the <head> section:

<style type="text/css">

With all your styles in between the beginning and closing tag (here).

</style>
================================
DOCTYPE declaration here then
<html>
<head>
(meta tags go here)
<style type="text/css">
(css for the page goes here)
</style>
</head>
<body>
<p>All your content in between the body tags.</p>
</body>
</html>
=================================

1:51 pm on Dec 23, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 23, 2007
posts:143
votes: 0


I do have an internal style sheet and I did put it within the style tags. For #*$!s and giggles I also tried putting it in the external .css. Did not work either. Currently this code is within the internal style tags - could this be effecting what we are trying to do?

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #0066CC;
}

I found that if I take out "http://www.w3.org/TR/html4/loose.dtd" it does not effect the page. Meaning it does not move the page down - Is it OK to just put

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> as doctype?

or will this make it go into quirks mode?

3:02 pm on Dec 23, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Sept 29, 2000
posts:12095
votes: 0


Yes, it'll put it into quirks mode; but I've had it like that on sites and it didn't seem to make a difference with those sites. But they were a while back (older browsers), very simple HTML with just a little bit of CSS for font styling.

You'll need to have this as the first thing in your page code, before the <head> section:


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

Here are the W3 specs:

[w3.org...]

If you don't include the DOCTYPE declaration, you can't run your pages through the W3 Validator, and you'll definitely need to, it's a great debugging tool. Also run it through for checking the CSS.

6:52 pm on Dec 23, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 23, 2007
posts:143
votes: 0


To fix problem: Answer = h1, p, etc { margin: 0px; }
7:18 pm on Dec 23, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


To fix problem: Answer = h1, p, etc { margin: 0px; }

Yeah, it seems in standards mode, the

margin-top
of the h1 or p (or any element that by default has a margin-top) does not collapse when up against the top of the body. In quirks mode it does. So, the gap at the top of the page is the margin-top on these other page elements, not the body itself.

As far as I can tell, this effects all (FF, Opera) standard compliant browsers. IE6 and IE7 both appear to collapse the margin-top in both quirks and standards mode.

9:24 pm on Dec 23, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 23, 2007
posts:143
votes: 0


So all I have to do then to fix each page is put full DOCTYPE, and h1 { margin: 0px; } and p { margin-top: 0px; } The h1 is easy because there is only one on each page.

But, what is the best way to apply that to the p tag - class, id, decedent, etc? Because the only p tag that I need to apply no margin to is the one right after the h1. Not the others. Thanks

10:27 pm on Dec 23, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


....and h1 { margin: 0px; } and p { margin-top: 0px; } .... the only p tag that I need to apply no margin to is the one right after the h1.

In your case, do you need to style the p tag?

If the h1 always appears before the p tag, then I would have thought you'd only need to apply:

h1 {margin-top:0;}

...and not do anything specific to the p tag? At least this should then render similar to quirks mode? (At least it does in my little test; but are your needs more specific?)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members