Icon Layout in Chrome

HTML & CSS
1

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

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.

2

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="[COLOR="#FF0000"]margin: 0pt 0pt 6px; height: 32px;[/COLOR] width: 32px; [COLOR="#FF0000"]padding: 0pt; border: 0px solid rgb(255, 255, 255); overflow: hidden; display: inline-block;[/COLOR] height: 32px;"
3

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.

4

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;}

5

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

6

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)