HELP! Problem with vertical alignment in a <ul>

vertical alignment with ul in firefox

[brain_fried]

Hey guys, I have a problem. I am trying to create a horizontal navigation bar using an unordered list. In the 'cells' I have an image, text, image, text and so on.
In IE I can get the text cells to align vertically in the middle and therefore online with the middle of the image on its left. In firefox though the text stays on the bottom of the cell and will not adjust no matter what I have tried up2 now.

here is the code:

CSS

#NAVIGATIONBAR {
background-image:url('images/NavigationBarBG.png');
width:970px;
height:52px;
margin-top:20px;
position:absolute;
z-index:1;
padding-left:0px;
padding-top:0px;
}

#inline-list {
margin-top: -15px;
width: 100%;
padding-left: 0px;
font-family: Verdana, sans-serif;
padding-bottom:20px;
z-index:3;
height:61px;
}

#inline-list p {
display: inline;
}

#inline-list ul, #inline-list li {
display: inline;
margin-right: 0px;
color: #fff;
font-weight: bold;
font-size:0.8em;
vertical-align:top;
}

HTML

<div id="NAVIGATIONBAR">

<div id="inline-list">
<ul>
<li><a href="index.htm"><img src="images/HomeIcon.png" alt="Home"></img></a></li>
<li><a href="index.htm">Home</a></li>
<li style="margin-right:40px;"></li>
<li><a href="AboutUs.htm"><img src="images/AboutUsIcon.png" alt="About Us"></img></a></li>
<li><a href="AboutUs.htm">About Us</a></li>
<li style="margin-right:40px;"></li>
<li><a href="Portfolio.htm"><img src="images/PortfolioIcon.png" alt="Portfolio"></img></a></li>
<li><a href="Portfolio.htm">Portfolio</a></li>
<li style="margin-right:40px;"></li>

<li><a href="Publishing.htm"><img src="images/PublishIcon.png" alt="Publishing"></img></a></li>
<li><a href="Publishing.htm">Publishing</a></li>
<li style="margin-right:40px;"></li>

<li><a href="News.htm"><img src="images/NewsIcon.png" alt="News"></img></a></li>
<li><a href="News.htm">News</a></li>
<li style="margin-right:40px;"></li>
<li><a href="ContactUs.htm"><img src="images/ContactUsIcon.png" alt="Contact Us"></img></a></li>
<li><a href="ContactUs.htm">Contact Us</a></li>
</ul>
</div>

</div>

Any help would be greatly appreciated.

adam

[brain_fried]

Sorry...

In the #inline-list ul the vertical alignment is actually set to middle.

adam