CSS Sprite of Icons showing data vertically repeated

[rombeet]

Can anyone help me fixing a CSS sprite issue. I’ve done a sprite but it shows repeated icons in vertical shape. But I want only single horizontal icons.

<style>
#socialicon {
float:left;
width:100px;
height:18px;
padding:2px 0;
}
#socialicon ul,
#socialicon li {
padding:0;
margin:0;
list-style:none;
}
#socialicon li {
margin:5px 5px;
}
#socialicon i {
display:block;
text-indent:-9999px;
width:85px;
height:16px;
background-image:url(https://lh3.googleusercontent.com/-hix33Da8scw/VqI4ja1DrEI/AAAAAAAAO0c/0pjGZYFMKJQ/s80-Ic42/sprite.png);
background-position:-1px 0;
background-repeat:no-repeat;
position:relative;
}
#socialicon i:active {
top:1px;
}
#socialicon .icon-user-check {
background-position:2px 0;
}
#socialicon .icon-table {
background-position:-18px 0;
}
#socialicon .icon-bubbles2 {
background-position:-38px 0px;
}
#socialicon .icon-price-tags {
background-position:-60px;
}
</style>
<div id='socialicon'>
<ul>
<li><i class='icon-user-check' title='Posted By'></i></li>

<li><i class='icon-table' title='Time'></i></li>

<li><i class='icon-bubbles2' title='Comments'></i></li>

<li><i class='icon-price-tags' title='Labels'></i></li>

</ul>
</div>

How to fix it with removing vertically duplicate icons.Thanks for help.
here is link https://jsfiddle.net/8nh16vxm/

[PaulOB]

When you use sprites you must ensure the element that you apply them to matches the width and height of each little image within the main image.

You set the width to 85px which means all sprites will show. You probably need around 22px.

e.g.

#socialicon i {width:22px}

Indeed you may need to size each item specifically if there are artefacts showing from that 22px.

[rombeet]

Thanks for suggestion. I’ve dont it to 22px but the main problem is still there because i need a horizantal sprite. Your suggestion remove duplicate icons but it still vertical. How to convert it… Note: link was updated

[ronpat]

@rombeet

i need a horizantal sprite.

Your sprite image is already horizontally arranged.

Your code is rendering them vertically on the page.

I would suggest that you delete the width from #socialicon. It is being floated so it will naturally be no wider than its contents.

You can then either float the list items containing the boxes for the sprites,

or assign display:inline-block to the list items.

I frequently use outlines to see how boxes are arranged on a page.
The red dotted outline is assigned to #socialicon
The magenta outline is assigned to i.

[rombeet]

Thanks it worked