Lists and background images

[Wazzzuuuppp]

Howdy,

I'm fairly new to this css stuff so bear with me. I'm wanting to create an unordered list with background images for bullets. That part I can do.

However, I'd like to also make the background image change when you hover over a link. I can get that to work as well, but I can't get the hover image to line up with the regular list image. That part has me banging my head against a wall.

I think the error of my ways is with #Occasions a:hover (brilliant deduction, huh?)

Thanks in advance. If anyone knows of a good tutorial on this topic, please pass it along.

Here's my pathetic code...

ul {
list-style-type: none;
padding: 0;
margin: 25px 5px 5px 20px;
}

#Occasions li {
background: transparent url(bullet.gif) no-repeat top left;
background-position: 5px 7px;
padding: 7px 0px 7px 30px;
margin: 0;
}

#Occasions a:link {
text-decoration: none;
color: #993333;
Margin: 0;
Padding: 0;
font: 12px Verdana, Arial, Helvetica, Sans-Serif;
}

#Occasions a:visited {
text-decoration: none;
color: #993333;
Margin: 0;
Padding: 0;
font: 12px Verdana, Arial, Helvetica, Sans-Serif;
}

#Occasions a:hover {
background: transparent url(bullet-on.gif) no-repeat top left;
background-position: -15px 0px;
padding: 0;
margin: 0;
font: 12px Verdana, Arial, Helvetica, Sans-Serif;
color: #000;
}

[Robin_reala]

Any reason why you're applying the background image to the list element originally, but applying it to the anchor element on hover? I'd give list-stlye-type: none to the list elements, then apply the image to the anchor originally.

Actually, that's a lie. I wouldn't use background-image, I'd use list-style-image for both and forget IE :)

[Wazzzuuuppp]

"Any reason why you're applying the background image to the list element originally, but applying it to the anchor element on hover?"

Yeah, because I've been doing this css stuff for about 2 weeks and am trying to figure it out =)

I'll give it a try.

thanks.

[createErrorMsg]

Margin: 0;
Padding: 0;

These need to be lower case.

The combination of these zeroed margins and paddings not applying plus the up-button image set on the LI and the down-button image placed on the A, as Robin mentioned, is probably the cause of the problem.

cEM

Oh, and Welcome to WebmasterWorld!