PDA

View Full Version : Top margin off in FF


shalgren
02-18-2009, 08:40 PM
Hi All -

CSS newbie here, but I'm really trying and have spent days working on this one!! Can anyone tell me why I have unwanted space at the top of this navbar in FF, but not in IE? Seems that whatever I try the margins double or it get worse than this. I've leaned not to trust what I see in Design view since it's off. BTW, I'm using CS3.

... thanks in advance for any pointers!
-----------------------------------------------------------------------

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

<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#navlinks {
background-color: #996600;
margin-left: 350px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 23px;
}
#navlinks li {
display: inline;
list-style: none;
margin-right: 0.5em;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-right: 0.75em;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #CCCC99;
font-size: 14px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCC99;
}
#navlinks li.last {
border-right-width: 0px;
}
#navlinks li a:link{
color: #CCCC99;
background-color: #996600;
text-decoration: none;
}
#navlinks li a:visited {
color: #CCCC99;
background-color: #996600;
text-decoration: none;
}
#navlinks li a:hover {
color: #996600;
background-color: #CCCC99;
}
#navlinks li a:active {
color: #996600;
background-color: #CCCC99;
}
#navlinks li a.current, #navlinks li a.current:hover, #navlinks li a.current:active{
cursor: default;
color: #FF9900;
background-color: #996600;
}
-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="navlinks">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="review.html">Services</a></li>
<li><a href="clients.html">Experience</a></li>
<li><a href="sage.html">About</a></li>
<li class="last"><a href="contact.html">Contact</a></li>
</ul>
</div>
</body>

</html>