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
#block-menu-94
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;
}
The way I read the CSS spec,
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
It was the images what done it
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.
Try just pointing the
Try just pointing the list-style-image at a non-existent image.
Gary Feldman
non-existent image
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
The default ul.menu li has a
The default ul.menu li has a left margine of 0.5em. So try overriding that with 0.
Gary Feldman
Actually list-style-image: none; is valid
There is no need to modify drupal.css to re-style the menu, I have done before without a problem.
'none' just a name for a non-existent image
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.
Any idea, how I could
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
Can't make it work
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
A link to your site?
Can you provide a link to your site as it helps other provide a better answer.
ugly hack
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.
In my page
I try with this and the bullets go away on IE 6
At the end of styles.css of your theme put:
Maybe works fine with li.expanded or li.collapsed
finnaly a solution
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!
You don't really need the
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
-----------------------------
Alex Cochrane
Spoon Media
removing bullets from custom menu
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...
#block-menu-2 li.leaf
------------------------------
Alex Cochrane
Spoon Media
#block-menu-2 li.leaf
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.
Not a problem. Glad they
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
nice thread
nice