Cant get divs to move down

HTML & CSS
1

I have a client that uses 4 social media outlets plus 1 not so popular one and two custom links that he wants all to look the same. The first four are no problem because they are all represented in the font-awesome series. (facebook, LinkedIn, Twitter, and youTube) However the last 3 are driving me nuts. Of course these all have rollover states and the fonts are easy, the custom ones I have created background images for. (One image, two states, top and bottom. ) So I am just shifting the background image up to show the hover state. All wroks just fine but for some reason, these 3 custom icons are about 4 pixels higher than the previous 4 and I can not get them to move down. I wold think a simple “margin-top” would do the trick but nope.

What am i doing wrong?

http://splitlightdesigns.com/osu/ (See social icons top right)

Many thanks,
Houston

2

Ideally you’d use the same structure over all the different icons, although the easiest way would be to set the vertical alignment.

a [class^="x-icon-"], a [class*=" x-icon-"] { vertical-align:top;}
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.