CSS vertical sprite

[dannam]

I'm having trouble with a vertical sprite (why do the seem to be more problematic than horizontal?) I read a post from 2007 that very similar to mine, but unfortunately that fix doesn't see to work for my situation.

The links work, but the hover state doesn't show the part of the navigation image that it should... it's not shifting to the left like it should.

Any help is greatly appreciated!

Page: <snip>
Nav image: <snip>
CSS: relevant section below
And full css here: <snip>

/* LEFT SIDEBAR STYLES */
#leftsidebar {
float: left;
width: 155px;
background: #aa5d00 url(images/grape-sidebar.gif) no-repeat;
margin: 0;
padding: 0;
border: 0px solid blue;
}
ul#leftnavigation {
width: 129px;
height: 222px;
background: url(images-nav/navigation-left.gif) no-repeat;
margin:0;
padding: 0;
position:relative;
top: 50px;
left: 15px;
border:1px solid green;
list-style:none;
}
ul#leftnavigation li {

float: left;
width: 100%;
}

ul#leftnavigation a {
display: block;
/* took this out as it causes problems
background: transparent url(images-nav/navigation-left.gif) 0 0 no-repeat; */

}
#home a {background-position: 0px 0px; height: 30px;}
#accessories a {background-position: 31px 0px; height: 30px;}
#corpgifts a {background-position: 61px 0px; height: 30px;}
#travel a {background-position: 91px 0px; height: 30px;}
#organic a {background-position: 121px 0px; height: 40px;}
#storeinfo a {background-position: 161px 0px; height: 30px;}
#contact a{ background-position: 191px 0px; height: 31px;}

#home a:hover {background-position: 0px -129px;}
#accessories a:hover {background-position: 31px -129px;}
#corpgifts a:hover {background-position: 61px -129px;}
#travel a:hover {background-position: 91px -129px;}
#organic a:hover {background-position: 121px -129px;}
#storeinfo a:hover {background-position: 161px -129px;}
#contact a:hover {background-position: 191px -129px;}

[edited by: swa66 at 8:28 pm (utc) on Nov. 10, 2009]
[edit reason] Link weeding, please see ToS and Forum Charter [/edit]

[Fotiman]

Welcome to WebmasterWorld! Looking at your CSS, I can see that you are incorrectly applying the background image to the <ul> element. Instead, you need to apply the background to each of the <a> elements, positioning it for each. Currently, your <a> elements have no background, so trying to adjust the background-position for those elements won't do anything.

It looks like you started down that road but them commented out that code? I would start by removing the background on the ul, adding it back to the a elements. I suspect your problem is one of specificity. That is, this rule:

ul#leftnavigation a { ... }

has a higher specificity than the rules that adjust the background:

#home a { ... }

If you add a little more to the specificity of those links, then it will probably work. For example:

ul#leftnavigation #home a { ... }

[dannam]

I had the background image applied to the <ul> as that's the way I do horizontal sprites based on the A List Apart guideline. So it's possible that it just doesn't work with vertical sprites.

However, I either didn't understand your suggestion, or I haven't applied it correctly.

Here's the revised css with the background image removed from the ul and applied to the a [ul#leftnavigation a]. I've tried applying the background image to the individual anchors [ul#leftnavigation #home a], I've tried removing the float from the <li> (why a float is required makes no sense to me), but it gets worser and worser -

Thanks.

/* LEFT SIDEBAR STYLES */
#leftsidebar {
float: left;
width: 155px;
background: #aa5d00 url(images/grape-sidebar.gif) no-repeat;
margin: 0;
padding: 0;
border: 0px solid blue;
}
ul#leftnavigation {
width: 129px;
height: 222px;
margin:0;
padding: 0;
position:relative;
top: 50px;
left: 15px;
border:1px solid green;
list-style:none;
}
ul#leftnavigation li {
width: 129px;
float:left;
}
ul#leftnavigation a {
display: block;
background: transparent url(images-nav/navigation-left.gif) 0 0 no-repeat;
}

ul#leftnavigation #home a {background-position: 0px 0px; height: 30px;}
ul#leftnavigation #accessories a {background-position: 31px 0px; height: 30px;}
ul#leftnavigation #corpgifts a {background-position: 61px 0px; height: 30px;}
ul#leftnavigation #travel a {background-position: 91px 0px; height: 30px;}
ul#leftnavigation #organic a {background-position: 121px 0px; height: 40px;}
ul#leftnavigation #storeinfo a {background-position: 161px 0px; height: 30px;}
ul#leftnavigation #contact a{ background-position: 191px 0px; height: 31px;}

ul#leftnavigation #home a:hover {background-position: 0px -129px;}
ul#leftnavigation #home a:hover {background-position: 0px -129px;}
ul#leftnavigation #accessories a:hover {background-position: 31px -129px;}
ul#leftnavigation #corpgifts a:hover {background-position: 61px -129px;}
ul#leftnavigation #travel a:hover {background-position: 91px -129px;}
ul#leftnavigation #organic a:hover {background-position: 121px -129px;}
ul#leftnavigation #storeinfo a:hover {background-position: 161px -129px;}
ul#leftnavigation #contact a:hover {background-position: 191px -129px;}

and here's the html:
<div id="leftsidebar">
<ul id="leftnavigation">
<li id="home"><a href="index.htm"> </a></li>
<li id="accessories"><a href="wine-accessories.htm"> </a></li>
<li id="corpgifts"><a href="corporate-wine-gifts.htm"> </a></li>
<li id="travel"><a href="wine-travel.htm"> </a></li>
<li id="organic"><a href="organic-viticulture.htm"> </a></li>
<li id="storeinfo"><a href="weygandt-wines-store-info.htm"> </a></li>
<li id="contact"><a href="contact-weygandt-wines.htm"> </a></li>
</ul>

[edited by: eelixduppy at 1:13 am (utc) on Nov. 11, 2009]
[edit reason] no personal URLs, please [/edit]

[Fotiman]

It appears that perhaps you have your top and left background position properties swapped. Also, one of them needs to be negative. Try this as a start:

ul#leftnavigation #home a {background-position: 0px 0px; height: 30px;}
ul#leftnavigation #accessories a {background-position: 0px -31px; height: 30px;}
ul#leftnavigation #corpgifts a {background-position: 0px -61px; height: 30px;}
ul#leftnavigation #travel a {background-position: 0px -91px; height: 30px;}
ul#leftnavigation #organic a {background-position: 0px -121px; height: 40px;}
ul#leftnavigation #storeinfo a {background-position: 0px -161px; height: 30px;}
ul#leftnavigation #contact a{ background-position: 0px -191px; height: 31px;}

ul#leftnavigation #home a:hover {background-position: -129px 0px;}
ul#leftnavigation #accessories a:hover {background-position: -129px -31px;}
ul#leftnavigation #corpgifts a:hover {background-position: -129px -61px;}
ul#leftnavigation #travel a:hover {background-position: -129px -91px;}
ul#leftnavigation #organic a:hover {background-position: -129px -121px;}
ul#leftnavigation #storeinfo a:hover {background-position: -129px -161px;}
ul#leftnavigation #contact a:hover {background-position: -129px -191px;}

[dannam]

Perfect!
Wow... I never would have figured that out!

So the first number is the left, and the second is the top?
I'm really confused. That seems totally opposite what I code for horizontal sprites.

A thousand thank yous.

And fair warning... Now that I've changed the horizontal navigation to a sprite, and the left vertical navigation to a sprite, I now want to change the drop down navigation to a sprite...

Thanks again!

[Fotiman]

Yes, when specifying background position...

If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position.

[w3.org...]

Glad it's working for you now. :)