I'm trying to restyle my nav menu list (http://linux1.care.uea.ac.uk/eduwebdemo) and I'm finding it difficult to get rid of the bullets displayed by the ul tag.

I changed the definition of the ul element in the menu to list-style-type:none; but it keeps spitting out the bullets.

The biggest problem, though, is that I can't troubleshoot it because the page works as expected when I save it as a static page and attach the stylesheet to it. An even more interesting thing happens when I try to use the Firefox Developer extension to try to track down the problem. The minute I open the CSS editor sidebar, the display changes to what it should be - and I can't then even play around with rogue elements.

I suspect that some styling is called at the last minute but I have no idea what and how to find out. Any help will be greatly appreciated.

Comments

syquest’s picture

Try adding this to the bottom of style.css...

#block-menu-94 .menu {
list-style-type: none;
}

or this...

#block-menu-94 .block block-menu {
list-style-type: none;
}

Gary Feldman’s picture

The way I read the CSS spec, the list style image overrides the list style type. So try setting (or removing) the list-style-image to get rid of the bullets. My guess is that it works with the saved file or CSS editor bar because the URL for the image is relative, and no longer valid from those contexts.

Gary Feldman

techczech’s picture

Thanks. You were right, the images were the culprit - I thought about them but didn't realize that they cannot be overriden by list-style-type. (And I should have realized that it was the paths.) But unfortunately, to get fix this problem, I had to hack into the drupal.css which I hate since now I have to remember what I did. Basically, the solution was to comment away the whole menu section and then style the elements individually in style.css. Any idea, how I could over-ride it in style.css? The CSS spec doesn't seem to have a none option for list-style-image. But that, is a CSS and not a Drupal question.

On a related note: my changes broke activemenu - I can expand the items but not collapse them back. I can see more CSS work ahead.

Gary Feldman’s picture

Try just pointing the list-style-image at a non-existent image.

Gary Feldman

techczech’s picture

unfortunately, that leaves a space in the line item roughly equivalent to a left margin - which is a problem if I set the hover to change color

Gary Feldman’s picture

The default ul.menu li has a left margine of 0.5em. So try overriding that with 0.

Gary Feldman

nevets’s picture

There is no need to modify drupal.css to re-style the menu, I have done before without a problem.

techczech’s picture

I tried that and got the same result as with trying to substitute a name of a non-existent image. I suspect that CSS simply interprets 'none' as the name of an image that doesn't exist.

ac’s picture

Any idea, how I could over-ride it in style.css?

Simply put the changes into style.css. The essence of CSS is the cascading nature of it. This means that the last instance of any class or id is used. As style.css is loaded after drupal.css you can overide anything in drupal.css simply by duplicating the drupal.css class or id and modifying its parameters (in style.css). Hope this helps.

------------------------------
Alex Cochrane
Spoon Media

scb’s picture

I have tried to override that styling, pointing to a nonexistent image, but the original images are still there... could you tell me to which exact class did you apply the style?

I have tried #block-menu-94 ul, #block-menu-94 .menu, #block-menu-94 .block block-menu etc. not working (of course with the right number)
With each I tried list-style-image:none, url(none) and url('none')

thanks

nevets’s picture

Can you provide a link to your site as it helps other provide a better answer.

techczech’s picture

To be honest, I just overrode the whole ul li definition in the drupal.css and didn't have time to experiment with some of these other suggestions. I then manually set the bullets back on for the admin menus. Not very elegant I know but I was in a hurry. It did have the unpleasant side-effect of breaking autoexpanding menus from jstools. They still expand but they now don't retract.

delineas’s picture

I try with this and the bullets go away on IE 6
At the end of styles.css of your theme put:

li.leaf {
	list-style-type: none;
	list-style-image: url(none);
}

Maybe works fine with li.expanded or li.collapsed

djschwartz’s picture

I just spent 2 hours trying to remove those bullets in IE, and this is the solution that finlly did it for me. Thank You!

ac’s picture

You don't really need the url(). If you want this to remove all bullets (including expanded and collapsed) then lose the .leaf from li.leaf

li.leaf {
list-style: none;
list-style-image: none;
}

-----------------------------
Alex Cochrane
Spoon Media

butler’s picture

Hi. This looks like the most recent discussion of this issue so I am posting here... I am trying to customize a block-menu for a theme starting from Friends Electric and have been spending quite a bit of time trying to get any of the solutions I have read about to work

It seems this should work:

#block-menu-2 ul.menu li.leaf {
list-style-type: none;
list-style-image: none;
}

... it doesn't. I even tried just changing the requisite list items in drupal.css to see if I was able to have any effect at all; no dice. Testing in Mac Firefox or Safari, to my astonishment the bullets remained. I looked for !important and universal selector declarations and can find none. Finally I found that drupal.css is already being overridden... I can remove those bullets by editing theme/style.css doc:

.item-list ul li a, li.leaf a {
background: url(sidebar-bullet-dot.png) no-repeat 4px 5px;
}

becomes:

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

... and the bullets are outta there. However, I don't want to remove them for all lists or all CSS menus across the site. But attempts to use #block-menu-2 won't work for some reason... any ideas?

Thanks...

ac’s picture

#block-menu-2 li.leaf {
list-style-type: none;
list-style-image: none;
}
#block-menu-2 li.leaf a {
background: none;
}

------------------------------
Alex Cochrane
Spoon Media

butler’s picture

Separately styling li.leaf and li.leaf a worked. I am getting a bit of a (clearly much needed) CSS education trying to control stuff from style.css. Alex thank you very much for the CSS snippets you have been kind enough to post here.

ac’s picture

Not a problem. Glad they worked out for you. The important thing to remember is that you are trying to control an html element (In this case two of them). Once you have control of the element then you can do anything to it. There are many different ways to control the element, it is just a matter of how you like to write CSS.

------------------------------
Alex Cochrane
Spoon Media

otito’s picture

nice