cosmo_canuck wrote:
I'm wondering why my content and footer tables in this layout don't
match the header and menu - even though they're also set to 600 pixels
- both the CSS div's and the tables themselves. I can't see any
difference between the top image and menu tables, and the content and
footer. Other than that the latter two don't have images stretching
them to their full 600 px width.... hmm...
It's mostly because of the weird mash of CSS and table-based/tag-soup
layout. Use CSS for styling, not tables.
The tables can be completely removed. They offer nothing except
increased bandwidth. The menu can be easily replaced with a <ul>.
See <http://css.maxdesign.com.au/listamatic/>.
Finally, use HTML 4.01 Strict. Transitional was only for migrating
legacy code to 4.01, then to Strict which disallows many of the attributes
you are using.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Try this CSS. It styles the DIVs, not the tables:
p {}
tr,td { text-align:left; border: 0; padding: 0;}
table { width: 100%; }
table.table1 { }
#title, #menu, #content, #footer {
border: 1px black solid;
width: 600px;
margin-left:auto;
margin-right:auto;
}
#title, #menu {
border-top: 0;
border-bottom: 0;
}
#content, #footer { border-top: 0; }
#title img { vertical-align: bottom; }
#menu td { text-align:center; }
#content td, #footer td { padding: 0.5em; }
#content { background: #fff; }
#footer { background-color: gray; }
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
