Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problems with Menu Sprites (WordPress)

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #43828
    tannercampbell
    Participant

    Hey all,

    http://50.87.81.92/

    You’ll notice that the Contact menu item has a white background instead of showing the sprite I’ve created. I can’t figure out what’s causing that. I thought another element but there’s nothing there. Any ideas? Here’s my CSS:

    #menu-item-6 a {
    display:block; height:40px; width:127px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
    background-image:url(‘http://50.87.81.92/wp-content/uploads/2013/04/menu-sprite.jpg’); background-position:0 0;
    }
    #menu-item-6 a:hover { background-position:0 -43px; }

    #menu-item-10 a {
    display:block; height:40px; width:127px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
    background-image:url(‘http://50.87.81.92/wp-content/uploads/2013/04/menu-sprite.jpg’); background-position:-130px 0;
    }

    #menu-item-10 a:hover { background-position:-130px -43px; }

    .custom #menu-item-13 a {
    display:block; height:40px; width:127px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
    background-image:url(‘http://50.87.81.92/wp-content/uploads/2013/04/menu-sprite.jpg’); background-position:-260px 0;
    }

    #menu-item-13 a:hover { background-position:-260px -43px; }

    Thanks!
    Tanner

    #130351
    jmacaluso
    Member

    Hi Tanner,

    What is the .custom class doing there in front of #menu-item-13? don’t see it in your markup. so looks like there is no image on that #menu-item

    you should set that background sprite and the height and width on the generic .nav .menu-item a
    in that case you won’t have to keep repeating your styles.
    then change the position based on the #menu-item

    like this:


    .nav .menu-item a {
    display: block;
    width: 127px;
    height: 40px;
    background: url('http://50.87.81.92/wp-content/uploads/2013/04/menu-sprite.jpg') no-repeat;
    }
    .menu-item-10 a {
    background-position: -130px 0;
    }
    .menu-item-13 a {
    background-position: -260px -43px;
    }

    etc.

    hope this helps.

    -John

    #130361
    jmacaluso
    Member

    Ah.. I see. Didn’t take into account your child li’s. I guess the simplest thing to do is this:


    .nav .sub-menu a {
    background-image: none;
    }

    also make sure on your initial .menu-item to add:


    background-repeat: none;
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.