Vertical Sprite Issue

Vertical image sprite not rendering correctly

[Nuvolari]

I've used sprites for horizontal images on numerous occasions. This is the first time I have attempted in for a vertical image.

At the moment, all the <li> seem to be setting their top position to 0 even though I have them set at the correct locations. The problem goes away when I remove position: absolute; from the li style, but then only in SF and FF, not in IE.

I have seen this done on a few other sites, have studied their code extensively and have read up the CSS Sprite article at ALA as well as Sliding Doors in hopes of fixing my issues. Alas, I seem to be stuck.

*Note: I have a red frame currently turned on so as to better view the issue I'm having.

CSS Code:

#action {
position: relative;
padding: 0;
margin: 0;
width: 164px;
height: 210px;
background: url(interface/actioncenter.png);
}

#action li {
list-style: none;
top: 0;
margin: 0;
padding: 0;
position: absolute;
}

#action a {
display: block;
border: red 1px solid; /*remove once working*/
}

#action span {
display: none;

}

#actionA {
height: 75px;
top: 0;
left: 0;
width: 164px;
}

#actionB {
height: 58px;
top: 75px;
left: 0;
width: 164px;
}

#actionC {
height: 77px;
top: 133px;
left: 0;
width: 164px;
}

#actionA a {
display: block;
height: 75px;
top: 0;
}

#actionB a {
display: block;
height: 58px;
top: 75px;
}

#actionC a {
display: block;
height: 77px;
top: 133px;
}

#actionA a:hover {
background: transparent url(interface/actioncenter.png) -0px -210px no-repeat;
}

#actionB a:hover {
background: transparent url(interface/actioncenter.png) -0px -285px no-repeat;
}

#actionC a:hover {
background: transparent url(interface/actioncenter.png) -0px -343px no-repeat;
}

#action ul {
margin: 0;
padding: 0;
}

Page Code:

<ul id="action">
 <li id="actionA"><a href="#" title="Joing Our Mailing List"><span>Joing Our Mailing List</span></a></li>
<li id="actionB"><a href="#" title="Contribute"><span>Contribute</span></a></li>
<li id="actionC"><a href="#" title="Tell Your Friends"><span>Tell Your Friends</span></a></li>
</ul>

Thanks for any and all thoughts,
Nuvolari

PS: Long time reader, first time poster :)

[added] image dimensions = 164 x 420 [/added]

[edited by: SuzyUK at 9:49 am (utc) on Mar. 10, 2007]
[edit reason] sorry no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[SuzyUK]

Hi Nuvolari and Welcome to WebmasterWorld!

it is the absolute positioning you shouldn't need it, it's just complicating the issue - when I remove it it is working in IE but there is the "whitespace" in lists which instead should be dealt with by floating the li's.

the IE whitespace in lists gap is there any time there is a <a> with display: block inside a vertical list .. not just the sprites menus ;)

With vertical menus apart from floating the <li>'s you should let <a>'s do all the work heights wise! - You don't need to keep redeclaring the widths, the display: block on the links will make them fill 100% of the <li> which after floating should be told to be 100% of the <ul> which has the explicit width set.

This means all your CSS for the specific <li>'s becomes redundant :) then with the image you can simply attach it to all the <a>'s in one rule and then adjust it's background-position for them all to save repeating loads of rules.

Here's what I've got with all the bits inside comments (in blue) being unnecessary!

#action {
/* position: relative; */
list-style: none; /* add this here */
padding: 0;
margin: 0;
width: 164px;
height: 210px;
background: url(actioncenter.png);
}

#action li {
float: left; /* add this */
width: 100%; /* add this */

/*
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
*/
}

/*
#actionA {
height: 75px;
top: 0;
left: 0;
width: 164px;
}
#actionB {
height: 58px;
top: 75px;
left: 0;
width: 164px;
}
#actionC {
height: 77px;
top: 133px;
left: 0;
width: 164px;
}
*/

/* this following rule applies to all anchors inside the li */
#action a {
display: block;
background: transparent url(actioncenter.png) 0 0 no-repeat;
}

#actionA a {
height: 75px;
background-position: 0 0;
/*
display: block;
top: 0;
*/
}

#actionB a {
height: 58px;
background-position: 0 -75px;
/*
display: block;
top: 75px;
*/
}

#actionC a {
height: 77px;
background-position: 0 -133px;
/*
display: block;
top: 133px;
*/
}

#actionA a:hover {background-position: 0 -210px;}
#actionB a:hover {background-position: 0 -285px;}
#actionC a:hover {background-position: 0 -343px;}

#action span {
display: none;
}

/*
#action ul {
margin: 0;
padding: 0;
}
*/

HTH, it should work, but let me know if it doesn't and the image co-ordinates might still need to be tweaked as I'm just working with what you had

Suzy

[Nuvolari]

SuzyUK:

So... basically... I was trying too hard. Or maybe not hard enough.

Your code worked perfectly. Many (many) thanks for taking a look for me.

- Nuvo

[Nuvolari]

And, by the way, I said, "oh... Oh... Ohhhhh..." a number of times as I realized what you did to fix the problem. Learning is fun.

- Nuvo

[SuzyUK]

You're very welcome..

learning by code is sometimes the easiest way, that's why I left the extra bits in it makes for easy comparing ;)

glad if it helped.. btw the image on the <ul> is not strictly necessary with this method as it's always hidden by the anchors image, but it's recommended still to leave it there as some settings/versions of IE flicker the image on hover and having the same background on the UL makes it barely noticeable

Suzy