Grow your CSS skills. Land your dream job.

Nav Background Position

  • # February 27, 2010 at 12:50 am

    My navigation in my website looks great in every browser except ie. I don’t think it is recognizing the last child. As you can see the right button is not rounded like the left. Any ideas?

    http://www.mtrservices.com/home/

    here is the css for the right button.

    ul.dropdown li:last-child {
    background:url(../images/nav.png) no-repeat top right;
    }

    Thanks!

    # February 27, 2010 at 1:58 am

    ok apparently its internet explorers inability to support the last-child pseudo class. so i tried using the class of that li. It still wont work in IE! I’m using wordpress so the li has two classes. so I think that is my issue. I’m not completely sure though.

    It outputs the following HTML:
    <li class="page_item page-item-11"><a title="Contact" href="http://www.mtrservices.com/contact/">Contact</a></li&gt;

    so in my css I write:
    ul.dropdown li:last-child, ul.dropdown li.page-item-11 {
    background:url(../images/nav.png) no-repeat top right;
    }

    works fine in all the other browsers, not in IE. Any thoughts?

    Thanks!

    # February 27, 2010 at 8:10 am

    uhmmm….

    try this (take it out of the last child block)

    ul.dropdown li.page-item-11 {
    background:url(../images/nav.png) no-repeat top right;
    }

    or this

    ul.dropdown li.page_item.page-item-11 {
    background:url(../images/nav.png) no-repeat top right;
    }

    but I’m guessing it’s the last child thing. For instance. IE won’t work if you combine hacks like *html, *+html {…}

    # February 27, 2010 at 1:49 pm

    Well now I have that working but I can’t seem to get the hover state to work.

    # February 27, 2010 at 1:54 pm

    What worked? What code do you have now?

    # February 27, 2010 at 3:00 pm

    this is what i’ve got so far:

    Code:
    ul.dropdown,
    ul.dropdown li,
    ul.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    ul.dropdown {
    position: relative;
    z-index: 597;
    float: right;
    margin-top: 60px;
    }

    ul.dropdown a {
    color: #dadada;
    text-decoration: none;
    }

    ul.dropdown li {
    float: left;
    vertical-align: middle;
    text-transform: uppercase;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    height: 70px;
    background: url(../images/nav.png) no-repeat top center;
    }

    ul.dropdown li:first-child {
    background: url(../images/nav.png) no-repeat top left;
    }

    ul.dropdown li:last-child, ul.dropdown li.page-item-11 {
    background: url(../images/nav.png) no-repeat top right;
    }

    ul.dropdown li a {
    display: block;
    padding:28px 36px 29px 36px;
    text-align: center;
    }

    ul.dropdown li:first-child a {
    padding-left: 45px;
    }

    ul.dropdown li:last-child a {
    padding-right: 45px;
    }

    ul.dropdown li.hover,
    ul.dropdown li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
    color: #fff;
    background: url(../images/nav.png) no-repeat bottom center;
    }

    ul.dropdown li:first-child.hover,
    ul.dropdown li:first-child:hover {
    background: url(../images/nav.png) no-repeat bottom left;
    }

    ul.dropdown li:last-child.hover,
    ul.dropdown li:last-child:hover,
    ul.dropdown li.page-item-11:hover {
    background: url(../images/nav.png) no-repeat bottom right;
    }

    ul.dropdown li.current_page_item {
    color: #fff;
    }

    ul.dropdown li:first-child.current_page_item {
    background: url(../images/nav.png) no-repeat bottom left;
    }

    ul.dropdown li:last-child.current_page_item,
    ul.dropdown li.page-item-11.current_page_item {
    background: url(../images/nav.png) no-repeat bottom right;
    }

    ul.dropdown ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 300px;
    }

    and for some reason this isn’t working in ie for the hover state:

    Code:
    ul.dropdown li:last-child.hover,
    ul.dropdown li:last-child:hover,
    ul.dropdown li.page-item-11:hover {
    background: url(../images/nav.png) no-repeat bottom right;
    }

    nevermind, the last child / page-item-11 still isnt working for some reason. just checked it again. i think it was working earlier. hmm…

    # February 27, 2010 at 4:47 pm

    see now the right rounded corners on the nav work. i dont know what i did. the rollover doesnt work though.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".