Re: Zero Margins on Block Elements?

by "Eric A. Meyer" <eam3(at)po.cwru.edu>

 Date:  Mon, 8 Nov 1999 11:25:49 -0500
 To:  hwg-style(at)hwg.org
 References:  rr astra
  todo: View Thread, Original
>Don't set any margin at all in the body tag. If you don't set a body margin,
>the body will take the browser's default margin.
>
>Then, on your top and bottom tables, set the margin to zero. That would be
>like this:
>
><TABLE style="margin-left: 0; margin-right:0">
> ... table goes here...
></TABLE>
>
>This over-rides the browser's default for the table element (only) and sets
>the table flush with the edge of the browser window.

   In a CSS-conformant browser, this solution will only work if the BODY
element has no padding, borders, or margins.  This is because the sum total
of the padding, borders, margins, and width of an element can only be as
wide as the content width of the parent element (BODY, in this case).
Thus, given the following rules:

   BODY {margin: 8px; border-width: 0; padding: 2px;}
   TABLE {margin-left: 0; margin-right: 0;}

...the right and left edges of the TABLE will be ten pixels from the right
and left edges of the browser window.  If you want to overcome this, you
have two choices, depending on what you are willing to accept:

   BODY {margin: 0; border-width: 0; padding: 0;}
   TABLE {margin-left: 0; margin-right: 0;}

   BODY {margin: 8px; border-width: 0; padding: 2px;}
   TABLE {margin-left: -10px; margin-right: -10px;}

Of course, that's in a CSS-conformant browser, which only Opera3.6/Win9x
and IE4.5/Mac and IE5/Win9x can even come close to claiming (and none of
these are perfect, so aren't really conformant).
   For the brave, a very nearly CSS-conformant rendering engine is
available from Netscape, in the form of the Gecko/Raptor technology
demonstration, but use it with caution.  Just because it's never eaten my
hard drive doesn't mean it won't eat yours.

--
Eric A. Meyer  -  eam3(at)po.cwru.edu  -  http://www.cwru.edu/home/eam3.html
 Hypermedia Systems Manager
 Digital Media Services                http://www.cwru.edu/dms/dms.html
 Case Western Reserve University       http://www.cwru.edu/

HWG hwg-style mailing list archives, maintained by Webmasters @ IWA