CSS for Widget list items not working (bullets)

mlamkin · #1 Aug 31, 2009, 05:56 AM

I was using an earlier fix that enabled me to have circles, discs, or squares on list items in widgets for WP 2.8 and Atahualpa 3.4.2. The site is www.crtrail.org/CRT-design.

HTML Code:

div.widget ul li a:link,
div.widget ul li a:visited,
div.widget ul li a:active,
div.widget ul li a:hover {
border-left: 0 !important;
padding-left: 0 !important;
}
div.widget ul {
/* for other styles, try "disc" and "square" instead of "circle" */
list-style-type: disc !important;
padding-left: 0;
margin-left: 0;
}
div.widget ul li {
/* 1.35 or more required for Safari or bullets too wide on the left */
margin-left: 1.35em;
/* overwrite existing display:block Firefox */
display: list-item;
}

However, when I try the more flexible CSS code for using images, I get no images before the list item, hovering or not. When I view source code, I do not see any reference to the button icon images in the CSS code.

HTML Code:

div.widget ul li a:link,
div.widget ul li a:visited,
div.widget ul li a:active,
div.widget ul li a:hover {
border-left: 0 !important;
padding-left: 0 !important;
}

div.widget ul li {
border-left: 0 !important;
padding-left: 15px !important;
background: url(/wp-content/themes/atahualpa342/images/icons/green-button.gif) no-repeat 0 3px;
}

div.widget ul li:hover,
div.widget ul li.sfhover {
border-left: 0 !important;
padding-left: 15px !important;
background: url(/wp-content/themes/atahualpa342/images/icons/blue-button.gif) no-repeat 0 3px;
}

Any ideas as to what I'm doing wrong?