from tables to css - I need help

[Guest]

Hi,
I found this website
(http://www.keithjbrown.co.uk/vworks/design/design_2.php) researching css and
formatted a style sheet to its specs. It seemed pretty straight forward and
makes a lot more sense than the tables I'm used to. It works when I open my
site in IE, but Firefox doesn't and Netscape doesn't show any formatting! I
thought I was so close to cracking this and I'm feeling very disheartened and
very very stupid.
Could someone please take a look at my style sheet and tell me why it's not
working: The page I applied it to is http://www.thebabyhomepage.com/about.htm.

body { margin: 0px; width: 1000px; background: #CCCCFF; padding:
0px; top: 0; right: 0; bottom: 0; left: 0; font-size: 10px}
..logo { width: 1000px; height: 65px; background: #CCCCFF; }
div#logo h1 { font-family: Papyrus; font-size: 320%; text-align: center }
div#logo h2 { font-family: Verdana; font-size: 130%; text-align: center;
margin-bottom: 10px }
div#sect_nav { position: center; width: 1000px; height: 20px; background:
#CCCCFF; text-align: center; }
div#main { width: 1000px; background: #CCCCFF; font-family: Verdana;
font-size: 130%; text-align: center; margin-bottom: 20px;}
div#copyright { font-family: Tahoma, sans-serif; font-size: 90%; color:
div#336633; margin-left: 5px; margin-bottom: 20px; margin-top: 10px;
font-weight: bold; clear: both; }
div#pagelinks { position: center; left: 0px; top: 90px; width: 720px;
background: #CCCCFF; text-align: center; margin-bottom: 10px}
div#pagelinks p { font-family: Verdana; font-size: 120%; color: #8B008B;
font-weight: bold; margin-left: 5px; text-align: center; }
div#pagelinks ul { font-family: Verdana; font-size: 120%; color: #9370DB;
text-decoration: none; font-weight: lighter; list-style-type: square;
margin-top: 0px; line-height: 110%; }
div#pagelinks ul a:link { color: #4B0082; text-decoration: none }
div#pagelinks ul a:visited { color: #9370DB; text-decoration: none }
div#pagelinks ul a:active { color: #8B008B; text-decoration: none }
div#pagelinks ul a:hover { color: #4B0082; text-decoration: none }
div#mainpage { position: center; width: 600px; margin-top: 120px;
background: #CCCCFF; text-align: center}
div#mainpage p { font-family: Verdana; font-size: 100%; line-height: 150%;
margin-left: 0px; text-align: left}
div#mainpage h1 { font-family: Verdana; font-size: 110%; color: #000000;
border-bottom: solid 1px; margin-left: 0px; text-align: left }
div#mainpage h2 { font-family: Verdana; font-size: 110%; color: #000000;
margin-left: 5px; text-align: center }
div#mainpage h3 { font-family: Verdana; font-size: 110%; color: #000000;
margin-left: 0px; text-align: center }
div#table.maintable { margin: auto; background: url('i/sunbw.jpg'); }
div#table.maintable td, .maintable img { width: 10px; height: 10px; }
img { border: 0; }
div#insert { width: 240; float: center; margin-top: 30px; margin-bottom: 30px}

Thanks,
Lisl

 

[Cheryl D Wise]

Fix your HTML errors, you apparently have some nesting errors and that can
cause display problems see
http://validator.w3.org/check?uri=h...+automatically)&doctype=Inline&ss=1&verbose=1

for the 7 errors you have. You also have errors in your stylesheet see:
http://jigsaw.w3.org/css-validator/...&uri=http://www.thebabyhomepage.com/about.htm

Don't worry about the warnings other than those about font-family missing a
generic group.


--
Cheryl D Wise
FrontPage MVP
http://by-expression.com
Online Instructor led training at http://starttoweb.com
Next session starts Aug 20,2006 offers classes in CSS and Expression Web
Designer