Forums / Setup & design / <!DOCTYPE ... line disturbs CSS interpretation

<!DOCTYPE ... line disturbs CSS interpretation

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 31 2025 01:18:39
Script start
Timing: Jan 31 2025 01:18:39
Module start 'content'
Timing: Jan 31 2025 01:18:39
Module end 'content'
Timing: Jan 31 2025 01:18:39
Script end

Main resources:

Total runtime0.2078 sec
Peak memory usage8,192.0000 KB
Database Queries141

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0063 588.0625370.2734
Module start 'content' 0.00630.0138 958.33591,001.7031
Module end 'content' 0.02010.1876 1,960.03913,891.5391
Script end 0.2077  5,851.5781 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00492.3559200.0002
Check MTime0.00140.6834200.0001
Mysql Total
Database connection0.00050.263210.0005
Mysqli_queries0.101248.72341410.0007
Looping result0.00140.66701390.0000
Template Total0.187390.110.1873
Template load0.00070.338410.0007
Template processing0.186589.768810.1865
Override
Cache load0.00050.230010.0005
Sytem overhead
Fetch class attribute can translate value0.00180.876010.0018
XML
Image XML parsing0.00030.151110.0003
General
dbfile0.00864.1469200.0004
String conversion0.00000.002030.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0002 secs