Nav Mess up in Firefox, look right in IE

I have a nav bar look mess up when the link is too long. (see picture below)

It looks right in IE but looks mess up in firefox. I fixed it once a long time ago with another template but I couldn't figure out this time and I spend quite some time on it... I want some expert to look into this for me. Would greatly appreciated.

The Code in HTML:

<DIV id=nav>
	  <a href="">Home</a>
	  <a href="">Consultant Services</a>
	  <a href="">Selected Engagements</a>
      <a href="">Behavioral Competencies in Recruiting</a>
	   <a href="">About Us</a>
	   <a href="">Contact Us</a>
	</div>

Code (markup):

in CSS:

#nav {
PADDING-RIGHT: 0px; WIDTH: 180px; PADDING-TOP: 0px; BORDER-BOTTOM: #E7E7E7 1px solid; BORDER-RIGHT: #E7E7E7 3px solid; BORDER-LEFT: #E7E7E7 1px solid; BACKGROUND-COLOR: #ffffff; MARGIN: 2px; 
}
#nav A {
	DISPLAY: block; BORDER-BOTTOM: #E7E7E7 1px solid; COLOR: #252F35; padding:8px 0 8px 5px;
}

Code (markup):

 

The markup you show does not generate that problem. So you need to show the complete markup or, preferably, a link. In any case, this problem is because you used IE as your test bed and then checked in Firefox. IE is 11 years behind web standards. Always use a modern browser, like Firefox or anything else, to test your markup. Then look to see if/when IE screws things up.

 

I'd guess there's a height n li, and Firefox properly overflows, while IE improperly expands the li height. IIf that's true, IE8 will break also.

Like the god doctor sz, we need more info to d more than guess.

cheers,

gary

 

I'd guess there's a height on li, and Firefox properly overflows, while IE improperly expands the li height. If that's true, IE8 will break also.

Like the good doctor sz, we need more info to do more than guess.

cheers,

gary