Menu
I am wondering why the following HTML/CSS renders fine until I put a doctype in:
<body style="margin:0; padding:0; background-color:#eeeeee"></body>
<div id="HeaderContainer" style="background-color:#eeeeee; color:Black; border-bottom:1px solid #cccccc; height:60px; margin:0px"></div>
<div style="width:100%; background-color:White; margin:0px; padding:0px">
<div style="margin:30px; width:840px; margin:10px auto; margin-top:50px; background-color:#cc0000;">
text
</div>
</div>
</div>
</body>
What I want is a header (a grey bar) with a dark grey border at the bottom. Beneath this, I want my content, which goes into a big 100% width div that's white (as the page is grey). The above code looks fine, but if I add this line to the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The margin on the innermost div turns from white to grey, so the page looks wrong.
Can anyone explain why? I am testing this using IE8 but it looks the same in Chrome.
Image description:
933
Adding a DOCTYPE declaration causes the browser to render the page in [almost] standards mode instead of quirks mode.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
