Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Image CSS "Sprites" 2

Status
Not open for further replies.
youradds

youradds

Programmer
Jun 27, 2001
817
GB
Hi,

I've been having a play around with CSS Sprites (trying to speed up my site)

I found a few good tutorials, including this one:


However, when I try and impliment the same method, it doesn't work for me :/

The image I'm using is:
..and the HTML:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>foo</title>

<style>
	.sprite {
		background: url(images_joined.gif);
	}
	
	.translate { 
		background-position: -175px 0;
		width: 160px;
		height: 30px;
	}

</style>

</head>

<body>

<div class="sprite translate"></div> <!-- works -->

<img src="transparant.gif" class="sprite translate" alt="test"> <!-- doesn't work -->

<hr>
<br /><br /><br />

<!--<img src="images_joined.gif">-->

</body>

</html>

The first one works:

Code: 
<div class="sprite translate"></div>

..but the 2nd one doesn't:

Code: 
<img src="transparant.gif" class="sprite translate" alt="test">

Can anyone suggest what I'm doing wrong? Been scratching my head over this one for a good 45 mins now =)

I really wanna get the <img version working, so I can simply replace the iamge tags with the "classes" (and also some of them need links wrapped over them, so this makes it easier)

TIA

Andy
 
Sort by date Sort by votes
Mmm really? I've definatly got transparant.gif, yet it refuses to work in IE 8 / FF /Chrome :(
 
Upvote 0 Downvote
Hi,

Ok, this is driving me nuts :/

Code: 
<img src="[URL unfurl="true"]http://carmstatic.com/images/blank.gif"[/URL] class="sprite arrow_image" />

You can see it here:(in the " Why book with us? " section)


The blank white space should be the "down arrow" image - like we have to the right of that phrase.

The "blank" image definatly exists:


The CSS is:

Code: 
	.sprite {
		background: url([URL unfurl="true"]http://carmstatic.com/images/images_joined.gif);[/URL]
	}
	.arrow_image { 
		background-position: -340px 0;
		width: 20px;
		height: 20px;
	}

Can anyone suggest anything? Its driving me nuts :(

BTW, doing the call with this works:

<div class="sprite arrow_image" ></div>

...BUT, this breaks the formatting (as its a <div.. whereas I need it to load in the <img tag)

Also, this has been tried in IE8, FF and Chrome - all of which refuse to load it :(

Any advice is much appreciated!
 
Upvote 0 Downvote
Your gif is white, not transparent. If it were transparent and the background was not working, it would show red color of the other document and instead it is showing white. I tried it with an actual transparent gif and it worked perfectly.

Furthermore, your images_joined is posing as a gif but is instead a png.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
OMG - how stuipid!!! I changed the image to transparent, and works a charm now - thanks tons (was driving me nuts - as everywhere I was reading, they were saying this was a valid syntax)

Thanks again (star coming your way :))

> Furthermore, your images_joined is posing as a gif but is instead a png.

Oops, will get that fixed up :)

Andy
 
Upvote 0 Downvote
haha probably not as long as it would have taken me ;)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
630
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
655
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
537
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
572
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top