Newbie with Alignment Issues (Chrome, Safari)

HTML & CSS
1

Hello,

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!!

CSS

#perks-footer-wrapper {
width: 978px;
min-height:50px;
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;
}

HTML

<div id=“perks-footer-wrapper”>

&lt;div id="perks-footer"&gt;

	&lt;p class="perks-footer-left"&gt;TDA Perks Program ...&lt;/p&gt;

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

&lt;/div&gt;

</div>

2

Maybe something like this would be better:


img.perks-footer-right {
float:none;
display:inline-block;
vertical-align:middle;
}
.perks-footer-right a{
display:inline-block;
vertical-align:middle;
}
3

Thanks so much, Paul! I tried your suggestion, and wasn’t able to get it to work. It gives me some ideas, though, that I’ll try out.

4

Hi Teresa,

I tested the code on your live site and it was working fine.:slight_smile:

The problem with your floated approach is that you have images floated inside anchors that are not floated so browsers are not quite sure what to do and Chrome drops the image down. Either float everything or have it all as inline. Vertical-align:middle does not apply to block elements or floats but by to inline and inline-block elements (and table-cells).

5

Paul,
Thank you so much!!! You’re correct–your suggestion works; I must have done something differently last time. Thanks for the explanation and generosity–it’s greatly appreciated…