Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Alignment for Social Icons - Chrome/Safari Specific

CSS Alignment for Social Icons - Chrome/Safari Specific

Problem

I have a client page where I have I the following that shows up great on Firefox:

http://cl.ly/0u0h1S110f2J2N2E093d (screen shot)

However on Chrome and Safari it shows up like this:

http://cl.ly/0a132U3h1G2x1W3R0043 (notice the Facebook Share button)

The code for the buttons is:


I have the following CSS that works GREAT for FF, but not on the other two browsers:

div.social div div {display: inline-block;}
div.social div div.fb {margin-bottom: 1px;}

I have tried every combination of attributes I can think of to get this to work, to no avail.

Any ideas?

Thanks!

Problem courtesy of: resonantmedia

Solution

Use vertical-align: top:

div.social div div.fb {
    vertical-align: top;
}

Working example: http://jsfiddle.net/dFt8N/

Solution courtesy of: My Head Hurts

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Alignment for Social Icons - Chrome/Safari Specific

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×