Geek Answers Handbook

Why is the h1 label different in div when doctype type is set?

I have a div with the <h1> in a div, no margins. If I define any type of doctype, a space will be displayed above the div.

If I remove the <h1> tags or remove the doctype definition, there is no place (as it should be. Why?

HTML example:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body { margin:0 } #thediv { background-color:green } </style> </head> <body> <div id="thediv"> <h1>test</h1> </div> </body> </html>

The problem is the space above the green div, remove the DOCTYPE and the space will disappear, change the <h1> to <b> and the space will also disappear. This happens with any doctype (XHTML / HTML, strict / transitional / etc)

It happens in almost all browsers (using http://browsershots.org ). Curiously, the only browser that seems to display it correctly was Internet Explorer 6.0.

+4
source share
5 answers

The space above the green div is the correct behavior according to the CSS specification . This is because the upper edge of h1 is adjacent to the upper edge of the div.

One way to save the h1 field inside a div is to add a border to the div:

 #thediv{ background-color:green; border: 1px transparent solid; }
+7
source

This is probably due to the "quirks" mode, which some browsers call in the absence of doctype (or incorrect).

I suggest you reset your CSS page and move on. Life is too short.

+3
source

DOCTYPE signal standards mode; therefore, IE6 displays it “correctly” (actually incorrectly) because its standards suck. Basically, in standard mode, it follows the CSS layout rules defined in the specification, unlike what you expect ("quirks mode").

+1
source

You have some examples:

  • Without DOCTYPE, browsers use quirks mode instead of interpreting your code according to standards. This is for the old tag soup code - if you are writing new code, you should use DOCTYPE and test it.

  • Browsers can provide "default styles" for HTML elements. If you want your page to look different, you must specify how to do it. Most pages in a minimal order define styles for body and div elements. You also want to control the h1 element, so you also need to style it.

0
source

More articles:


All Articles