I am trying to add circle bullets back to my primary menu (horizontal menu with yellow background) Check http://www.bjrtechnologies.com/gamma/ Since the theme's css file is the last listed file, I know I can override the primary-links and links class in the theme's css file. This is evident as I changed the background color to yellow and the link color to red within this class. I cannot however override it and have the bullet appear which makes no sense to me. here is the html <div id="nav"> <!-- if block in $nav, removes default $primary and $secondary links --> <ul class="links primary-links"><li class="menu-114 first"><a href="/gamma/node/1" title="">Apple</a></li> <li class="menu-115"><a href="/gamma/node/2" title="">Butter</a></li> <li class="menu-116"><a href="/gamma/node/1" title="">Church</a></li> <li class="menu-117"><a href="/gamma/node/1" title="">Daisies</a></li> <li class="menu-118"><a href="/gamma/node/1" title="">Funny</a></li> <li class="menu-119 last"><a href="/gamma/node/1" title="">Geronimo</a></li> </ul> <div id="secondary-links"></div> </div> <!-- /#nav --> Code (markup): and here is the CSS stuck at the end of the last CSS file (the theme's CSS) #nav ul.primary-links { list-style-type: circle; background: yellow;} #nav ul.primary-links a { color: red;} #nav ul.links { list-style-type: circle; background: yellow;} Code (markup): Not I have tried both classes. Any ideas, I need to add bullets to this horizontal menu.
Instead of inline, float the list-items right. Add about 25px left padding. Then do this: #nav ul.primary-links li a { display: list-item; list-style-position:outside; list-style-type:circle; margin:0 10px 0 0; padding:8px 0; } Code (markup): cheers, gary
Christmas on a cracker: link type="text/css" rel="stylesheet" media="all" href="/gamma/modules/system/defaults.css?G" /> <link type="text/css" rel="stylesheet" media="all" href="/gamma/modules/system/system.css?G" /> <link type="text/css" rel="stylesheet" media="all" href="/gamma/modules/system/system-menus.css?G" /> <link type="text/css" rel="stylesheet" media="all" href="/gamma/modules/user/user.css?G" /> <link type="text/css" rel="stylesheet" media="all" href="/gamma/themes/inmanparkchurch/style.css?G" /> <!--[if lte IE 7]><link type="text/css" rel="stylesheet" media="all" href="/gamma/themes/inmanparkchurch/fix-ie.css" /><![endif]--><!--If Less Than or Equal (lte) to IE 7--> Code (markup): and you wonder why there are specificity issues... The more stylesheets you use, the more likely you are to get ****ed by these sorts of problems. According to both firebug and dragonfly your list-style attribute is being overwritten by the general declaration in the style.css - which normally wouldn't happen but for sending media="all" Out of curiousity, what the devil is this back-ended by? The train wreck of classitus, divitus, non-semantic markup and complete disaster of CSS sends me right to my usual response of "Throw it all away and start over with minimalist semantic markup"
i appreciate your throughts and I share your sentiments however this is how the world class CMS Drupal handles CSS. It is crappy yes but it is what has to be be done for this project. the standard procedures here is to use the last CSS sheet, the Theme's to override anything in the Drupal core. This is not working, by modifying the PHP and removing the links and primary-links class the bullets reappear. however if i carefully remove all the links and primary links declarations from all Drupal core the bullets do not reappear This is why the questions wasn't "help me simplify the CSS" is is "help me figure this out" I could write it correctly but my hands are tied
Did you not read my post? If you want to stay with inline list items, it must be inline-block; but that causes (solvable) problems in IE 6 and FF2. gary
gary, first, sorry i did not see your post second, i am not sure I can float them without throwing off some of the core files that i do want to hack. I will try it thought, maybe I can add a clear under the nav that will leave it mostly unaffected let me ask you since you gave such a clear solution 1) does the inline declaration just destroy the list formatting? if so, when I removed this using Firefox's WEb Developer edit CSS I was able to obtain a vertical list but with no bullets. Is it a a padding issue? 2) if i took another approach and maybe did not worry about the bullets could I add a background image somewhere that had a circle in it, maybe to the a or li?
OK. It shouldn't be a problem; see next comment. No, give the ul a new block formatting context by setting {overflow: hidden;}. For IE6, use the star-html hack to feed it: "* html ul {height: 1px; overflow: visible;}". If you're not anal about validation, add {zoom: 1;} to the ul. Either hack will set hasLayout. If you want list item markers, the element must be {display: list-item;}. If floated, the list-item is automagically {display: block;}. That is why I made the <a> {display: list-item;}, and set the marker to circle. You could add a little padding, and put a background image on any element. cheers, gary