SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry "Designing Without Tables Using CSS"

    I have to admit, reading the first 4 chapters the day the book came really built up my expectations about how CSS was going to change the way I built my sites.

    BUT, as I started trying out the code in the 5th and 6th chapters, I found that it didn't work as the book said it should, and I have become increasingly frustrated as I test it in:
    • Opera v7.0
    • Mozilla v1.2.1
    • Netscape v7.02
    • IE v6.0
    Mozilla and Netscape were consistant in the unexpected rendering of the css pages.

    IE and Opera had the most disagreements.

    And the code that the author said worked in IE did not.

    I am going to attach some screen shots of the results and the code used to generate those results.

    Never mind. The attachements are too big for this forum...

    The code from page 120, as I have typed it in from the book:
    Code:
    #top
    {
      margin:	 20px;
      padding:	10px;
      background: #ccc;
      height:	 100px;
    }
    #left
    {
      position:	 absolute;
      left:		 10px;
      top:		  160px;
      width:		200px;
    }
    #center
    {
      background:   #ccc;
      margin-top:   0;
      margin-left:  220px;
      margin-right: 220px;
    }
    #right
    {
      position:	 absolute;
      right:		10px;
      top:		  160px;
      width:		200px;
    }
    The HTML page:
    Code:
    <html>
      <head>
    	<title>Page 118</title>
    	<link rel="stylesheet" href="column.css" type="text/css" />
      </head>
      <body>
    	<div id="top">
    	  <p>
    		Top Block<br />Blah blah blah...
    	  </p>
    	</div>
    	<div id="left">
    	  <p>
    		LEFT COLUMN<br /> Blah blah blah...
    	  </p>
    	</div>
    	<div id="center">
    	  <p>
    		CENTER COLUMN<br /> Blah blah blah...
    	  </p>
    	</div>
    	<div id="right">
    	  <p>
    		RIGHT COLUMN<br /> Blah blah blah...
    	  </p>
    	</div>
      </body>
    </html>
    The only browser that rendered this properly is Opera.

    This code:
    Code:
    <html>
      <head>
    	<style>
    	  body
    	  {
    		margin: 0;
    	  }
    	</style>
      <body>
    	<div style="position: absolute; top: 0; left 0; width: 100px; background: #ccc;">
    	  <p>
    		Left Column
    	  </p>
    	</div>
    	<div style="margin-left: 100px; margin-right: 20%; background: #bbb;">
    	  <p>
    		Center Column blah
    	  </p>
    	</div>
    	<div style="position: absolute; top: 0; right: 0; width: 20%; background: #999;">
    	  <p>
    		Right Column
    	  </p>
    	</div>
    	<div>
    	  <p>
    	  <br>
    	  <br>
    	  <br>
    	  <br>
    		Footer
    	  </p>
    	</div>
      </body>
    </html>
    This code renders screwy in all the browser listed above. I had to add the <br> tags to get the "Footer" text to come out from behind the columns and actually show below them in Mozilla and NS. This would defeat the purpose of even having a footer on a dynamically rendered page.

    Also Opera shows the middle column's top aligned horizontally with the bottom of the right and left columns.

    In IE, the left column's left side is flush with the center column's left side, thus overlapping the text in the center column.

    I posted the first concern on the CSS board for some help, and found that the code that worked was quite different from the code in the book.

    I really hope the author will respond to this post, as I want to be able to use CSS in my sites, however, if others have the same frustrating experience that I have had so far, I can understand why table formating is the prefered choice.

    But, as for now, "HTML Utopia" is a serious misnomer, and misleading title. "HTML Frustration" would be more appropriate.

    At this time, I would recommend NOT buying this book.
    John

  2. #2
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    As the technical editor of this book, allow me to respond...

    I've just tested the example on p.120 of the book. Here's the exact code I used:
    Code:
    3colplusheader.html
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Three-Column Layout Demonstration</title>
    <meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="3colplusheader.css" type="text/css" />
    </head>
    <body>
      <div id="top">
        <h1>
          This is the header area of the three-column-plus-header
          layout
        </h1>
      </div>
      <div id="left">
        <p>
          This is quite straight-forward. Using absolute positioning,
          this column has its upper left corner placed 10 pixels down
          from the top of the document area of the browser and 10
          pixels to the right of the left margin of that space. It
          sets a fixed width for the column, though as we will see,
          you could supply a relative value (such as a percentage) to
          create a stretchy layout that would keep the left column's
          width proportional to the document area's width.
        </p>
      </div>
      <div id="center">
        <p>
          Notice that this column is not able to be positioned. Its
          position will thus retain its "natural" place based on its
          location in the HTML file that generates the page. Margin
          settings ensure that the left and right columns (which are
          set to 200 pixels in width) will have room for their content
          without creating a visible space between any of the
          adjoining columns.
        </p>
      </div>
      <div id="right">
        <p>
          The right-hand column is so much like the left-hand column
          that it seems unworthy of comment.
        </p>
      </div>
    </body>
    </html>
    
    3colplusheader.css
    
    #top {
      margin: 20px;
      padding: 10px;
      background: #ccc;
      height: 100px;
    }
    #left {
      position: absolute;
      left: 10px;
      top: 160px;
      width: 200px;
    }
    #center {
      background: #ccc;
      margin-top: 0;
      margin-left: 220px;
      margin-right: 220px;
    }
    #right {
      position: absolute;
      right: 10px;
      top: 160px;
      width: 200px;
    }
    Here are my results:
    1. Page margins need to be set to 0 to eliminate browser-specific margin differences:
      Code:
      body {
        margin 0;
      }
      This is explained later in the book on p.134. This detail was ignored in this early example, the purpose of which was to illustrate the mechanics of a basic 3-column layout. The next chapter tackles browser-specific glitches.
    2. Compared to Internet Explorer, Mozilla/NS7 adds top margins to the paragraphs in the absolute-positioned blocks (left and right) and to the heading in the top block. Opera only adds the header's margin. In this particular example, you can eliminate these with the following rule:
      Code:
      div > p, div > h1 {
        margin-top: 0;
      }
      Again, however, these differences were deemed beside the point in this particular example, where the focus was on getting the blocks to form a 3-column layout with a header.
    As for your code, here are the corrections I made to get it to render correctly across browsers:
    1. Added the missing </head> tag.
    2. Added missing colon between the 'left' property name and its value on the left column.
    3. To allow the footer to be correctly positioned, ensure that the content of the center column (which "pushes down" the footer, as it is statically positioned) is vertically larger than the left and right columns. Doing this lets you remove the <br> tags from the footer. On a practical site, you would usually pad out the center column with <br> tags or empty paragraphs to make sure it extended beyond the side columns. The alternative is to use JavaScript to re-position the footer below the left/right columns after the page has loaded (this is what we do on sitepoint.com). This issue is discussed in detail in Julian Carroll's HTML Utopia articles, and is one of the only big downfalls of practical CSS page layout today.
    Here's my corrected version of your code:
    Code:
    <html>
      <head>
        <style>
          body {
           margin: 0;
          }
        </style>
      </head>
      <body>
        <div style="position: absolute; top: 0; left: 0; width: 100px; background: #ccc;">
          <p>
          This is quite straight-forward. Using absolute positioning,
          this column has its upper left corner placed 10 pixels down
          </p>
        </div>
        <div style="margin-left: 100px; margin-right: 20%; background: #bbb;">
          <p>
          Notice that this column is not able to be positioned. Its
          position will thus retain its "natural" place based on its
          location in the HTML file that generates the page. Margin
          settings ensure that the left and right columns (which are
          set to 200 pixels in width) will have room for their content
          without creating a visible space between any of the
          adjoining columns.
          Notice that this column is not able to be positioned. Its
          position will thus retain its "natural" place based on its
          location in the HTML file that generates the page. Margin
          settings ensure that the left and right columns (which are
          set to 200 pixels in width) will have room for their content
          without creating a visible space between any of the
          adjoining columns.
          Notice that this column is not able to be positioned. Its
          position will thus retain its "natural" place based on its
          location in the HTML file that generates the page. Margin
          settings ensure that the left and right columns (which are
          set to 200 pixels in width) will have room for their content
          without creating a visible space between any of the
          adjoining columns.
          </p>
        </div>
        <div style="position: absolute; top: 0; right: 0; width: 20%; background: #999;">
          <p>
          The right-hand column is so much like the left-hand column
          that it seems unworthy of comment.
          </p>
        </div>
        <div style="background: #999;">
          <p>Footer </p>
        </div>
      </body>
    </html>
    This still leaves a couple of browser-specific differences in rendering:
    1. NS7/Mozilla displays with whitespace above the center column. This is due to the Mozilla top margin bug described on p.139, and can be corrected with this rule:
      Code:
      div > p {
        margin-top: 0;
      }
    2. In addition to the default page margins, Opera adds some default page padding. Extend your margin-removing rule to address this as follows:
      Code:
      body {
        margin: 0;
        padding: 0;
      }
      This tweak is the only one not covered in the book, and I'll make sure to add it to the errata page.
    Let me know if there's anything I've missed!
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference

  3. #3
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kevin,

    Thanks for your response. I'll give it a try tonight and let you know the results.
    John

  4. #4
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright. Kevin, it worked much better, but the screen shot is deceptive, as it is Mozilla that is being used, and the code does not render the page the same as is displayed in the screen shot. And because of that I thought I was doing something wrong, then after I determined that the code was the same as the book, I then thought the code was incorrect.

    Maybe that could be included in the errata, as well?

    I sure appreciate your feedback.
    John


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
  •