<!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

eZ debug

Timing:	Jan 18 2025 18:21:41
Script start
Timing:	Jan 18 2025 18:21:41
Module start 'layout'
Timing:	Jan 18 2025 18:21:41
Module start 'content'
Timing:	Jan 18 2025 18:21:42
Module end 'content'
Timing:	Jan 18 2025 18:21:42
Script end

Main resources:

Total runtime	0.8859 sec
Peak memory usage	4,096.0000 KB
Database Queries	54

Timing points:

Checkpoint	Start (sec)	Duration (sec)	Memory at start (KB)	Memory used (KB)
Script start	0.0000	0.0055	589.1797	152.6406
Module start 'layout'	0.0055	0.0029	741.8203	39.4766
Module start 'content'	0.0084	0.8760	781.2969	525.9375
Module end 'content'	0.8844	0.0015	1,307.2344	8.1250
Script end	0.8859		1,315.3594

Time accumulators:

Accumulator	Duration (sec)	Duration (%)	Count	Average (sec)
Ini load
Load cache	0.0031	0.3535	16	0.0002
Check MTime	0.0013	0.1471	16	0.0001
Mysql Total
Database connection	0.0009	0.1069	1	0.0009
Mysqli_queries	0.8408	94.9094	54	0.0156
Looping result	0.0005	0.0517	52	0.0000
Template Total	0.8554	96.6	2	0.4277
Template load	0.0017	0.1902	2	0.0008
Template processing	0.8537	96.3595	2	0.4268
Template load and register function	0.0001	0.0117	1	0.0001
states
state_id_array	0.0023	0.2584	1	0.0023
state_identifier_array	0.0009	0.1004	2	0.0004
Override
Cache load	0.0013	0.1515	19	0.0001
Sytem overhead
Fetch class attribute can translate value	0.0010	0.1145	2	0.0005
Fetch class attribute name	0.0013	0.1433	3	0.0004
XML
Image XML parsing	0.0007	0.0736	2	0.0003
class_abstraction
Instantiating content class attribute	0.0000	0.0007	3	0.0000
General
dbfile	0.0008	0.0906	16	0.0001
String conversion	0.0000	0.0008	4	0.0000
Note: percentages do not add up to 100% because some accumulators overlap

Templates used to render the page:

Usage	Requested template	Template	Template loaded
1	node/view/full.tpl	full/forum_topic.tpl	extension/sevenx/design/simple/override/templates/full/forum_topic.tpl
1	content/datatype/view/ezimage.tpl	<No override>	extension/sevenx/design/simple/templates/content/datatype/view/ezimage.tpl
2	content/datatype/view/ezxmltext.tpl	<No override>	extension/community_design/design/suncana/templates/content/datatype/view/ezxmltext.tpl
5	content/datatype/view/ezxmltags/paragraph.tpl	<No override>	extension/ezwebin/design/ezwebin/templates/content/datatype/view/ezxmltags/paragraph.tpl
3	content/datatype/view/ezxmltags/literal.tpl	<No override>	extension/community/design/standard/templates/content/datatype/view/ezxmltags/literal.tpl
2	content/datatype/view/ezxmltags/line.tpl	<No override>	design/standard/templates/content/datatype/view/ezxmltags/line.tpl
1	print_pagelayout.tpl	<No override>	extension/community/design/community/templates/print_pagelayout.tpl
Number of times templates used: 15 Number of unique templates used: 7

Time used to render debug report: 0.0001 secs