help with list items

[cybershot]

I am trying to make a list item with a background image and can not get it done

I want the list to display: inline. So I did this

ul#thumbGallery li {
display: inline;
padding: 10px;
width: 11px;
height: 11px;
}

Then I made a new class to hold the background image that I need

.activeDot {
height: 11px;
width: 11px;
background: url(images/aciveDot.png);
}

.inactiveDot {
height: 11px;
width: 11px;
background: url(images/inaciveDot.png);
}

then on the list I did

<ul>
<li class="activeDot"></li>
<li class="inactiveDot"></li>
<li class="inactiveDot"></li>
<li class="inactiveDot"></li>
</ul>

This list will not show the background image. the only way I can get them to show is by placing the image directly into the list. Which I do not want to do. I want to use jquery to swap the image. So when the second list item is clicked, the image will change from inactive to active and the first list item will change from active to inactive.

So what I want is to use jquery add and remove class function. But I can not get the background image to show on the list. I don’t want to put any content into the list item. Could this be the problem?

[cybershot]

You know what? I cheated and just used divs instead of a list. I hate using lists

[Nert]

The proper way to implement this would have been to apply the bg image to the li element. and use padding to move the text away from the image. adjust bg image accordingly using background positioning.

[cybershot]

I know that. But as I said in my post, I don’t want to put any content into the li element. without that content, I couldn’t get the li element to expand to show the background image. even by providing a width and height.

[Author]

Posts