Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

horizontal position with css sprites

aligns vertical

10:56 pm on Apr 24, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Nov 20, 2009
posts: 98
votes: 0

Hi guys, I'm new to usign sprites, I'm trying to achieve a horizontal share bar with a sprite.
Now the image itself is 192px width by 32px height but when i use this css and html it shows vertically.

#ceramic-blogger_png{height:32px;width:32px;background-position:0 0;}
#ceramic-facebook_png{height:32px;width:32px;background-position:-32px 0;}
#ceramic-google_png{height:32px;width:32px;background-position:-64px 0;}
#ceramic-rss_png{height:32px;width:32px;background-position:-96px 0;}
#ceramic-twitter_png{height:32px;width:32px;background-position:-128px 0;}
#ceramic-yahoo_png{height:32px;width:32px;background-position:-160px 0;}

<a class="sprites" id="ceramic-blogger_png" href="#"></a> 

<a class="sprites" id="ceramic-facebook_png"></a>

<a class="sprites" id="ceramic-google_png"></a>

what am i missing?

any help much appreciated.

Edit: added float:left and its fine.
Are there any browser issues to look out for?
2:04 am on Apr 25, 2012 (gmt 0)

New User

joined:Apr 15, 2012
posts: 7
votes: 0

Yes, floats could potentially mess up the layout of your web page if not cleared. So add
overflow: hidden
to the containing element of these links, or insert an empty element with
. The latter is considered a bad practice by some developers, but use whichever makes better sense to you.
4:47 pm on Apr 25, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

It's only "bad practice" because the point is to separate content from presentation in your page code, and a clearing element is an otherwise empty element used to alter presentation - therefore, it's superfluous so if there's a way to avoid adding it, you should. :-) To clarify the previous points,

1. You use overflow:hidden on the **parent** container to shirnk wrap/contain all floated children,
2 add a clearing element AFTER all floated elements to clear them and prevent following elements from floating around the floated element,
3. or float the parent container too - this will cause it to "shrink wrap" and contain all floated children.

With the third solution, you may have to clear it or use #1 or #2 on THAT container's parent. :-)

when i use this css and html it shows vertically.

What does? The anchors themselves or the backgrounds inside the anchors?

If it's the anchors themselves, more info is needed. If it's an LI you're floating, LI's are inline elements by default and you've got block elements inside them. You need to set the display of the LI's too. If you do this, make sure you set the width of the li's to 32px like your anchors, and also set a width the the parent UL.

If you're using them raw as shown (which you shouldn't,) make sure the parent container has a width set to it that's wide enough to accept the width of all the icons with padding and margins.

If it's the backgrounds giving you trouble: You have the basic elements for sprit-ing, and the float has nothing to do with it. :-) You've set the display of the anchors to block, background image/position/repeat is fine, the only thing I'd add is to simplify the .sprite shorthand and since they're all the same width and height, move that into the base .sprite code:

background: transparent url(images/sharesprite.png) no-repeat;


I'll get to why I added the bolded parts in a minute. The rest of your selectors follow without the width and height:

#ceramic-blogger_png{background-position:0 0;}
#ceramic-facebook_png{background-position:-32px 0;}
#ceramic-google_png{height:32px;width:32px;background-position:-64px 0;}
#ceramic-rss_png{background-position:-96px 0;}
#ceramic-twitter_png{background-position:-128px 0;}
#ceramic-yahoo_png{background-position:-160px 0;}

So what you have is a 32 px X 32 px "window" you're moving the background around in. By your positions, I'm presuming your icons are laid out in a strip, so I don't see anything that's incorrect - this should work. You likely have some other CSS following this chunk that is overriding these selectors - like

a { display:inline; }

That would kill it for sure. :-) Examine it in the FireFox Firebug extension, there's no reason this on it's own won't work. Another is that ID's need to be unique, make SURE there are no other elements on the page with these same ID's.

What you may need to do is add specificity to your selectors to avoid other selectors from overriding what you have here.

a#ceramic-blogger_png{background-position:0 0;}

or be REALLY specific

#header #nav ul li a#ceramic-blogger_png{background-position:0 0;}

Something along those lines - there's many ways it can go wrong, Firebug will tell you what's up.

I would change your links with REAL content, and the bolded CSS above would allow you to do so:

<a class="sprites" id="ceramic-blogger_png" href="#">Blogger</a>

<a class="sprites" id="ceramic-facebook_png">Facebook</a>

<a class="sprites" id="ceramic-google_png">Google Plus</a>

Why? Screen readers will now have content to read, and the in-link text may establish relevance to search engines. Empty elements means you've got nothing to say. :-)
9:56 pm on Apr 26, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Nov 20, 2009
posts: 98
votes: 0

thanks for the insight guys, rocknbil as always you the man!