Hi folks,
I'm working on a page and trying to work out the CSS box model, but getting terribly confused.  
I've done up a simplification of the page that I'm working on at 
http://www.iteu.gla.ac.uk/testtable.html

On this page, I'm using a three column layout with a navbar in the leftmost cell, content in the 
middle cell and a 'quicklinks' bar in the rightmost cell.  I want to use CSS to draw vertical lines 
delimiting the content table, so I just added the following lines to my stylesheet:

td.content {
border-left: 1px solid black;
border-right: 1px solid black;
...
}

This works fine except that it backs on to the cells on either side of it (which have nested tables in 
them) exactly and it doesn't look particularly good.  I tried to work around this by setting the 
margin of the content cell, which (according to the W3C spec at http://www.w3.org/TR/REC-
CSS2/box.html#box-margin-area) is supposed to be *outside* the border, but this doesn't have 
any effect at all.  I guess that I must be misinterpreting the box model somewhere, but I can't see 
where.

I could always work around this by putting a blank cell on either side of the content cell, but a) this 
makes the page harder to understand, b) I'm lazy enough to not want to go hunting around in 
include files to update colspans and c) I'd rather do it the 'proper' way in CSS.

TIA,
Raj.
PS: Please CC me directly since I'm on the digest
-- 
Rajnish Bhaskar
r.bhaskar(at)compserv.gla.ac.uk, http://lordofthemoon.com
IT Education Unit, University of Glasgow
http://www.iteu.gla.ac.uk/
--
It's a rum old world all right.  But you've got to have a laugh,
haven't you?
	-- Terry Pratchett (Didactylos, Small Gods).

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA