Getting a CSS sprite to work

HTML & CSS
1

Hi guys,

Me again :wink:

I’m trying to get a CSS sprite to work for this page:

http://island.org/test.html

The sprite in question is:

http://island.org/icon_sprite.png

I’ve also tried a vertical one, and had no luck with that either

The problem seems to be with the code I’m using to show it:

#home .row .icon1 { 
  background-image: url('./icon_sprite.png');
  background-position: -0px top;
  background-repeat: no-repeat;
}
#home .row .icon2 { 
  background-image: url('./icon_sprite.png');
  background-position: -32px top;
  background-repeat:  no-repeat; 	
}
...etc

Its picking up the correct start place, but it doesn’t seem to stop repeating :confused:

With the vertical one, it works again - but it shows both the icon its mean to, and also the one directly below it in the image

Unfortunatly, this code is generated in wordpress (and the plugin its using is a real mess)… I can’t find the code that generates this bit of HTML:

<div class="industry [COLOR="Red"]icon1[/COLOR] ">
					<a class="icon" href="http://island.org/category/buzz/"></a>     
					<div class="links">

					<h3><a href="http://island.org/category/buzz/">Buzz  (28)</a></h3>
	
					<a href="http://island.org/category/buzz/avant-garde-literature/">Avant Garde Literature</a>, <a href="http://island.org/category/buzz/psychedelic-art/">Psychedelic Art</a>, 			</div>
		</div>

If I could, then I would just make my life simpler, and create an <img with a blank.gif, then assigning the correct classes - but that doesn’t seem an option atm :()

TIA for any suggestions!

Andy

2

Typical, been working on this for over an hour now - and as soon as I post it, I manage to find a way to get it working!!!

Simple fix, just set the sprite as vertical, and then use background-repeat: none, and then height: 32px; (the height of the icon)

Seems to have done the trick :slight_smile:

Cheers

Andy

3

Depending on what the CSS was for the internals, that may just be a quick fix, is anything in the innards of that code snippet (inside of .icon1) floated?

You shouldn’t have needed to set a height-it looks like it was collapsing.

4

Hi,

Thanks for the reply.

Its a bit of a weird one (not a fan of the theme, as its soooo messy, and hard to customize etc)

Think I’m just gonna leave it as-is for now, as it all looks good as far as I can see =)

Cheers

Andy

5

Any chance of me seeing a site where this is at :p? Just curious as to the real problem.

6

Hi,

A page where the problem is showing? Or where its working?

Cheers

Andy

7

Ah typical, doesn’t do it now :wink:

http://island.org/test.html (I removed the “height” stuff)

I’m wondering if maybe it was something to do with another CSS class I removed (as it wasn’t working quite right) …

Sods law, huh? :wink:

Cheers

Andy

8

Looks like .icon1 still has the height.

But yeah I was right-the problem is is that the children are floated, and thus hte parent is collapsing in height. The height isn’t needed now because there are some unfloated stuff in there which is keeping the height.

Interesting ;).

9

Ah ok, good to know. Thanks for taking a look :smiley:

Cheers

Andy

10

Anytime :). You’re welcome. What I said in my previous post applies to every instance where a floated element will collapse the parent. So you know.