[logic_earth]

If I may I would like to simplifie your code some.

HTML:

<ul id="tabs">
    <li class="active"><a href="/"><span>Home</span></a></li>
    <li><a href="/"><span>About</span></a></li>
    <li><a href="/"><span>Blablabla</span></a></li>
</ul>

You don't need the wrapping div around it you could just use the UL element. I actually section off my layouts like one would a letter:

<div id="containerMain">
    <div id="sectionHead">...</div>
    <div id="sectionBody">...</div>
    <div id="sectionFoot">...</div>
</div>

Well any ways to the CSS, I didn't change much in fact i would do some things different but for simplicity until I get some time:

#tabs {
    clear:both;
    background: url(Images/tab-bar-background.jpg) repeat-x 0 0;
}

#tabs,
#tabs li {
    float:left;
    
    /* This could be better if the tabs are allowed to scale with the text. */
    height: 24px;

    margin: 0;
    padding: 0;
    
    list-style-image: none;
    list-style-type: none;
}

#tabs .active {
    background: url(Images/tab-active-backgroung.jpg) repeat-x 0 0;
}

#tabs a, #tabs a span {
    display: block;
    float: left;
    padding: 0;
    height: 24px;
}

#tabs a:link,
#tabs a:visited,
#tabs a:hover,
#tabs a:focus,
#tabs  a:active {
    padding-right: 10px;
    text-decoration:none;
    background: url(Images/tab-inactive-right.jpg) no-repeat 100% 0;
}

#tabs .active a:link,
#tabs .active a:visited,
#tabs .active a:hover,
#tabs .active a:focus,
#tabs .active a:active {
    background: #333333 url(Images/tab-active-right.jpg) no-repeat 100% 0;
}

#tabs a span {
  padding-left: 10px;
  background: url(Images/tab-inactive-left.jpg) no-repeat 0 0;
}

#tabs .active a span {
  background: url(Images/tab-active-left.jpg) no-repeat 0 0;
}

Removed some selectors and grouped some things together but still same styling. I should revise this but I'm a little pressed for time at the moment.

Btw Dan the HTML code block doesn't keep the formatting.