www.webdeveloper.com
Results 1 to 5 of 5

Thread: Styling nested lists...

  1. #1
    Join Date
    Jul 2005
    Location
    KC Metro area, Missouri
    Posts
    67

    Styling nested lists...

    OK. Here's the deal.

    I want to use a custom list image for the primary list item. Some of the list items will have sub-lists. For each of the sub-list items, I just want to use a disc. This can all be done with in-line styling, of course, but that's just messy and dumb. Heres the HTML example:
    ...
    <ul class='mylist'>
    <li>Item 1</li>
    <li>Item 2
    <ul>
    <li>Sub-item 1</li>
    <li>Sub-item 2</li>
    </ul>
    </li>
    <li>Item 3</li>
    </ul>
    ...
    So the styling should look like this:

    <style type='text/css'>
    /* top level */
    .mylist ul { list-style-type:none; }
    .mylist ul li { list-style-image:url(/images/some_small_image.gif); }
    /* second level */
    .mylist ul li ul { list-style-type:none; }
    .mylist ul li ul li { list-style-type:disc; }
    </style>

    This doesn't work in either FF or IE6 or IE7

    You'd think the browser could follow this kind of logic where I'm saying "Do this for the top level list items" and "Do this for the second level list items."

    I have used several iterations of the styling. Searching for a solution produced only one solution. There the author just gave up and used "list-style-type:none" and then background images and padding on the left for the list. That works for him and for me, but it seems like walking away from the original problem, which should be solvable.

    I'll ask for a styling rewrite, but an explanation will do.
    A man has to believe in something. I believe I'll go fishing.

  2. #2
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    Code:
    <style type='text/css'>
    /* top level */
    ul.mylist { list-style-type:none; }
    ul.mylist li { list-style-image:url(/images/some_small_image.gif); }
    
    /* second level */
    ul.mylist li ul { list-style-type:none; }
    ul.mylist li ul li { list-style-type:disc; }
    </style>
    Format: [selector] [dot(class) or hash(id)] [id/class name]

    The way you have it listed would work, if you had a parent element (such as a div) with class="mylist".
    Last edited by OctoberWind; 12-22-2008 at 07:23 PM.

  3. #3
    Join Date
    Jul 2005
    Location
    KC Metro area, Missouri
    Posts
    67
    I do believe this makes perfect sense. I'll try this tomorrow.

    Is this a precedence issue? Are ordered and unordered lists "subordinate" to <div> and <p> tags in CSS? You may answer this if you like, but I'll do the research and post it myself. This could be an enlightening post for me.
    A man has to believe in something. I believe I'll go fishing.

  4. #4
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    The term is "Specificity" rather than Precedence. It's a rather big topic, but specificity is a very key topic to understand when it comes to complex CSS. and nesting elements and styles.

    What your initial code was looking for was an unordered list, inside of an unordered list, inside anything* that has the class="mylist"

    *anything, because the selector was left off, and you just had the class declaration.

    By declaring that the first ul has the "mylist" class, you are specifying an exact list, otherwise, it would apply the background image to *every* top level list, inside that open class of "mylist".

    Are ordered and unordered lists "subordinate" to <div> and <p> tags in CSS?
    Nope. There are very few 'subordinate' selectors when it comes to html/css. ol/ul>li, dl>dt/dd, any maybe a couple more. You could have unordered lists as the very first tag inside the <body> before any div or p tags.

  5. #5
    Join Date
    Jul 2005
    Location
    KC Metro area, Missouri
    Posts
    67

    Works like a charm...

    Thanks so much.

    With not too much effort I found the following:

    CSS Structure and Rules

    This and a refresher course with two of my CSS reference books (well thumbed and with coffee stains all over them) made me realize that I "us'ta" know these subtleties.

    Thanks for the help.
    A man has to believe in something. I believe I'll go fishing.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles