CSS formatting works in IE but nowhere else

[chrisLeslie]

I'm having a problem with the formatting of my site. In IE it displays as I intended but in Netscape/Firefox/Opera there are several similar formatting errors such as margins and incorrect fonts. This is my first major css venture and I'm at a loss for why it displays so differently. Any ideas or pointers on how I could correct these problems?

http://home.comcast.net/~girlchris/index.html

Here is the main style sheet I'm using:

body {
font: 78%1.5 arial, helvetica, san-serif; background-color: white;
}
#nav,#nav ul {/*all lists*/
padding: 0;
margin: 0;
border: none;

list-style: none;
line-height: 1;
font-weight: bold;
color: white;
float: left;
width: 100%;
background-color: #000066;
}

#nav a {
display: block;
width: 8em;
color: white;
text-decoration: none;
padding: 0.5em, 0, 0.5em, 0.5em;

}



#nav li{/*all list items*/
float: left;
width: 8em; /*width needed for Opera compatibility*/


}

#nav li ul{/*second-level lists*/
position: absolute;
border: solid #cccccc;
font-weight: normal;
border-width: 1.5px;
width: 8em;
margin: 0;
left: -999em; /*using left instead of display to hide menus because display:none is not read by screen readers*/

}

#nav li li {
padding-right: 1em;
width: 8em
}
#nav li ul a {
width: 8em;
width: 8em;
}
#nav li ul ul {
margin: -1.75em 0 0 8em;
}


#nav li:hover ul, #nav li.sfhover ul {/*lists nested under hovered list items */
left: auto;
background-color: #666699;

}

#nav li:hover, #nav li.sfhover { /*test */
background-color: #666666;
text-decoration: none;


}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#container {width: 73em; border: 0; background-color: white; border: 5px solid white;}
div.img {float: left;}
div.blue {float: right; background-color: #000066; height: 50px; padding: .5em; color: white; font-weight: bold;}
h1 {float: left; margin: 1.5em, 2em, .5em, 1em; color: #000066; font-size: 1.5em; width: 80%}

h2 {float: left; margin: 1em, 6em, 0, 2em; color: #000066; font-size: 1.2em; font-weight: bold; width: 80%}

/*when using right column images, put h1 and h2 in the page's code*/



ul.text {float: left; margin: 1em, 1em, 1em, 3em; font: 1em, verdana, helvetica, san-serif; color: navy;
list-style: outside; list-style-type: disc; width: 80%; padding-left: 2em;}

ol.text {float: left; margin: 1em, 1em, 1em, 3em; font: 1em, verdana, helvetica, san-serif; color: navy;
list-style-position: inside; width: 80%;}

ul.side {float: left; margin: 1em; font: .8em, verdana, helvetica, san-serif; color: navy;
list-style-type: disc; list-style-position: inside;}

p.nav {float: left; margin: 2em; padding-right: 1em;
border-right: 1px solid #cccccc; width: 20%;
font: 1 em, verdana, helvetica, san-serif;
color: navy; clear: left;}
p.nav1 {float: left; margin: 2em; padding-right: 1.1em;
border-right: 1px solid #cccccc; width: 20%;
font: 1 em, verdana, helvetica, san-serif;
color: navy;}
p.news {float: left; margin: 2em; width: 40%;
font: 1 em, verdana, helvetica, san-serif;
color: navy;}

p.text {float: left; margin: 1em, 1em, 1em, 2em;
font: 1em, verdana, helvetica, san-serif; color: #000066; }

p.textb {float: left; margin: 1em, 1em, 1em, 3em;
font: 1em, verdana, helvetica, san-serif; color: #000066; }

p.text2 {float: left; margin: 1.5em;
font: .8em, verdana, helvetica, san-serif; color: #336699;}
a.white {color: white;}
a.white:hover {color: yellow;}

div.dkblue {float: left; background-color: #000066; height: 70px; width: 160px; clear: left; margin: 0;}
div.ltblue {float: left; background-color: #666699; height: 70px; width: 50%; margin: 0, 1em, 0, 1em;}
div.grey {float: left; background-color: #cccccc; height: 70px; width: 29%; margin: 0;}
div.spacer {clear: both;}



div.textcontainer /*this is the main text column*/{float: left; font: 1em, verdana, helvetica, san-serif; color: navy; width: 50%;}
div.textcontainer2 /*this is the right column*/ {float: left; width: 20%; font: 1em, verdana, helvetica, san-serif;
margin: 3em, 1em, 1em, 3em; }

div.textcontainer3 /*this is the right column for images*/ {float: left; width: 20%; font: 1em, verdana, helvetica, san-serif;
margin: 17em, 1em, 1em, 3em; }

#sidetext {float: right; padding-left: 1.1em;
border-left: 1px solid #cccccc;
font: .8 em, verdana, helvetica, san-serif;
color: #000066}
#navcontainer { width: 160px; clear: left; float: left; height: 400px; background: #cccccc;}
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #cccccc;
border-bottom: 1px solid #666699;
}
#navcontainer a.arrow {
background: url(rightarrow.gif) center right no-repeat;}

#navcontainer a.arrow:hover {
background-color: #cccccc; color: #000066;}

#navcontainer a:link, #navlist a:visited
{
color: #000066;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #666699;
color: #fff;
}

[Paul O'B]

Hi,

The main problem with the small text is that you have put a space in between the unit and the size/ e,g, 1 em instead of 1em.

  p.nav {float: left; margin: 2em; padding-right: 1em; 
	border-right: 1px solid #cccccc;  width: 20%;
	font: 1 em, verdana, helvetica, san-serif;
	color: #000066; clear: left;}
  p.nav1 {float: left; margin: 2em; padding-right: 1.1em; 
	border-right: 1px solid #cccccc;  width: 20%;
	font: 1 em, verdana, helvetica, san-serif;
	color: #000066}
  p.news {float: left; margin: 2em; width: 40%;
	font: 1 em, verdana, helvetica, san-serif;
	color: #000066}

Close the spaces: e.g.

  p.nav {float: left; margin: 2em; padding-right: 1em; 
	border-right: 1px solid #cccccc;  width: 20%;
	font: 1em, verdana, helvetica, san-serif;
	color: #000066; clear: left;}
  p.nav1 {float: left; margin: 2em; padding-right: 1.1em; 
	border-right: 1px solid #cccccc;  width: 20%;
	font: 1em, verdana, helvetica, san-serif;
	color: #000066}
  p.news {float: left; margin: 2em; width: 40%;
	font: 1em, verdana, helvetica, san-serif;
	color: #000066}

The text isn't floating alongside the image because the h1 is floated and has no width therefore it defaults to 100% and won't fit. Floats should have widths unless they are floated images when they take on intrinsic width.

The rest of the differences are box model related and you should read the fAQ sticky thread for a full explanation and solution.

Hope that helps.

Paul

[chrisLeslie]

Paul,

Thanks for pointing me in the right direction!

Chris