[Brown]

i need to put rounded corners on a hover state on a list element. i can only think that i'd need 2 background images but can't figure out how to put the bottom image in place.

i tried adding a span and targetting that but either i've not got it right or it won't work anyway.

any thoughts?

http://junk.anyoldshit.com/list/test.html

ta.

[Stickman]

Not sure what you're after.

Do you want plain text links with image backgrounds on hover? You worried about resizing the text?
Even better, have you got a mockup showing all the states and dimensions?

MSN if you want.

[Brown]

Originally Posted by Stickman

You worried about resizing the text?

yep. i can fix the height of the li's but then on re-size is fucks up.

[stickmus]

li {
	height: 70px;
	width: 120px;
}

li:hover a {
	background-image: url(img/test-top.gif);
	background-repeat: no-repeat;
	color: #fff;
		padding: 5px;
	display: block;	
}

li:hover {
	background-color: #666;	
	background-image: url(img/test-bot.gif);
	background-repeat:no-repeat;
	background-position: bottom;
}

With a bit of javascript to sort make ie play ball... I can dig it out if you want, but same as suckerfish.

[Brown]

cheers guys, getting there...

[finbarr]

shorthand:

li:hover a {
background:#666 url(img/test-bot.gif) no-repeat bottom;
}

instead of:

li:hover {
background-color: #666;
background-image: url(img/test-bot.gif);
background-repeat:no-repeat;
background-position: bottom;
}