Image bullets on unordered list

Kobrakai · #1 (**permalink**) Aug 15th, 2007, 15:54

Hi, I’m trying to make an unordered list of links with image bullet points, I want it so that when you mouse over a link it changes the bullet point to a different image. I’ve got this far without any problems however if I put something in my unordered list that is not a link it doesn’t display any bullet point. Here is the code I am using:

Code: Select all

<html>
<head>

<style type="text/css">

ul.sidelist {
list-style:none;
}

.sidelist li a  {
background:url('bullet.png') no-repeat center left;
padding-left:10px;
}

.sidelist li a:hover {
background:url('bullet2.png') no-repeat center left; 
}

</style>
</head>
<body>

<ul class="sidelist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li>Without Link</a></li>
</ul>

</body>
</html>

If I try adding the following code I get two bullet points on links and one on non-links:

Code: Select all

.sidelist li {
background:url('bullet.png') no-repeat center left;
}

karinne · #2 (**permalink**) Aug 15th, 2007, 16:00

Unfortunately, the only way to achieve the "hover" effect is through link using the a element like you did in your first example simply for the fact that IE doesn't support hover and anything other than links.

So ... you could do

Code: Select all

.sidelist li {
background:url('bullet.png') no-repeat center left;
}

.sidelist li:hover {
background:url('bullet2.png') no-repeat center left;
}

but it won't work in IE

BTW ... instead of using 2 images for the normal and hover states ... combine them

This will get rid of the annoying flicker when a new user comes to your site and hovers over the links

http://wellstyled.com/css-nopreload-rollovers.html

Kobrakai · #3 (**permalink**) Aug 15th, 2007, 16:06

Thanks for the quick reply.

I was afraid this would be the case. I think I might use your example and just leave IE without a mouse over.

What do you mean by combine them?

karinne · #4 (**permalink**) Aug 15th, 2007, 16:09

Yeah ... stuff like that is so minimal that it doesn't hinder the readability of the site so it's used quite alot

pa007 · #5 (**permalink**) Aug 15th, 2007, 18:27

Or you could use JS to add this functionality.

Pete.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
unordered list - strange behavior	pesho318i	Web Page Design	9	Dec 6th, 2007 14:19
IE7 bug: list bullets aligned to bottom	MikeHopley	Web Page Design	6	Sep 12th, 2007 19:56
unordered list problem in FF	alexgeek	Web Page Design	4	Sep 10th, 2007 15:26
Unordered list under background image	AdRock	Web Page Design	4	Aug 7th, 2006 12:43
CSS Unordered List Problem	relph2	Web Page Design	3	Jan 7th, 2006 18:14

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Image bullets on unordered list