vertical alignment

[zcurtis]

I am having difficulty aligning elements vertically in <div> areas. I have tried using vertical-align: middle, howver that doesn't seem to work. I know I can specify margins and padding, however ths is very time consuming for the number of places this would have to be done.

Here is an example below of trying to vertical align <a> or <img>. Full source at www.populus.com/v5/services.html

Thanks.

<div id="topNav">
<a href="services.php"><img class="topIndent" src="img/nav/top_services_sel.jpg" width="106" height="12" alt="Research Services" /></a>
<a href="clients.php"><img src="img/nav/top_clients_unsel.jpg" width="42" height="12" alt="Clients" /></a>
<a href="case_hist.php"><img src="img/nav/top_ch_unsel.jpg" width="84" height="12" alt="Case Histories" /></a>
<div id="topNavLinks">
<a href="site_map.php">Site Map</a>
<a href="contact.php">Contact Us</a>
<a href="legal.php">Legal</a>
</div>
</div>

#topNav {position: absolute; top: 70px; left: 0px; width: 100%; height: 40px; background-color: #4b4b4b;}
/* #topNav a {margin-top: 14px;} */
#topNav a {vertical-align: middle;}
#topNav img, a {border: 0px;}
#topNavLinks {position: absolute; top: 0px; right: 0px; height: 40px; padding: 12px 20px 0 0;}
#topNavLinks a {color: #cccccc; font-weight: normal;}

[Fang]

vertical-align is not fully supported in IE and is only applies to inline elements(<a> and <img> ok).
In Netscape there is a problem with inline content, text with images, see http://devedge.netscape.com/viewsource/2002/img-table/ and http://www.draac.com/tabletricks.html
The doctype used is also relevant, wether in standard or quirk mode, see: http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html