<!DOCTYPE ... line disturbs CSS interpretation

Previous topic

Setup & design

Next topic

Author	Message
nigel dodd	Friday 19 August 2005 4:31:43 am I was wondering why my CSS to add a margin to the menu div#topmenu-design { margin: 0 0 0 80px; only worked when template debugging was on. It took me a long time to see that the debugging line that affected it was the one right at the top of the html file: <!-- START: including template: design/dd4/templates/pagelayout.tpl (design:pagelayout.tpl) --> <p class="small">design/dd4/templates/pagelayout.tpl</p><br/> <!DOCTYPE html PUBL........ which is really a bug because the browser cannot properly interpret any <p> before the <html> tag. (let alone the <body> tag). Nevertheless the inclusion of this debug line right at the top of the html meant that the browser would correctly interpret the CSS for the menu margin. Removing the line <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> from the top of pagelayout.html means everything works fine and the CSS is properly interpreted but goes against my behavioural programming which tells me to leave alone things I don't understand. Can anyone tell me what dire consequences ensue from leaving out this line and why leaving it out causes the CSS to work properly?
bisk	Friday 19 August 2005 7:22:36 am This is a case of quirks and standards-compliant mode. A page with a correct doctype will be rendered by the browser in standards-compliant mode. A page with a wrong/invalid doctype (or in your example an incorrect paragraph line above the doctype) or with no doctype will be rendered by the browser in quirksmode. In quirks mode, the browser attempts to render code based on a best-guess and in standards mode it will be rendered based on the declaration and it's standards. So if your menu has a wrong margin in standards mode, it's either a problem with your css or it's a browser bug. ------------------------------- http://www.kookfijn.nl & http://www.magento.be

Author

Message

nigel dodd

Friday 19 August 2005 4:31:43 am

I was wondering why my CSS to add a margin to the menu

div#topmenu-design
{
    margin: 0 0 0 80px;

only worked when template debugging was on. It took me a long time to see that the debugging line that affected it was the one right at the top of the html file:

<!-- START: including template: design/dd4/templates/pagelayout.tpl (design:pagelayout.tpl) -->
<p class="small">design/dd4/templates/pagelayout.tpl</p><br/>
<!DOCTYPE html PUBL........

which is really a bug because the browser cannot properly interpret any <p> before the <html> tag. (let alone the <body> tag).
Nevertheless the inclusion of this debug line right at the top of the html meant that the browser would correctly interpret the CSS for the menu margin.

Removing the line

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

from the top of pagelayout.html means everything works fine and the CSS is properly interpreted but goes against my behavioural programming which tells me to leave alone things I don't understand.

Can anyone tell me what dire consequences ensue from leaving out this line and why leaving it out causes the CSS to work properly?

bisk

Friday 19 August 2005 7:22:36 am

This is a case of quirks and standards-compliant mode.
A page with a correct doctype will be rendered by the browser in standards-compliant mode. A page with a wrong/invalid doctype (or in your example an incorrect paragraph line above the doctype) or with no doctype will be rendered by the browser in quirksmode.

In quirks mode, the browser attempts to render code based on a best-guess and in standards mode it will be rendered based on the declaration and it's standards.

So if your menu has a wrong margin in standards mode, it's either a problem with your css or it's a browser bug.

-------------------------------
http://www.kookfijn.nl & http://www.magento.be