Just working on getting my header to display correctly cross-browser. Xhtml and css validate. The navigation list displays correctly in Mozilla and Netscape, but doesn't show up at all in IE 6.0, 5.5 and 5.1.
Just can't figure this one out. Any help greatly appreciated.
CSS
body {
padding:0;
background:#fff;
color:#000;
text-align:left;
font-family:arial, verdana, helvetica, sans-serif;
font-size:76%;
line-height:130%;
}
#container {
width:990px;
margin: 0;
padding: 0;
border:0;
}
#header {
text-align: left;
position:relative;
float: left;
padding:0;
margin:0;
border: 0;
z-index: 10;
}
#topnavcontainer {
top: 18px;
left: 363px;
position: absolute;
margin:0;
padding: 0;
border: 0;
height: 18px;
text-align: left;
}
#topnavcontainer ul{
/*width:625px;*/
margin:0;
background:#dde5fb;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding:0;
height:18px;
list-style-type:none;
}
#topnavcontainer ul li {
display:block;
list-style-type: none;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#topnavcontainer ul li a {
width: 125px;
height: 18px;
background:#dde5fb;
border-right: 1px solid #000;
padding: 0;
margin: 0;
color: #000;
text-decoration: none;
display: block;
text-align: center;
HTML
<!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" xml:lang="en" lang="en">
<head>
<title>Ntira Index</title>
<style type="text/css" media="screen"> @import url(ntira.css);</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container"><div id="header"><img src="images/menulogo.gif" alt="ntira logo with main menu map" /></div>
<div id="topnavcontainer">
<ul>
<li><a href="home.htm">Home</a></li>
<li><a href="#">Logout</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Messenger</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
<div id="footer">bazzfazz</div>
</div>
</body>
</html>
Thanks in advance.
Mike