Sprite addition help

[Simon Lloyd]

Hi all, i'm trying to replace all my forum images with a sprite reference, most of my images are on forumhome, could someone help with how i'd present the css instead of this

<td><img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" height="46px" width="46px" id="forum_statusicon_$forum[forumid]" />
</td>

here's a snippet of my sprite css

.Accessforum_new{ background-position: 0 0; width: 47px; height: 47px; }
.Accessforum_old{ background-position: 0 -97px; width: 47px; height: 47px; }
.Excelforum_new{ background-position: 0 -194px; width: 47px; height: 47px; }
.Excelforum_old{ background-position: 0 -291px; width: 47px; height: 47px; }
.Outlookforum_new{ background-position: 0 -388px; width: 47px; height: 47px; }
.Outlookforum_old{ background-position: 0 -485px; width: 47px; height: 47px; }

#td {
    background: url(forumsprite.png) no-repeat top left;
}

So, not being any good whatsoever with css i'm assuming i'd reference the actual sprite like the code snippet above in my additional css? and how would i address the actual css references in the code snippet at the very top?

Any help is appreciated

EDIT: the image names in the css i.e Accessforum_old are the names of the prefixes as they are currently in use.

[Lynne]

You basically tell it where the upper left point is via x y position and then give the height and width from there.

http://www.w3schools.com/css/css_image_sprites.asp

[Simon Lloyd]

I've had limited success using <td id="td"> but it just shows the entire sprite, even if i then do <td id="td" class="$forum[imageprefix]forum_$forum[statusicon]"> i cant get it to show that particular part of the sprite, just using $forum[imageprefix]forum_$forum[statusicon] in the template shows the correct name for the sprite portion but no image?

--------------- Added [DATE]1367557259[/DATE] at [TIME]1367557259[/TIME] ---------------

i've made further modifications and have much better success although some of the images aren't showing correct and i think thats down to the generated image and css, i'll have a play now that i can actually see whats going on - thanks Lynne

[darnoldy]

Part of the problem may be that IDs have to be unique on a page. It appears that you're trying to have a <td id="td"> for each row in your forumhome table.

Put the {background: url(forumsprite.png) no-repeat top left;} into each of the class definitions and eliminate the #td selector altogether.

You might also try putting some content into the td— like a &nbsp; Table cells act weirdly when they are empty.

--don