ansaurus

Question

Why does adding a DOCTYPE affect my CSS?

Answer 1

A:

you are closing the body tag on line 1 and and then again on the last line.

Nikolaus Gradwohl 2010-08-03 13:08:35

Well spotted, changed it but no difference

SLC 2010-08-03 13:11:27

Answer 2

A:

This is terribly formed XHTML.

The problem you are referring to is actually a webkit issue. When you use a margin on an element, it uses the background from the parent element in the margin space. Instead use padding to get past this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
    <head>
        <title></title>
    </head>
    <body style="margin:0; padding:0; background-color:#eee">
        <div id="HeaderContainer" style="background-color:#eee; color:#000; border-bottom:1px solid #ccc; height:60px; margin:0px"></div>
        <div style="width:100%; background-color:#fff; margin:0px; padding:0px">
            <div style="width:840px; margin:0 auto; padding-top:10px; background-color:#c00;">
                text
                <br /><br /><br />
            </div>
        </div>
    </body>
</html>

Riley 2010-08-03 13:23:34

The parent element is white though. I see that I can use padding to get around the issue, but I was trying to understand if I did something wrong.

SLC 2010-08-03 13:37:54

I see, I worded that wrong. I run into this a lot when creating templates, where elements such as p tags have built in margins and are the first elements to appear within content divs. This is just my work around.

Riley 2010-08-03 13:43:32

Answer 3

+2 A:

Adding a DOCTYPE declaration causes the browser to render the page in [almost] standards mode instead of quirks mode.

Patrick McElhaney 2010-08-03 13:26:35

But this is not an answer, I guess the question should be reformulated as: "why is this code not standard compliant?"

UncleZeiv 2010-08-04 09:46:54

ansaurus

tags:

views:

answers:

Why does adding a DOCTYPE affect my CSS?

related questions