I'm trying to make [Twitter, FB] icons in my footer behave like inline elements, but they don't line up in Chrome and Safari. They render fine in Explorer and Firefox.

The page is located at: http://tda.org/displaycommon.cfm?an=1&subarticlenbr=111

The relevant CSS and markup follow. Any insight would be greatly appreciated!!


#perks-footer-wrapper {
width: 978px;
clear: both;
border-top: 1px solid #dadada;
width: auto;
margin: 30px 0 0 0;
padding: 0 15px 0 15px;
vertical-align: middle;
text-align: left;

#perks-footer {
margin-top: 18px;

#perks-footer .perks-footer-left {
float: left;

#perks-footer .perks-footer-right {
float: right;

#perks-footer .perks-footer-right img {
border: none;
padding: 0 5px 0 5px;
height: 18px;
vertical-align: top;

#perks-footer p {
padding: 0 0 0 0;

<div id="perks-footer-wrapper">

<div id="perks-footer">

<p class="perks-footer-left">TDA Perks Program ...</p>

<p class="perks-footer-right">
<a href=...">Subscribe to eNewsletter</a> &nbsp; &nbsp;|&nbsp; &nbsp;
Join Perks on Facebook and Twitter! &nbsp;
<a href="..."><img class="perks-footer-right" src="..."/></a>
<a href="..."><img class="perks-footer-right" src="..."/></a>