Icon Layout in Chrome

[keithck73]

I have Facebook and Twitter icons on this page that aren't lined up in Chrome:

http://www.spsact.org

Sometimea they are lined up but if you refresh the page they go out of alignment again.

This looks fine in Safari and Firefox.

Any help would be appreciated. Thanks.

[ralph.m]

Just a guess here, but you have more styles that you need on the image inside the <a>. Try removing the stuff in red:

style="margin: 0pt 0pt 6px; height: 32px; width: 32px; padding: 0pt; border: 0px solid rgb(255, 255, 255); overflow: hidden; display: inline-block; height: 32px;"

[keithck73]

Thanks for the suggestion. I took everything out but it didn't fix the issue. I added back in the border style. Otherwise there is a white border around the images.

Just a guess here, but you have more styles that you need on the image inside the <a>. Try removing the stuff in red:

style="margin: 0pt 0pt 6px; height: 32px; width: 32px; padding: 0pt; border: 0px solid rgb(255, 255, 255); overflow: hidden; display: inline-block; height: 32px;"

[RyanReese]

Try floating them instead. I did about 20 refreshes and it didn't break once after trying it.

#sidebar p{overflow:hidden;}
#sidebar_top p a{float:left;}

[keithck73]

Yes! Thank you! I checked on 3 browsers and it's back to normal now. Thank you.

[RyanReese]

You can also remove the display:inline-block along with some other things Ralph told you to add. Remove one or two at a time to see which ones you actually need (if you aren't sure)