Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Hi Rob,

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

    Code:
    li {
       list-style-type:none;
    }
    Teed

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Rob Greenhorn View Post
    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.
    Teed

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • Users who have thanked teedoff for this post:

    Rob Greenhorn (12-20-2011)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •