creating a CSS "table"

(with images that are rollovers)

[halfandhalf]

I'm trying to implement Zeldman's sprites, but in table format, and I'm having trouble getting images to load. Table is three cells across, I'm just posting code for row 1. Should I just move this to a table?

(I want to conquer this!)

End result for me is that row 1, profile 1 pic works fine, but once I specify profile2 & 3 background images, nothing shows up for those two.

/* SPACER */
#row1 {position: relative; width: 200px; height: 55px; background: url(images/spacer.gif);}

/* ROW 1 PROFILE 1 */
#row1 li {width: 200px; height: 55px; background: url(profiles/profile1-pic.gif) 0 0 no-repeat; display: block; list-style: none;}
#row1 li #profile2 {left: 205px; width: 200px; height: 55px; background: url(profiles/profile2-pic.gif) 0 0 no-repeat; display: block; list-style: none;}
#row1 li #profile3 {width: 200px; height: 55px; background: url(profiles/profile3-pic.gif) 0 0 no-repeat; display: block; list-style: none;}

/* HOVER CODE */
#row1 #profile1 a:hover {background: transparent url(profiles/profile1-pic.gif) 0 -55px no-repeat;}

#row1 #profile2 a:hover {background: transparent url(profiles/profile2-pic.gif) -205px -55px no-repeat;}

#row1 #profile3 a:hover {background: transparent url(profiles/profile3-pic.gif) -415px -55px no-repeat;}

/* BACKGROUND POSITIONING */
#row1 #profile1 {left: 0px;}
#row1 #profile2 {left: 205px; background-position: -205px 0;}
#row1 #profile3 {left: 410px; background-position: -415px 0;}

<div id="row1">
<ul>
<li id="profile1"><a href="#link1"></a></li>
<li id="profile2"><a href="#link2"></a></li>
<li id="profile3"><a href="#link3"></a></li>
</ul>
</div>

[halfandhalf]

Anyone? I'm just looking for the correct formatting to get the images to show up. The problem seems to be specifying the bg image here (only the first one is "acknowledged":

#row1 li {width: 200px; height: 55px; background: url(profile1-pic.gif) 0 0 no-repeat; display: block; list-style: none;}

#row1 li #profile2 {left: 205px; width: 200px; height: 55px; background: url(profile2-pic.gif) 0 0 no-repeat; display: block; list-style: none;}

#row1 li #profile3 {width: 200px; height: 55px; background: url(profile3-pic.gif) 0 0 no-repeat; display: block; list-style: none;}

[Setek]

Your IDs don’t match up with your CSS rules.

<li id="profile2"><a href="#link2"></a></li>

#row1 li #profile2 {left: 205px; width: 200px; height: 55px; background: url(profile2-pic.gif) 0 0 no-repeat; display: block; list-style: none;}

It should be

#row1 li#profile2

. The extra space is saying “find me an ID of

profile2

WITHIN a list item, within an ID of

row1

.”

Instead of “find me the list item WITH ID

profile2

, within an ID of

row1

.”

[edited by: Setek at 1:30 am (utc) on Oct. 3, 2007]