Need help with horizontal css nav

[webmiss]

Hi All,

I'm having a problem with what should be a simple horizontal css navigation. It works fine in FireFox, but looks weird in IE8.

If you have IE8, visit this link: http://www.garagesbysunstate.biz You will notice the contact nav link and background is positioned differently than the rest.

The following is the css code I used to create it:
#nav-bar{
float:left;
width:900px;
height:35px;
background-image:url(images/navbar_bg.gif);
border-bottom: 2px solid #000000;
}

#nav-bar ul{
list-style-type: none;
display:inline;
}

#nav-bar ul li{
display:block;
float:left;
width:149px;
height:35px;
background-image:url(images/link_bg.gif);
text-align:center;
}

#nav-bar ul li a{
font-size:.80em;
text-align:center;
font-weight:bold;
font-family:tahoma, arial;
color:#000000;
text-decoration:none;
}

#nav-bar ul li.link a{
font-size:.80em;
text-align:center;
font-weight:bold;
line-height:1.5;
font-family:tahoma, arial;
color:#000000;
text-decoration:none;
}

#nav-bar ul li a:hover{
text-decoration:none;
color:#1A00FF;
}

I can't figure out why the last link is positioned halfway below the others. If anyone has any suggestions, I'd really appreciate it.

Here is the code for the navigation bar:
<div id="nav-bar">
<ul>
<li class="link"><a href="http://www.garagesbysunstate.biz">Home</a></li>
<li class="link"><a href="about_us.html">About Us</a></li>
<li class="link"><a href="faq.html">FAQs</a></li>
<li><a href="testimonies.html">Customer<br>Testimonies</a></li>
<li class="link"><a href="photoalbum">Photo Gallery</a></li>
<li class="link"><a href="contact_us.html">Contact Us</a></li>
</ul>
</div>

Thanks for any and all feedback.

webmiss

[webmiss]

Hey All,

I fixed my own problem. Went back to some tutorials and re-did the css. It is working fine now in IE8 and Firefox.

Kind Regards,

webmiss