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 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cannot get the first/last-child to work on my nav menu.

    I am developing a site at http://mixnob.mybigcommerce.com/ and have run into a snag on my top navigation bar with my main category links. I am not a pro with css but can hack my way around pretty well. I know about the first and last child tags and know about using the first-child first if possible because of better compatibility. But for whatever reason I cannot get it to work to only shut off the first border-left. It shuts off all of them instead. Any help would be appreciated.

    Here's some of the code.

    HTML

    <div id="HeaderUpper">
    <div id="HeaderLower">
    <div id="SideCategoryList" class="CategoryList">
    <h2>Categories</h2>
    <div class="SideCategoryListFlyout">
    <ul class="sf-menu sf-vertical sf-js-enabled">
    <li>
    <a href="http://mixnob.mybigcommerce.com/home/">Home</a>
    </li>
    <li>
    <a href="http://mixnob.mybigcommerce.com/virtual-instruments/">Virtual Instruments</a>
    </li>
    <li>
    <a href="http://mixnob.mybigcommerce.com/plugins/">Plugins</a>
    </li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    </ul>

    CSS

    #SideCategoryList li, #SideCategoryList .sf-menu li {
    }
    #SideCategoryList li:first-child {
    border-left: 0 none;
    }
    #SideCategoryList li, #SideCategoryList .sf-menu li {
    float: left !important;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    width: auto !important;
    }
    #SideCategoryList li, #SideCategoryList .sf-menu li {
    }
    #SideCategoryList li, #SideCategoryList .sf-menu li {
    float: left !important;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    width: auto !important;
    }
    h1, h2, h3, .TitleHeading, .slide-text, #HeaderLower li, .ProductActionAdd, .ProductDetailsGrid .DetailRow.PriceRow .Value, .QuickViewBtn, .btn {
    font-family: Arial,Verdana,Helvetica,Sans-serif;
    }
    .sf-vertical, .sf-vertical li {
    width: 10em;
    }
    .sf-menu li {
    float: left;
    position: relative;

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello brookfloyd,
    Try it like this -
    Code:
    #SideCategoryList li a, #SideCategoryList .sf-menu li a {
        /*border-left: 1px solid #FFFFFF;*/
        color: #FFFFFF;
        display: block;
        font: 16px Arial,Verdana,Helvetica,Sans-serif;
        padding: 8px 0 9px 30px;
        text-decoration: none;
    }
    #SideCategoryList li {border-left: 1px solid #fff;}
    #SideCategoryList li:first-child {border-left: none;}

    ...
    It kind of looks like you were putting two borders on your li's with this
    Code:
    #SideCategoryList li, #SideCategoryList .sf-menu li {
    }
    If that's the case, the CSS you had in place for removing the border on the :first-child removed only one border and did not remove the border off #SideCategoryList .sf-menu li



    ...
    When posting code in the forum, please use the code tags, - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    brookfloyd (01-22-2013)


  •  

    Posting Permissions

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