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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    remove inset from UL inside another UL?

    Hey all

    I'm putting together this site for a friend who's using WordPress as a CMS. Everything is working beautifully, apart from the sub-menu items. WordPress automatically used UL and LI for its primary links. If you have a 'subpage', it's rendered as another UL inside the original, like so:

    Code:
    <ul id="menulist">
    <li class="page_item current_page_item"><a href="./" title="Home">Home</a></li>
    <li class="page_item"><a href="./?page_id=4" title="Business Services">Business Services</a>
      <ul>
      <li class="page_item"><a href="./?page_id=5" title="Bookkeeping &#038; Payroll">Bookkeeping &#038; Payroll</a></li>
      <li class="page_item"><a href="./?page_id=6" title="Accounting &#038; Tax Work">Accounting &#038; Tax Work</a></li>
      <li class="page_item"><a href="./?page_id=7" title="Management Accounting">Management Accounting</a></li>
      </ul>
    </li>
    <li class="page_item"><a href="./?page_id=8" title="Education &#038; Learning">Education &#038; Learning</a></li>
    <li class="page_item"><a href="./?page_id=9" title="Consultancy &#038; Research">Consultancy &#038; Research</a></li>
    </ul>
    If you take a look at http://proactiveresolutions.com/ you'll see the menu on the left and the sub-menu items. I can style them pretty much any way I want, but I can't seem to ditch that padding on the left! I've tried padding and margins, but to no avail. Here's the CSS:

    Code:
    /* MAIN MENU LIST */
    
    #menulist {
    text-align: right;
    width: 185px;
    padding: 0px;
    margin: 0px 10px 20px 10px;
    list-style: none;
    }
    
    /* MENU TITLE ITEM */
    
    #menulist li {
    list-style: none;
    color: #514E33;
    font-weight: bold;
    font-style: italic;
    font-size: 14px;
    font-family: Times New Roman;
    }
    
    /* MENU SUBPAGE ITEM */
    
    #menulist li ul li {
    font-family:  Trebuchet MS;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    }
    
    /* MENU LINK DEFINITIONS */
    
    #menulist a {
    color: #514E33;
    line-height: 10px;
    text-decoration: none;
    border-bottom: 1px dotted #968E5F;
    display: block;
    padding: 6px 16px 6px 10px;
    }
    
    #menulist a: hover {
    background-color: #E4D394;
    }
    Any light you can shed on this would be very gratefully received!
    you are invited | http://www.indextwo.net

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,672
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    I don’t see you having tried to remove the left padding from the sub-list?
    Code:
    #menulist ul {padding: 0;}

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion; this works in Firefox, but not in IE. I don't think I'd noticed it working in FF before.

    Any suggestions for getting it to work in IE? The client doesn't use Firefox, so he won't see any change and still thinks it's broken :/
    you are invited | http://www.indextwo.net

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,672
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Yes I know how: Set the margin too.

    Code:
    ul ul {
      margin: 0;
      padding: 0;
    }
    That’s the first thing I usually do with lists.

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perfect - worked first time! I could have sworn i tried all sorts of combinations with margins and padding *scratches head*

    Thanks!
    you are invited | http://www.indextwo.net


  •  

    Posting Permissions

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