Current time: 04-21-2014, 12:51 AM Hello There, Guest! (LoginRegister)

Post Reply 
CSS - removing list bullets for one list
11-13-2006, 03:09 AM
Post: #1
CSS - removing list bullets for one list
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
Find all posts by this user
Quote this message in a reply
11-13-2006, 03:58 AM
Post: #2
CSS - removing list bullets for one list
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.

--------------------------------------------------------
Tongue Save up to $96 at Dreamhost with ALMOST97 promo code (I get $1).
Or save $97 with THEFULL97.
Visit this user's website Find all posts by this user
Quote this message in a reply
11-13-2006, 06:34 AM
Post: #3
CSS - removing list bullets for one list
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.]
Find all posts by this user
Quote this message in a reply
11-15-2006, 05:44 AM
Post: #4
CSS - removing list bullets for one list
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 Smile)
link me
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump: