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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    navigation menu issue

    http://staging.phantasea.net/cpi/

    Having an issue with the css of the navigation tabs at the above site... the right corner of three of the tabs is the right color, but it's possibly sitting behind another transparent element. I'm about to go crazy because I can't figure out how to correct the code or get it to look correct. Any help is very much appreciated-- this is holding up the launch of the site. Thanks!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    It's coming from this background image:

    Code:
    #navigation-menu ul.sf-menu > li > a {
        background: url("../images/menu-btn_r.png") no-repeat scroll right top transparent;
        border: 0 none;
        color: #E8E8E8;
        cursor: pointer;
        display: block;
        padding: 0 20px 0 0;
        text-decoration: none;
    }
    This is appearing on top of the right hand side of the tab which is set on the li element. Remove that and you should be OK.

    Firebug makes finding this sort of thing a bit easier.

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your prompt reply! I've replaced the above code you spoke of with the one below... I can't figure out why it's not showing up and the old one still is. any ideas??

    Code:
    #navigation-menu ul.sf-menu > li > a {
        background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-with-arrow-btn_rtur.png) top right no-repeat scroll transparent;
        display: block;
        padding: 0 20px 0 0;
        color: #e8e8e8;
        text-decoration: none;
        border:0 none;
        cursor: pointer;
    }

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I think you just need to remove the background image on the a element.

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still didn't work... can you look at it now... I tried something else. Thanks!

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    No, that's made it worse. Find your style.css. At line 1414 you have:

    Code:
    #navigation-menu ul.sf-menu > li > a {
        background: url("../images/menu-btn_r.png") no-repeat scroll right top transparent;
        border: 0 none;
        color: #E8E8E8;
        cursor: pointer;
        display: block;
        padding: 0 20px 0 0;
        text-decoration: none;
    }
    Delete the background style. Then find line 1443:

    Code:
    #navigation-menu ul.sf-menu > li > a.sf-with-ul {
        background: url("../images/menu-with-arrow-btn_r.png") no-repeat scroll right top transparent;
        padding: 0 26px 0 0;
    }
    and delete the background on that as well. If you do that it looks like the attachment - which I think is what you want?

    You have the right hand of the tab set as the background image on the li element, and the left hand set on the span element contained within the a. You don't need the extra image on the a element.
    Attached Thumbnails Attached Thumbnails navigation menu issue-fireshot-screen-capture-192-cookbook-publishers-inc_-staging_phantasea_net_cpi.jpg  

  • #7
    New Coder
    Join Date
    Apr 2012
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got it-- thanks for your help!!!


  •  

    Posting Permissions

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