Hello experts!!
The top menu navigation bar displays perfectly in IE, but does not
display properly in Mozilla or Netscape :
http://checkeredshirt.com/textonly.html
For some reason the non-IE browers are forcing the top navigation menu
to dislpay "staggered" after the the first <ul><lielement.
Can anyone see why this is happening ?
Any guidance is very appreciated.
HTML :
<div id="theheader">
<div id="topbutton">
<ul>
<li id="current"><a href="">Home</a></li>
<li><a href="">About the SCC</a></li>
<li><a href="">NSS</a></li>
<li><a href="">News & Events</a></li>
<li><a href="">Participate</a></li>
<li><a href="">Programs & Services</a></li>
<li><a href="">Publications</a></li><li><a
href="">StandardsStore.ca</a></li>
</ul>
</div<!-- end top button -->
</div<!-- end the header -->
CSS :
#theheader{
height: 142px;
background:transparent;
background: url('singleheader.gif') no-repeat;
width: 744px;
border: none;
}
#topbutton {
width: 620px;
height: 40px;
padding-left: 160px;
padding-top:30px;
margin-bottom: 0.5em;
margin-left: 0em;
font-family: 'Geneva', 'Arial', sans-serif;
font-variant: small-caps;
font-size: 10px;
text-align: center;
border: none;
}
#topbutton ul {
margin: 0;
padding: 0;
border: none;
list-style: none;
}
#topbutton li {
color: #000;
background: transparent;
display: inline;
border: none;
padding-right: 2px;
padding-left: 2px;
padding-top: 2px;
padding-bottom: 20px;
font-size: 10px;
font-style: bold;
font-variant: small-caps;
font-family: 'Geneva', 'Arial', sans-serif;
}
#topbutton li a {
float: left;
width: 70px;
height: 25px;
padding-right: 2px;
padding-left: 2px;
padding-top: 2px;
padding-bottom: 20px;
color: #000;
background-color: transparent;
text-decoration: none;
font-size: 10px;
font-style: bold;
font-variant: small-caps;
font-family: 'Geneva', 'Arial', sans-serif;
}
html>body #topbutton li a {
float: left;
width: 70px;
height: 25px;
}
#topbutton li a:hover {
border: 1px solid rgb(224,224,224);
color: #000;
background: transparent;
display: inline;
padding-right: 1px;
padding-left: 1px;
padding-top: 2px;
padding-bottom: 20px;
font-size: 10px;
font-style: bold;
font-variant: small-caps;
font-family: 'Geneva', 'Arial', sans-serif;
}
#topbutton li a:current {
border: 1px solid #ccc;
padding-right: 2px;
padding-left: 2px;
padding-top: 2px;
padding-bottom: 20px;
background-color: transparent;
color: #000;
font-variant: small-caps;
font-size: 10px;
font-style: bold;
font-family: 'Geneva', 'Arial', sans-serif;
}