Removing <ul> bullets via CSS

Question

I am using jQuery for the first time via the Views Cycle module for Drupal. I am not a CSS pro, but I am pulling my hair out trying to remove the bullets from the rotating images on this page: http://shoshannabauer.com/

What am I missing? Does the list-style go on the <li> or on the <ul> class?

Answer 1

list-style goes on the <ul> class.

ul { list-style: none; }

Answer 2

The list-style goes in the tag <ul>.

Answer 3

Try using list-style-type on the list

ul { list-style-type:none; }

Answer 4

edit: Shawn is right. This here is the reason for the bullets in your navigation on the left.

Take a look at your css, you have an image of a bullet there.

li.leaf {
    background:transparent url(images/menu-leaf.gif) no-repeat scroll 1px 0.4em;
    list-style-image:none;
    list-style-type:none;
    margin:0;
    padding:0 0 0 1.5em;
}

Your list elements have kind of custom bullets in the form of a background-image of a white bullet and a padding-left of 1.5em

Answer 5

try:

list-style: none;

on

Answer 6

Adding to RamboNo5's answer:

ul.menu li, .item-list ul li, li.leaf {
    background: none;
}

fixes this. The bullets were not browser-generated but background images.

Answer 7

ul{
list-style:none;
}

• you might have to remove the list-style from the li too, in this case use:

  ul li{ list-style:none; }

good luck

Answer 8

Actually, assuming you want to keep the bullets in the left menu... if you look in your style.css?b css file, under your /* lists */ and remove this line, it'll fix the problem (it's a duplicate and over-riding all the other styling)

ul li {
 background:transparent url(images/menu-leaf.gif) no-repeat 1px .4em;
 list-style-image:none;
 list-style-type:none;
 margin:0;
 padding:0 0 0 1.5em;
}

Answer 9

Here is some jQuery which will remove the bullet for you:

$(document).ready(function(){
     $('ul.viewsCycle-processed').css({background:'transparent'}).find('> li').css({background:'transparent'});
});

And if you want to add a css stylesheet to the page:

ul.viewsCycle-processed { background:transparent !important; }
ul.viewsCycle-processed li { background:transparent !important; }