Inline UL issue

I have created an inline list for links at the bottom of a page.

The footer has a height of 25px, the font is set to 10pt. The list breaks out of the bottom of

the div. If I resize the div to say 50px, it's now in and vertically aligned to the center,

if I make the div 35px it now appears vetically aligned to the bottom.

I've tried setting margin and padding to all the elements concerned and nothin seems to

work.

Pretty basic I know! Maybe it's time for a sleep!?!

#footer
{
width:auto;
height:35px;
border-top:1px solid #333;
padding:0;
margin:0;
}

#footer li
{
list-style:none;
display:inline;
margin:0;
padding:0;
vertical-align:top;
}

#footer a
{
font-family:verdana,arial,sans-serif;
font-size:8pt;
color:#666666;
text-decoration:none;
margin:0;
padding:0;
}

#footer a:hover
{
font-family:verdana,arial,sans-serif;
font-size:8pt;
color:#d0d0d0;
text-decoration:none;
}

span.footerp
{
font-family:verdana,arial,sans-serif;
font-size:8pt;
color:#666666;
}

<div id="footer">
<ul>
<li><a href="#" alt="About">About</a> <span class="footerp">|</span></li>
<li><a href="#" alt="About">Advertising</a> <span class="footerp">|</span></li>
<li><a href="#" alt="About">Privacy</a> <span class="footerp">|</span></li>
<li><a href="#" alt="About">Terms</a> <span class="footerp">|</span></li>
<li><a href="#" alt="About">Help</a></li>
</ul>
</div>

Thanks in advance...