CSS Image rollover, please help!

[xamano]

Okay, this is going to be a little hard to explain without being able to show anyone my image to help explain what it is that I'm trying to do, but here goes!

I'm trying to create an image with rollover links. I've done it before, but this time my image doesn't have the links side-by-side like I've usually done.

Something like this:

....LINK..LINK....
.LINK..LINK....LINK

So if I did the rollover the way I would normally, bits of the links not being hovered on would show up. Does that make sense?

Is there any way to maybe specify a height or something, so that the links that aren't being hovered on won't show up?

If it helps, here's my CSS:

#papertop {
width: 650px;
height: 197px;
background: url(images/bgtop_fl.png) no-repeat;
padding: 1px 0;
}

#papertop var {visibility: hidden; }

#papertop a {text-decoration: none; display: inline; float: left; height: 197px; }

a.rules {width: 88px; background: url(images/topbg_fl.png) no-repeat -272px 0px; }
a.join {width: 86px; background: url(images/topbg_fl.png) no-repeat -358px 0px; }
a.codes {width: 109px; background: url(images/topbg_fl.png) no-repeat -442px 0px; }
a.members {width: 110px; background: url(images/topbg_fl.png) no-repeat -509px 0px; }
a.main {width: 73px; background: url(images/topbg_fl.png) no-repeat -551px 0px; }

a:hover.rules {background: url(images/topbg_fl.png) no-repeat -272px -197px; }
a:hover.join {background: url(images/topbg_fl.png) no-repeat -358px -197px; }
a:hover.codes {background: url(images/topbg_fl.png) no-repeat -442px -197px; }
a:hover.members {background: url(images/topbg_fl.png) no-repeat -509px -197px; }
a:hover.main {background: url(images/topbg_fl.png) no-repeat -551px -197px; }

(I'm sure my widths are screwy since I've been playing around with it and trying to figure it out, lol)

And here's my html:

<div id="papertop">
<a title="rules" href="rules.php" class="rules"><var>rules</var></a>
<a title="join" href="join.php" class="join"><var>join</var></a>
<a title="codes" href="codes.php" class="codes"><var>codes</var></a>
<a title="members" href="members.php" class="members"><var>members</var></a>
<a title="main" href="main.php" class="main"><var>main</var></a>
</div>

Any ideas on what I could do to make this work? I would greatly appreciate it, and thanks for taking the time to read this :)

[rocknbil]

First question: What element is <var>? I've never seen it. If it's a user-defined element using XHTML, great, make sure you're using a valid XHTML doctype, the DDT is working, and it validates.

Otherwise, use a standard element like a <span> or another <div>.

<a title="rules" href="rules.php" class="rules"><span>rules</span></a>

Second, I see
#papertop var {visibility: hidden; } /*or span */

But don't see where you're resetting it to visible on hover. A better choice might be

#papertop span { display:none; }

So when you hover, display inline (or block) would render it visible. But this may be rendered moot by my next suggestion . . . .

Last, you may have better luck wrapping your <a>'s in another element, and applying your CSS directly to the A's as they are the natural anchor elements and will inherently react to mouseover actions (note your selectors on the pseudo class were wrong.) Also, since each one positions independently, you want to position the enclosing elements instead and just focus on the visibility behaviors on a:hover:

<li id="rules"><a href="rules.php" class="hover-links">rules</a></li>

#papertop ul { 
 margin:0 auto 0 auto; 
 padding:0; 
 width: 75%; 
} 
#papertop ul li { 
 list-style:none; 
 margin:0; 
 padding:0; 
 float: left; 
} 
#papertop ul li a {  
 display: none; 
 padding:6px; 
 text-decoration: none; 
 width: 88px;  
 height: 197px;  
}  
/* specify your BG positioning for each of these by ID */ 
#papertop #rules { 
width: 88px;  
background: url(images/topbg_fl.png) no-repeat -272px 0px;  
} 
#papertop ul li a.hover-links:hover { 
 display:inline; 
}  

If you want the background image to be invisible on load, move it's assignment to the a selectors, not the li's, but keep the positioning in the li's as shown. LI for position, a for hover.

Totally and completely untested, but may be a more fruitful approach.