OK,

So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks!

URL: http://www.raisetheratesottawa.org/xhtml/

==========
Style Sheet:
==========

HTML {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}


#upper {
width:700px;
margin:0px auto;
text-align:left;
padding: 0px;
border: 5px solid #FFFFFF;
BACKGROUND-COLOR: #000000;
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}


/* Horizontal nav */

#menu {
width:700px;
margin:0px auto;
padding: 0;
}

#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
}

#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#menu ul li a {
background: #000000;
width: 175px;
/* was 'height: 2em; */
height: 24px;
padding: 0;
/* was 'margin: 0 0 10px 0;
' this affects the margin between upper menus*/
margin: 0 0 0 0;
color: #FF0000;
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
/* was 'line-height: 2em; */
line-height: 24px;
/* was 'font-size: x-small;
' */
font-size: 10px;
font-size: 10px;
/* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/
}




#menu ul li#one {
width: 46px;
}
#menu ul li#two a {
width: 154px;
}
#menu ul li#three a {
width: 105px;
}
#menu ul li#four a {
width: 85px;
}
#menu ul li#five a {
width: 56px;
}
#menu ul li#six a {
width: 57px;
}
#menu ul li#seven {
width: 147px;
}


#menu ul li a:hover {
color: #000000;
background: #FF0000;
}

#menu a:active {
background: #c60;
color: #fff;
}


#content {
width:700px;
margin:0px auto;
text-align:left;
padding:0px;
border:5px solid #FFFFFF;
background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC;
}


==========
Page:
==========


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Test</title>

<link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" />

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="ROBOTS" content="No Index" />
<meta name="Copyright" content="Copyright (c) 2004" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="help" href="about.php" title="Site info." />

<meta name="Rating" content="General" />
<meta name="revisit-after" content="2 Days" />
<meta name="doc-class" content="Living Document" />


</head>

<body>

<div id="upper">

<div id="header">
<img src="graph/top-right2.jpg" width="700" height="78" alt="" />
</div>

<div id="menu"><ul>
<li id="one">&nbsp;</li>
<li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li>
<li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li>
<li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li>
<li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li>
<li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li>
<li id="seven">&nbsp;</li>
</ul></div>
</div>


<div id="content">
<p>Here is some text</p>
<p>Here is some more text </p>
</div>



</body>
</html>