Welcome to WebmasterWorld Guest from 3.92.92.168

Forum Moderators: open

Message Too Old, No Replies

HELP! Problem with vertical alignment in a <ul>

vertical alignment with ul in firefox

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

New User

10+ Year Member

joined:Aug 19, 2008
posts:2
votes: 0


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

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

New User

10+ Year Member

joined:Aug 19, 2008
posts:2
votes: 0


Sorry...

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

adam