By ajh on

It seems no matter what I do the list tags in block-list won't drop the bullet. For normal css I'd just set a ul class to remove it, but this doesn't seem to work within the style.css of this theme.

What would the correct method to do this be?

Comments

ajh’s picture

ajh commented

Turns out there is a drupal.css that cannot be over-ridden. I'm making the changes there, although I think these should really be in the themes and not in the main css.

tangent’s picture

tangent commented

You don't need to edit misc/drupal.css. Just override the styles applied by it in your style.css file. If your style doesn't seem to work, try appending !important to your style declaration, or find the higher priority selector.

It is called cascading stylesheets for a reason ;-)

moonfire’s picture

moonfire commented

I belive you find the selector you want to remove the image bullet from and put in:

list-style: none;

...as part of the selector's style. This is one of the first things I do since I run sans-graphics sites.

tadashi-1’s picture

tadashi-1 commented

Just in case anyone else finds themselves with the same problem, for me putting the following code in the theme's style.css solved it.
I'm using the Burnt theme.

.item-list ul li {
  list-style: none;
}

...really don't understand css syntax...

herkimer’s picture

herkimer commented

Hi,

I just spent an hour on this one myself. (IE6 was showing circle images as bullets, where IE7 and FF were display no bullets.) I had to add the following to my CSS:

list-style: none !important;
list-style-image: none !important;

It turns out, there was a system style-sheet that was applying a "list-style-image". Until I specifically added an attribute to over-ride the image, it was being rendered by IE6.

grobemo’s picture

grobemo commented

For the sake of others who might run into this problem in, say, another two years:

If you're trying to remove bullets from lists but can't seem to override the system's CSS, check whether the system or theme is setting list-style-type on the <li> element, rather than the <ul> element. If so, you'll need to override it by setting a new declaration for <li> elements.

For example, you want to do this:

 div.sidebar ul li {
   list-style-type: none;
 }

not this:

div.sidebar ul {
  list-style-type: none;
}

The second will be ignored because a style for <li> elements is more specific than a setting for <ul> elements, and more specific styles usually win in CSS.

Flyer-2’s picture

Flyer-2 commented

There can also be a list-style-image, you have to put it to 'none' too