Can't lose the bullets in UL inside a Spry widget
 

Please see this practice, noodling around page I'm using to learn a number of different things. For the moment, I'm just trying to get rid of the circles beside the sub-lists under "Subject Index" and "About Us." Looking over the code, you'll see I've specified "none" for the "list-style-type" in a couple of rules, but they're being overridden somehow. But where?

Ignore the Twitter feed. It was just another widget I was playing around with. I'm very new at DIV-based web design in general, and Javascript widgets in particular.

Many thanks. The more I learn, the more I'll start scanning the discussions to answer questions myself. For the moment, I think a little knowledge is still a dangerous thing.

Rob

Hi Rob,

I didn't see where you were styling the <li> tag. To remove bullets from lists, you should add:

teedoff . . .

I've used list-style-type:none in two CSS rules: CollapsiblePanelContent, and CollapsiblePanelContent ul li a. Either or both of these should work on any DIV in the class CollapsiblePanelContent, right?

But I did try adding the property right in the ul tag, and had no luck there, either.

Rob

You MUST specify this rule on the <li> tag as I said above, not the <ul> tag or thos other id/classes you mentioned. Copy the code I posted above and paste it in your stylesheet.

This does work like a charm. And it's fine on this page, but I'm still not clear on why the other CSS rules didn't work. And if I had another list on the page I did want with bullets, I'd have to get more specific anyway.

Thanks for the help with the immediate problem, though, Teed.

Rob

You never targeted the list tag of any parent element. You targeted the <a> of a list that was the child of CollapsiblePanelContent, but not the li.

Remember, you're not trying to remove the bullets from a div or an a tag, but rather from a list item.

Now, if you had more than one list on a page and wanted to keep bullets on one but not another, you could give the one list items a class like:

.firstList li {list-style-type: none;}

Then that would only target list items with a class of firstList.