CSS: Border not correct in Firefox...

[MattDavid.Hall]

Greetings everyone!

I am developing a new site and am having some issues with my navigation menu...If you would be so kind to take a look at what is happening I would greatly appreciate it.

The two links show what is going on. The first link is what my border looks like in Firefox; notice the gap at the top and bottom between my solid border and my dotted border. This shouldn't be like that. Border in Firefox (2.0).

This image shows how it looks in IE. This is how it should look in FF but obviously it does not.
Border in IE (7.0).

Here is the HTML that controls the menu:

	
<div id="navcontainer">
<ul id="navitems">
<li><a href="#">Corporate Info</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact Info</a></li>
<li><a href="#">Request Quote</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>

And here is the CSS:

#navcontainer {
	position:relative;
	left:30px;
	top:8px;
	width:115px;
	padding:2px;
	border:1px #6d6d55 solid;
	text-align:center;
	}

#navitems {
	margin-left:0px;
	padding-left:0px;
	list-style:none;
	}

#navitems li {
	background-image:url(../imgs/navigation/arrow.gif);
	background-repeat:no-repeat;
	background-position:0.3em;
	}

ul li a {
	display:block;
	padding:2px;
	border:1px #86866e dotted;
	}

#navcontainer a:link, #navitems a:visited {
	color:#000000;
	text-decoration:none;
	}

#navcontainer a:hover {
	background-color:#6d6d55;
	background-image:url(../imgs/navigation/arrow-over.gif);
	background-repeat:no-repeat;
	background-position:0.5em;
	text-decoration:none;
	}

My menu is also wrapped in a main container:

#container {
	position:relative;
	margin:0 auto;
	width:800px;
	min-height: 100%;
	height:100%;
	}

If someone could take a look at all of that I would greatly appreciate it. I have tried nearly all day to figure out why that gap is in FF but not IE. As I mentioned above I would like it to look as it does in IE.

Thanks in advance for your efforts!

MDH

[stef686]

Only thing I can think of is giving the #navitems a margin: 0

[MattDavid.Hall]

Originally Posted by stef686

Only thing I can think of is giving the #navitems a margin: 0

Voila! That did the trick. I changed margin-left: to just margin: since I do not need margin any where else in #navitems.

Thanks for your quick reply!

[stef686]

No probs, glad to help