Having a hard time with CSS Sprites!!! Any Much Needed Help Appreciated

**Jerrell_B** · 08-07-2012, 08:20 AM

I am attempting to place sprites in front of its corresponding anchor/link tag(s) however the sprite(s) are not appearing. I'm not sure what I am doing wrong but any help and explanation is appreciated. I have attached the sprites.gif. Thank You.

HTML code:

Code:

 
<ul class="postmetadata clearfix">
	<li><a class="post-comment" href="#" title="post-comment">Post a Comment</a</li> |
	<li><a class="email" href="#" title="email">E-mail</a></li> |
	<li><a class="print" href="#" title="print">Print</a></li> | 
	<li><a class="share" href="#" title="share">Share</a></li> |
	<li><a class="large-type" href="#" title="large-type">Large type</a>  </li>
				</ul>

CSS code:

Code:

ul.postmetadata li{
	list-style-type: none;
	font-size: 12px; 
}

ul.postmetadata li a {
	background: url('img/sprites.gif')top left;
	background-repeat: no-repeat;
	display: block;
}

 li a.post-comment{
	background-position: 0 -624px;
	height: 12px;
	width: 11px;
}

**bionoid** · 08-07-2012, 08:43 AM

A few corrections/additions:

Code:

ul.postmetadata li{
	list-style-type: none;
	font-size: 12px;
}

ul.postmetadata li a {
	background-image: url(img/sprites.gif);
	background-repeat: no-repeat;
	padding-left: 16px;
	height: 20px;
	display: block;
}

li a.post-comment{
	background-position: 0 -624px;
}

li a.email{
	background-position: 0 -847px;
}

Code:

<ul class="postmetadata clearfix">
	<li><a class="post-comment" href="#" title="post-comment">Post a Comment</a></li> |
	<li><a class="email" href="#" title="email">E-mail</a></li> |
	<li><a class="print" href="#" title="print">Print</a></li> |
	<li><a class="share" href="#" title="share">Share</a></li> |
	<li><a class="large-type" href="#" title="large-type">Large type</a>  </li>
</ul>

**Jerrell_B** · 08-07-2012, 09:38 AM

Hi bionoid,

Thank you for your help. The sprites are still not appearing next to the corresponding links. I have since removed many of the sprites since I did not need all of them. The new sprite has been attached.

I tried your revised code but unfortunately the sprites are still not showing. I am using HTML 5 Boiler Template starter template not sure if that has to do with the icons not appearing?

Here is my current code in attempts to get this working. Any suggestions are welcome and appreciated. Thanks again!

html code

Code:

<ul class="postmetadata clearfix">
					<li><a class="post-comment" href="#" title="post-comment">Post a Comment</a></li> |
					<li><a class="email" href="#" title="email">E-mail</a></li> |
					<li><a class="print" href="#" title="print">Print</a></li> | 
					<li><a class="share" href="#" title="share">Share</a></li> |
					<li><a class="large-type" href="#" title="large-type">Large type</a></li>
				</ul>

css code

Code:

ul.postmetadata li{
	list-style-type: none;
	font-size: 12px; 
}

ul.postmetadata li a {
	background: url("img/sprites.png") no-repeat top left;
	padding-left: 16px;
	padding-right: 5px;
	text-decoration: none;
    color: #202020;
    font-size: 12px;
    font-family: sans-serif, Arial,"MS Trebuchet";
}

li a.post-comment{background-position: 0px 0px;
 				   width: 13px; height: 13px;			  
} 

li a.email{background-position: 0px -63px;
 				   width: 13px; height: 13px;
}

li a.print{background-position: 0px -126px;
 				   width: 13px; height: 13px;
}

li a.share{background-position: 0px -189px;
 				   width: 13px; height: 13px;
}

li a.large-type{background-position: 0px -252px;
 				   width: 13px; height: 13px;
}

**bionoid** · 08-07-2012, 09:55 AM

Assuming your image is in the right place, this code works in FF, IE and Chrome using the new sprite image:

Code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>CSS Sprite</title>

		<style type="text/css">

			ul.postmetadata li{
				list-style-type: none;
				font-size: 12px;
			}

			ul.postmetadata li a {
				background-image: url(img/sprites.png);
				background-repeat: no-repeat;
				padding-left: 16px;
				padding-right: 5px;
				text-decoration: none;
				color: #202020;
				font-size: 12px;
				font-family: sans-serif,Arial,"MS Trebuchet";
			}

			li a.post-comment{
				background-position: 0 0px;
				/*width: 13px; height: 13px;*/
			}

			li a.email{
				background-position: 0 -63px;
				/*width: 13px; height: 13px;*/
			}

			li a.print{
				background-position: 0 -126px;
				/*width: 13px; height: 13px;*/
			}

			li a.share{
				background-position: 0 -189px;
				/*width: 13px; height: 13px;*/
			}

			li a.large-type{
				background-position: 0 -252px;
				/*width: 13px; height: 13px;*/
			}

		</style>

	</head>
	<body>

		<ul class="postmetadata clearfix">
			<li><a class="post-comment" href="#" title="post-comment">Post a Comment</a></li> |
			<li><a class="email" href="#" title="email">E-mail</a></li> |
			<li><a class="print" href="#" title="print">Print</a></li> |
			<li><a class="share" href="#" title="share">Share</a></li> |
			<li><a class="large-type" href="#" title="large-type">Large type</a></li>
		</ul>

	</body>
</html>

**Jerrell_B** · 08-07-2012, 12:01 PM

You were right I was not locating the sprites.png correctly it works when i do ('../img/sprites.png').

However only the first sprite icon is appearing next to all the links... how can place the sprite / link correspondingly ?

Thanks.

**bionoid** · 08-07-2012, 12:14 PM

Please go through the post I previously submitted #4, and compare the css styles to yours.
I had the sprites being displaying correctly for each link.

**Jerrell_B** · 08-07-2012, 12:23 PM

IT IS WORKING PERFECTLY!!! Thanks for all your help Bionoid!

Thread: Having a hard time with CSS Sprites!!! Any Much Needed Help Appreciated

Thread Tools

Display

Having a hard time with CSS Sprites!!! Any Much Needed Help Appreciated

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions