Forum Moderators: open

Message Too Old, No Replies

HELP! Problem with vertical alignment in a <ul>

vertical alignment with ul in firefox

         

brain_fried

11:16 am on Aug 19, 2008 (gmt 0)

10+ Year Member



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

11:18 am on Aug 19, 2008 (gmt 0)

10+ Year Member



Sorry...

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

adam