CSS - removing list bullets for one list

design

#1

I am after some advice on styling an HTML list with CSS. At the moment I have set up in the stylesheet the following rule to make list item markers (bullets) appear in all lists:

ul {margin: 0; padding: 0;}
ul li {list-style: url(/images/bullet.gif); vertical-align: middle; padding-left: 0.5em;}

But there is one list (perhaps more later down the track) that I want the bullets removed, so for that list I added this:

#sidebar ul {list-style: none; padding: 0; margin: 0;}
#sidebar ul li {list-style: none;}

The bullet-free list in the sidebar displays as intended in Firefox as well as in Safari, but not in IE (WinIE6): IE seems to just push the bullets to the far left, leaving just a fraction of each bullet showing.

Is this a case of error on my part or is this a browser support issue? I would be grateful for any help correcting the problem.

  • marsbar

#2

I’m tired, so I could be wrong… but I think list-style:none only needs to be applied to ul. If you remove it from li, does it change anything with IE? If not, how about the other way around?

What happens if you play with padding-left?

Maybe try defining the style right in the UL tag with something like this: style=“list-style:none;”

If that makes a difference, I’d probably just give the whole style sheet a second look to see if there’s anything that could be confusing IE.

Other than that, maybe post the URL to see if anything stands out. Or even a screen shot of that area & the CSS file contents, if it’s not a site you want to post here.


:stuck_out_tongue: Save up to $96 at Dreamhost with ALMOST97 promo code (I get $1).
Or save $97 with THEFULL97.


#3

Many thanks for your suggestions, seiler. The solution seems to be to specify the width of the list that is intended to be bullet-free, in my case it is the list within div sidebar:

ul {margin: 0; padding: 0;}
ul li {list-style: url(/images/bullet.gif); vertical-align: middle; padding-left: 0.5em;}
#sidebar ul {padding: 0; margin: 0; width:100%; list-style: none;} /* this keeps WIN IE6 happy /
#sidebar ul li {list-style:none;} /
this keeps WIN Firefox happy */

I will need to check whether or not the style rules are supported by other browsers on other platforms.

Cheers,
marsbar


Tests that did not work:

i. removing list-style:none from #sidebar ul li
[Result: no difference]

ii. removing list-style:none from #sidebar li
[Result: no difference]

iii. adjusting padding-left
[Result: increasing padding-left only widened the gap between each part–partly hidden–bullet and list item; decreasing padding-left did not seem to do anything.]

iv. use inline style: style=“list-style:none;”
[Result: again, no difference.]


#4

perhaps you should use li.sidebar { list-style:none; }

because the listitems you want to effect have the class or id “sidebar”


slauson.dreamhost.com rocks! (so does my site :))
link me