Need to change the color of 1 tab in a series of tabs

Discussion in 'CSS' started by cvonnieda, Aug 29, 2009.

0
  1. #1
    I am working on a site: especially4utours.com which uses tabs across the top for navigation. My client wants the "specials" tab to stand out. For example that one would be red versus orange. The tab has a unique ID attribute but when I adjust the CSS for that ID: "specials_tab" no change occurs. I'm sure there is a way to do it but I don't know how. The CSS for the menu is below. Any help would be greatly appreciated!

    /*************************************
    Horizontal Menu
    **************************************/
    #menu {
    width: 900px;
    height: 29px;
    background: transparent;
    font-size: 18px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 0px;
    margin: 21px 0px 0px 0px;
    text-align: left;
    text-transform: uppercase;
    clear: both;
    float: left;
    }
    #menu ul {
    display: block;
    float: left;
    width: 880px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 10px;
    }
    #menu li {
    float: left;
    list-style-type: none;
    margin: 0px -4px 0px 4px;
    padding: 0px;
    background: url(images/menu.jpg) top left no-repeat;
    }
    #menu ul li:hover, #menu ul li.hover, #menu ul li.current_page_item {
    background: url(images/menu-active.jpg) top left no-repeat;
    }
    #menu ul li:hover a, #menu ul li.hover a, #menu ul li.current_page_item a {
    color: #FF6D01;
    text-decoration: none;
    background: url(images/menu-active.jpg) top right no-repeat;
    }
    #menu ul li.current_page_item a:hover {
    text-decoration: underline;
    }
    #menu ul li a {
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 11px;
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 6px 21px 10px 0px;
    margin: 0px 0px 0px 12px;
    background: url(images/menu.jpg) top right no-repeat;
    }
    #menu ul li a:hover {
    color: #FF6D01;
    text-decoration: none;
    background: url(images/menu-active.jpg) top right no-repeat;
    }
     
    cvonnieda, Aug 29, 2009 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Funny, you claim you're targetting some id called "specials_tab" but this doesn't seem to exist in your CSS.

    No wonder it's not getting special styles. You aren't giving it any. In fact, you're not mentioning it at all.
     
    Stomme poes, Aug 31, 2009 IP
  3. cvonnieda

    cvonnieda Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks captain obvious...Since the CSS I tried didn't work I removed it. You are seeing just the CSS without any special syles for that tab.
     
    cvonnieda, Aug 31, 2009 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Could we please see what you tried
    and
    your HTML (at least the HTML of the menu including the menu's container)?

    ...with at least one tab having the special_tabs id?

    As a side note, you are giving both :hovered li's and :hovered a's the same background image... is that on purpose or was one of them not showing up? Otherwise, if being on the anchors alone were good enough, you could reduce clutter by removing the statement about li:hovers and the background colour... your a:hover statements are taking care of the text colour etc.
     
    Stomme poes, Aug 31, 2009 IP