By nhoeller on

After posting "Moving Secondary Links Just Above the Footer Area", I decided to keep things simple - I created a new 'footer-menu'. When I added the associated block to the 'header' section, it formatted fine as an inline menu. If I added it to the 'footer' section, I got a vertical list of links.

Using Firebug, I determined that the 'header' instance was inheriting #header-region * settings. I added the following definition to style.css and got a centered, in-line menu below the 'Copyright' line.

#block-menu-menu-footer-menu * {
  display:inline;
  line-height: 1.5em;
  margin-top: 0;
  margin-bottom: 0;
}

I have had no success in removing the bullets. Based on my reading of CSS, the critical option is list-style-type:none;. Firebug shows that this is set in system-menus.css

ul.menu {                                  system-m...nus.css?V (line 3)
border:medium none;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:left;
}

I am at a loss, although given that my CSS knowledge is 'monkey see, monkey do', this is not surprising. Is there a simple answer, or should I move this to a CSS discussion? You can see the current site at http://drupaltest.sinet.ca/.
Thanks in advance, Norbert

⋅ Categories: Drupal 6.x

Comments

pbarnett’s picture

pbarnett commented

This was a bit of a pig to solve - I tried setting the list style type and image to none, and it made no difference, though Firebug was showing me that the style had changed! (I was injecting a CSS fragment using Web Developer)

Then I realised - to get around inconsistent positioning of bullets and list style images between browsers, they'd used a background image!

So -

#block-menu-menu-footer-menu ul.menu li.leaf {
  list-style: none inside none;
  background-image: none;
}

and the bullets go away!

Pete.

nhoeller’s picture

nhoeller commented

Pete, you are a genius! Worked perfectly.

And I think I even see how it works. Both ul.primary-links li and ul.secondary-links li have background-image: none; set. The footer-menu did not. I'm guessing I did not see the bullets when I had the menu block located in the header region because they were the same color as the header (or close enough that my screen/eyes did not see them).

pbarnett’s picture

pbarnett commented

I had some great tools!

The Web Developer toolbar has an option to add your own user CSS file, so I could check your CSS with Firebug and add my own CSS to investigate and fix the problem...

Thanks anyway!

Pete.