-1

The website is here:

At this page you can see that the tabs are currently blue in colour but I'm currently working with offline files that I'm changing over to the natural green that is seen all over the design of the website. Unfortunately, I have no clue what I've done and feel my tired eyes can't notice the mistake...whether it's in the code or the image...

Offline Tab Navigation Problem: http://i255.photobucket.com/albums/hh157/redbairn/Oops_zps240d13a5.jpg

[The code below is the current code for the Tab navigation:]

     div.content {
    border: 3px solid #095;
    clear: left;
    padding: 1em;
    overflow:hidden;
}

div.content.inactive {
    display: none;
}

ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol#toc a {
    background: #bdf url(tabs.gif);
    display: block;
    float: left;
    height: 2em;
    padding-left: 10px;
    text-decoration: none;
}

ol#toc a:hover {
    background-color: #3af;
    background-position: 0 -120px;
}

ol#toc a:hover span {
    background-position: 100% -120px;
}

ol#toc li {
    float: left;
    margin: 0 1px 0 0;
}

ol#toc li a.active {
    background-color: #095;
    background-position: 0 -60px;
    color: #fff;
    font-weight: bold;
}

ol#toc li a.active span {
    background-position: 100% -60px;
}

ol#toc span {
    background: url(tabs.gif) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}

[Offline/New code:]

div.content {
        border: 3px solid #095;
        clear: left;
        padding: 1em;
        overflow:hidden;
}

div.content.inactive {
        display: none;
}

ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol#toc a {
        color: #008;
        display: block;
        float: left;
        height: 2em;
        padding-left: 10px;
        text-decoration: none;
        background-color: #6c9;
        background-image: url(tabs.gif);
}

ol#toc a:hover {
        background-color: #0c6;
        background-position: 0 -120px;
}

ol#toc a:hover span {
    background-position: 100% -120px;
}

ol#toc li {
    float: left;
    margin: 0 1px 0 0;
}

ol#toc li a.active {
        background-color: #096;
    background-position: 0 -60px;
    color: #fff;
    font-weight: bold;
}

ol#toc li a.active span {
    background-position: 100% -60px;
}

ol#toc span {
    background: url(tabs.gif) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}
red_bairn
  • 73
  • 1
  • 8
  • 1
    You should always use versioning software (like git or mercurial) to keep track of your changes. – XCS Jan 13 '13 at 22:03
  • Please also add some code in the question that illustrates the problem. That way when you fix your site and/or the links to other sites rot this question can still be of use to future visitors with similar problems. – Jeroen Jan 13 '13 at 22:04
  • 1
    CSS3 now allows the use of rounded corner and gradients, so you no longer need those images for tabs. – XCS Jan 13 '13 at 22:05

1 Answers1

0

I think its the image. While you were correct to set the background color to transparent, the image itself to me looks like its got a white background. Open the image in an editor and you will notice the white background in the image. I think if you remove that from your image everything will look great!

Hope this helps you!

Just a quick FYI, in older browsers, like IE5, transparent does not work very well.

FrostyFire
  • 3,212
  • 3
  • 29
  • 53
  • What are you talking about? Nevermind the fact that IE5 is a long dead and buried browser, but it had no problem rendering images with transparency, as long as it wasn't *alpha transparency* on a 32-bit image. You can get alpha transparency on an 8-bit PNG, and it will work all the way down to at least IE4 (it just won't be as pretty as it would be with proper alpha transparency support)! http://www.sitepoint.com/png8-the-clear-winner/ – cimmanon Jan 13 '13 at 23:55
  • 1
    Thanks for the comment whoever you are, but it is true that in some cases with certain backgrounds behind a transparent image, it will not render right. I have experienced it my self. – FrostyFire Jan 13 '13 at 23:58
  • If you're experiencing an inappropriately colored halo, its because you chose the wrong matte color for your image. It's a bit late to be assuming everyone else is coding for a 14 year old browser. Most people don't have *cars* that old. – cimmanon Jan 14 '13 at 00:04
  • 1
    @cimmanon I understand that completely. I use the newest IE browser, just saying. By the way, the reason I said "whoever you are", was not to be rude. The link you gave at the end made me link there was a dash in the link and for some reason your name wasn't showing up. Now I see your name was there all along. Sorry about that – FrostyFire Jan 14 '13 at 03:24