why comment needed at top of layout?

**paulcj2** · Sep 22, 2004 06:49

I am creating a one column, fixed width layout. It works fine as long as I put a comment at the top.
http://www.clickbasics.com/test_v3/l...ixed/index.php

However, it does not when there is none such comment or just a blank line.
http://www.clickbasics.com/test_v3/l...no_comment.php

The style sheet script is:

Code:

 body {
 width: 600px;
 padding-left: 50%;
 }
 
#frame {
 /* set the width of the column */
 /*WinIE value first, then the desired valuethe next 2 times */
 width: 600px;
 margin-left: -300;
 }

The page script without the comment at the top is:

PHP Code:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
<head>
 <base href="[url="http://www.clickbasics.com/test_v3/"]http://www.clickbasics.com/test_v3/[/url]" />
 <title>One Column Fixed Width -  Template</title>
 <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" media="all" href="css/one_column_fixed.css" title="One Column Fixed Width " />
</head>
<body>
<!-- begin frame div -->
<div id="frame">
<h2>Your Website Name here</h2>
<h3>Your Website Description here</h3> ...
</div>
</body>
</html>

Any clue why the comment at the first line makes this script work OK?

**vgarcia** · Sep 22, 2004 07:14

If you're talking about the first line of your HTML page, then it's not a comment, it's a DOCTYPE. A proper DOCTYPE will force the browser to go into standards-compliance mode (meaning that your code will render as the specs say it should) rather than quirks mode (where the browser renders your code according to legacy bugs). More info here:
http://alistapart.com/articles/doctype/ (general info)
http://msdn.microsoft.com/library/de...hancements.asp (IE's doctype switch)
http://www.opera.com/docs/specs/doctype/ (Opera's doctype switch)
http://www.mozilla.org/docs/web-deve.../doctypes.html (Mozilla's doctype switch)

**Paul O'B** · Sep 22, 2004 07:29

Hi,

The comment at the top of the page throws ie6 into quirks mode (which some people call "this designer doesn't know what he's doing mode", but I wouldn't be unkind enough to say that

.

In quirks mode the browser will supposrt legacy and proprietary behaviour and let you get away with such things as leaving the units of the dimension.

Code:

#frame {
/* set the width of the column */
/*WinIE value first, then the desired valuethe next 2 times */
width: 600px;
margin-left: -300; /* 300 what - miles,inches...*/
}

IE in quirks mode guesses you mean px while other browsers do as they are told and ignore anything thay doesn't make sense. make sure you specify the unit e.g. 300px

Although you can centre a page as you have done above a much neater way is to use the folowing code and the page won't slide off the left hand side of the window.

Code:

body { 
min-width:600px;/* for compliant browsers*/
text-align:center;/* for ie5 and 5.5. and ie6 in quirks mode*/
}
#frame {
width: 600px;
margin-left:auto;/* centre for good browsers*/
margin-right:auto; /* centre for good browsers*.
text-align:left;
}

The page will now centre and stop at the left edge. If you don't stop at the left edge then people with smaller displays than your column width will never be able to see the content because there is no negative horizontal scrollbar.

Paul

Edit:

I typed too slowly and Vinnie beat me to it

**vgarcia** · Sep 22, 2004 07:55

Originally Posted by Paul O'B

Edit:

I typed too slowly and Vinnie beat me to it

But you gave a much more complete and relevant answer

**paulcj2** · Sep 22, 2004 08:44

Thanks, guys.

I did have the doctype in both versions:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
 
<html xmlns="http://www.w3.org/1999/xhtml">

But I missed px (Blush)

Thanks for the work around to [
QUOTE]centre and stop at the left edge. [/QUOTE]Works fine.

I am working thru the O'Reilly CSS Cookbook - Recipe 7.2 (pg 164ff.), where the author raises the point about the box model hack for IE 5.x. I tried to implement Recipe 9.2 (pg 207ff).

PHP Code:


/*..in the CSS rules apply a 50% value to the left padding of the body:*/
/*body {
width: 600px;
padding-left: 50%;
}*/
 
/*Thru an id selector, set the width of the column, then set a negative left margin equal to half the column width.*/
 
/*O'Reilly box model hack for IE5.x*/
 
#frame {
/* WinIE value first, then the desired value the next 2 times */
/* Subtract paddng and borders from stated width*/
/* padding-left: 50% or 300px, left margin = -300px total IE 5.x width = 600px */
width: 600px;
voice-family: "\"}\"";
voice-family: inherit;
width: 600px;
}
html>#frame
width: 600px;
}*/

This works fine in that the column is 600px, is fixed and scrolls OK. But the column is no longer centered in the browser.

http://www.clickbasics.com/test_v3/l...ixed/index.php
Have I got the calculation wrong?

**Paul O'B** · Sep 22, 2004 13:51

Hi,

Its the comment tags above the doctype that cause quirks mode.

I'm not sure what you are trying to do lol. The code I gave you replaces all that junk above.

There is no need for the box model hack above because you have no padding or borders to take care of.

The page isn't centred because you have commented the body styles and therefore there is no centering mechanism in action.

Also you have missed the bracket off the superfluous style here:

Code:

html>#frame { /*bracket*/
width: 600px;
}

If you want learn about the box model hack then have look at the FAQ sticky thread where I have given a good explanation and avoids the voice family hack which causes problems in certain situations.

Paul

**paulcj2** · Sep 23, 2004 06:02

Re:

Its the comment tags above the doctype that cause quirks mode.

Hmmm. I didn't realize this. In the future I'll refrain from comments above the doc type. Sometimes I like to place a comment at the top of the page to identify the page I am working with, for example:

HTML Code:

 <!-- /test_v3/layout/one_column_fixed/index.php-->

Where do you suggest I put such comments? Just below the doc type? Just below

HTML Code:

 <html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">

?

Re:

I'm not sure what you are trying to do lol. The code I gave you replaces all that junk above.

Basically, I am trying to upgrade my understanding of CSS page layouts by working through the O'Reilly CSS Cookbook. I really appreciate the code you gave me, and will no doubt use it. However, I am trying to understand the "junk above" anyway. After all, it's in print - so it must be true, right? (lol).

Re:

There is no need for the box model hack above because you have no padding or borders to take care of.

The page isn't centred because you have commented the body styles and therefore there is no centering mechanism in action.

Yes, I did (mistakenly) comment out the body styles. I have uncommented them, so now there is a padding-left to deal with and the need for the box model. And now the column slides too far to the right.
http://www.clickbasics.com/test_v3/l...dex_broken.php

So it looks like the O'Reilly version of the box model is still not working. I'd simply like to know if the problem is with their model or my rendering of it.

Re:

Also you have missed the bracket off the superfluous style here:

Hmmm. I simply reproduced the O'Reilly code here. That, too, was apparently missing the bracket. Maybe I can't believe everthing in print after all. How liberating!

Re:

look at the FAQ sticky thread

Thanks. Looks exactly like what I need. I'll work my way thru it.

**Paul O'B** · Sep 23, 2004 07:26

Yes, I did (mistakenly) comment out the body styles. I have uncommented them, so now there is a padding-left to deal with and the need for the box model. And now the column slides too far to the right.
http://www.clickbasics.com/test_v3/...ndex_broken.php

So it looks like the O'Reilly version of the box model is still not working. I'd simply like to know if the problem is with their model or my rendering of it.

You will need a negative margin in your code to centre the layout as you have moved it 50% to the right with the 50% padding. Therefore you need a negative margin 0f -300px to draw it centre.

However because you have set a width on the body you will have a permanent horizontal scrollbar (very ugly).

Or you could do this:

Code:

body {
 padding-left:50%;
  width: 600px;
  margin-left:-300px;
}
#frame {
}

I still don't think its a very good way to center though and you should stick with my original example for more consistent results.

Paul

**paulcj2** · Sep 23, 2004 07:46

I agree. I'll stick with your code. Many thanks.

User Tag List

Thread: why comment needed at top of layout?

Thread Tools

Display

why comment needed at top of layout?

Bookmarks

Bookmarks

Posting Permissions