Results 1 to 3 of 3

Thread: DD Color Tabs Not Rounded

  1. #1
    Join Date
    Aug 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DD Color Tabs Not Rounded

    DD Color Tabs II

    http://www.dynamicdrive.com/style/cs...color-tabs-ii/


    I have decided my page looks better when these tabs are squared off, but I still need to figure out why I can't make them rounded as the images should make them. My page background is brown; the corners of the tabs appear white.

    Thanks for your help! Here's the code:

    <style type="text/css">

    #invertedtabs{
    margin-left: 4px
    padding: 0;
    width: 760px;
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
    }

    #invertedtabs ul{
    font: bold 11px Arial, Verdana, sans-serif;
    margin:0;
    margin-bottom: 1em; /*margin between menu and rest of content*/
    padding:0;
    list-style:none;
    }

    #invertedtabs li{
    display:inline;
    margin:0 2px 0 0;
    padding:0;
    text-transform:none;
    line-height: 1.5em;
    }

    #invertedtabs a{
    float:left;
    color: white;
    background: #005500 url(color_tabs_left2.gif) no-repeat left bottom;
    margin:0 2px 0 0;
    padding:0 0 0 3px;
    text-decoration:none;
    letter-spacing: 1px;
    }

    #invertedtabs a span{
    float:left;
    display:block;
    background: transparent url(color_tabs_right2.gif) no-repeat right bottom;
    padding:3px 9px 3px 6px;
    }

    #invertedtabs a span{
    float:none;
    }

    #invertedtabs a:hover{
    background-color: #998659;
    }

    #invertedtabs a:hover span{
    background-color: #007000;
    }

    #invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
    background-color: #007000;
    }

    #invertedtabsline{
    clear: both;
    padding: 0;
    width: 760px;
    height: 8px;
    line-height: 8px;
    background: #005500;
    border-bottom: 1px solid #C0B395; /*Remove this to remove border between bar and tabs*/
    }

    </style>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That part of the color scheme is not set in the css. The two images are basically transparent. However, each contains a small white area which is the 'corner'. If you want different colored corners, you must edit the two images in an image program and change the color of each one's 'corner' to your desired color.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks! Thats pretty easy to see now.

Bookmarks

Posting Permissions

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