Cascading StyleSheet Information, pg. 6

Tableless design:

Without CSS, tables must be used to organize content, but they have restrictions. You can only style elements that are physically within a webpage, and everything must be laid out on a grid with no possibility of overlap. Layers can replace tables easily and more efficiently as you can group things together with fewer HTML tags.

The parent layer, or the one that contains/constrains all of the other layers, is called the container, though it can be named anything you want. Its opening tag is usually right after <body> and its closing tag is usually right before </body>.

You can put as many layers/elements as you want within the container.

<html><header><title>Site Title</title></head>
<div id="container">
<div id="header">The site title would go here.</div>
This is where all of the content will go.

Design in a standards-compliant browser such as Firefox or Netscape, but always remember to preview in Internet Explorer as well since the majority of web surfers still use it. Designing for IE is a bad idea, however, as there is a significant number of non-IE users. Most display problems can be fixed.

Design tips:
  1. Place a 1 pixel black border around elements to check their positioning. Use white on dark backgrounds/colors.
  2. Style layers and preview them one by one to shorten debugging time.
  3. Use percentage widths instead of fixed ones on layers so that they scale across monitor resolutions.
  4. To get a parent layer to surround its floated children, add an empty layer with an inline style. Use the clear property and the declaration with either be "left," "right," or "both," depending on where your float is.
  5. Sometimes there is more than one way to achieve an effect. If margins aren't working, trying adding padding to the parent element instead. If there isn't a border, background color, etc. on a layer, the effects of margins and padding look exactly the same.
Common Internet Explorer display bugs:
  • The double margin: If you float a layer and also put a margin on the same side as the float (left margin on a left float, etc.) then the margin size will be doubled. With small margins the problem might not be visible, but margins 5px and over are very problematic. The solution to this is to put display:inline; on the float, which makes no sense as you're telling it to become an inline (text) box, which is impossible.
  • The float push: By default, layers overlap when there's a float involved. The float becomes invisibly nested within the element that it's beside. This is what causes the child elements of the static sibling to flow around the float (text, for example). If you place a width on the static sibling to avoid this overlap, IE will push the element out of its position and drop it below the float. There are two solutions for this problem:
    1. If you really need a width on the sibling, float it to the opposite side of the parent layer.
    2. If the width isn't required or solution #2 looks bad, use a margin on the static sibling on the same side the float is on to move it away. The margin should be, at least, the width of the floated sibling. To contain the float and the static sibling, set a width on the parent layer.
  • The layer expansion: Layers in IE automatically expand to fit the largest element in both width and height. If you want the overflow to happen, this can be a big problem.
  • The (strange) art of centering: To center things with CSS you set a width on it and then set the left and right margins to "auto." In IE this only works approximately 75% of the time and never on layers. There are three methods (depending on what layer is to be centered):
    1. To get layers to center in IE, use text-align:center; on the parent layer. To set the text alignment back to default but still keep the centering, use text-align:left; on the layer that you want centered.
    2. Use the same left and right padding on the parent layer.
    3. To center containers, use the same left and right margin on the body. Percentages work the best.
    4. The image gap: Images that are right before the closing tag of a layer will have a large amount of blank space visible on the screen between its bottom edge and the inner bottom edge of the layer. There is no solution to this problem other than to not use the image tag. Headers are especially affected by this bug. Place the header image as a background on the header layer instead.