SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    why comment needed at top of layout?

    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?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote 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

  5. #5
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 */
    width600px;
    voice-family"\"}\"";
    voice-familyinherit;
    width600px;
    }
    html>#frame
    width600px;
    }*/ 
    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?
    Last edited by paulcj2; Sep 22, 2004 at 10:20.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  7. #7
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 C.
    ClickBasics
    http://www.clickbasics.com

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  9. #9
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree. I'll stick with your code. Many thanks.
    Paul C.
    ClickBasics
    http://www.clickbasics.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •