By dtylerhuff on

I'm styling a zen subtheme in Drupal 7.

I have a block in the second sidebar.

Using Taxonomy Menu module to display a block of Taxonomy terms. It shows as a list.

Writings:

  • Fiction
  • Non Fiction
  • Observations

I add this CSS style: ul, li {list-style: none;} but there is no change in how the list is rendered.

I have double checked my stylesheets. They are outputting properly.

I delete all other stylesheets, and add that css style above to a lone sheet, and still, there is a style overriding it.

I'm baffled. Any help would be appreciated.

⋅ Categories: Drupal 7.x

Comments

betarobot’s picture

betarobot commented

There are quite a few classes when it comes to menu render. I'd advise to use more distinctive selectors something like:

ul.menu
.menu li
.this-block .menu li

etc...

Should help.

Cheers,
Andrey

Drupal Sites Showcase. Add yours! | My Blog

dtylerhuff’s picture

dtylerhuff commented

It doesn't. Theoretically more general selectors should work, for instance if I want the entire site to render lists without bullet points I simply add that rule to the last sheet that imports.... But it isn't working. There's some sort of override somewhere, I just can't figure it out...

For instance, adding this:

ul.menu {border: 1px solid black; list-style: none;}

Gives me a border around the list div, but retains the bullet points.

And this more selective selector don't render that either:

.block-menu-menu-writings.block.block-menu.even {
	border: 1px solid black; list-style: none;}
Anks’s picture

Anks commented

Hi moose

If you want to remove bullets from all over the site , there is a css-rule like ".item-list ul li " .

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

Hope it will help you.

Ankit Hinglajia

payamspot’s picture

payamspot commented

Try these:

  • Applying to li (not ul)
  • Using list-style-type (not list-style)
  • Using !important
dtylerhuff’s picture

dtylerhuff commented

Forgot to mention that I have used !important as well, and still no response.

Just for kicks, I used all sorts of combinations, 

ul.menu { list-style-type: none !important; } 

li.item-list { list-style-type: none !important; } 

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

.item-list li { list-style-type: none !important; }

None work. Stumped.

faseeh.abrar’s picture

faseeh.abrar commented

Hi,

Try to use the ID of the block in the css to apply the layout

dtylerhuff’s picture

dtylerhuff commented

That doesn't do it either. 

#block-system-user-menu { list-style-type: none !important; }
#block-system-user-menu li { list-style-type: none !important; }
#block-system-user-menu ul { list-style-type: none !important; }

Firebug says the style is being applied too.

I'm thinking, maybe the li isn't actually there. As if it were an image of bullet points that doesn't respond to the li or ul styles, but is hidden as an image... strange.

payamspot’s picture

payamspot commented

"Inspect element" the li element (using Firefox Firebug, or Chrome's built-in inspect element feature) and make sure 1. your CSS is applying to li elements & 2. If any other CSS description overwrites your CSS description.

jsimonis’s picture

jsimonis commented

I'd also recommend the same. Chances are that you'll find one of a few things...

- your theme cache isn't clearing and your changes aren't showing
- there is another class that is overriding what you're telling it to do
- there is another css file that has styles specific to the classes on that list and that is what is getting in the way

One thing you have to remember is that even if your theme only has one stylesheet, that doesn't mean only one is loaded. Drupal core comes with a number of stylesheets and a lot of them touch on lists. Just telling the general selectors doesn't work because there is css that tells things like ul.menu and ul.menu li that would override what the general selector says if the .menu class is applied.

Menus are probably the items that give me the biggest headache when it comes to this.

dtylerhuff’s picture

dtylerhuff commented

Yes clearly there is a class overriding my added style. The question I'm facing is: where and why?

Firebug confirms that the li and ul are inheriting my styles.

Theoretically !important should remedy the situation, no?

ul { list-style-type: none !important; }
li { list-style-type: none !important; }
#block-system-user-menu { list-style-type: none !important; }
#block-system-user-menu li { list-style-type: none !important; }
#block-system-user-menu ul { list-style-type: none !important; }
jsimonis’s picture

jsimonis commented

No, I don't think that !important remedies the situation if there is another class that is also affecting that text and has higher priority, but I could be wrong. It is very likely coming from styles inside Drupal.

Do you have an address that we could look at to better help figure this out?

dtylerhuff’s picture

dtylerhuff commented

[UPDATE: sorry, ignore message below. ]

OK, now my theme isn't rendering at all.

I added back in the ie6.css and ie7.css lines in the .info file (see below). Refreshed cache, now the styles are all gone. Now my .info looks like this:

stylesheets[all][]        = css/html-reset.css
stylesheets[all][]        = css/wireframes.css
stylesheets[all][]        = css/layout-fixed.css
stylesheets[all][]        = css/page-backgrounds.css
stylesheets[all][]        = css/tabs.css
stylesheets[all][]        = css/pages.css
stylesheets[all][]        = css/blocks.css
stylesheets[all][]        = css/navigation.css
stylesheets[all][]        = css/views-styles.css
stylesheets[all][]        = css/nodes.css
stylesheets[all][]        = css/comments.css
stylesheets[all][]        = css/forms.css
stylesheets[all][]        = css/fields.css
stylesheets[all][]        = css/final-styles.css
stylesheets[print][]      = css/print.css
betarobot’s picture

betarobot commented

If you'd actually post a link to dev site it would help to take a look. I'm very sure there is an easy fix, but html source is essential to cheek it.

Cheers,
Andrey

Drupal Sites Showcase. Add yours! | My Blog

ace11’s picture

ace11 commented

This worked for me

ul li.leaf { list-style-image: none; list-style-type: none;!important }

asuslive’s picture

asuslive commented

thanks

+ ul li.expanded {
list-style-type:none !important;
list-style-image:none !important;

}

loreleiarmina’s picture

loreleiarmina commented

I am having the same issue.

Site I'm having issues with is here: http://gt3.grey-tower.net/

In IE8, it's showing a large amount of unwanted padding around the images. In Firefox the menus and everything work the way they should, but I cannot get rid of the bullets. In Chrome it works just fine.

Firebug in Chrome shows that my CSS is being utilized. Firebug in Firefox doesn't show me anything except font and size settings, which is really confusing.

Thoughts?

Edit: and I have tried every suggestion mentioned so far in this thread and then some. I've honestly probably got overload of list-style: none and need to go clean it up.

Edit #2:

If I use firebug in firefox to find these classes:

menu, ol, ul, .item-list ul

and I edit it to add list-style: none;

the bullets disappear. Yay!

However.....when I added that line to my CSS on the site, it doesn't change. :|

Edit #3:

Fixing all my excess of CSS from earlier fixed it. So never mind. :P