CSS issue with JQuery UI Tabs

Question

I'm trying to get the tabs in this code snippet to highlight just the top of the active tab and the tab that is being hovered over. You'll notice though, that the current code has a bug where there is a sliver of color appearing underneath the tab. I can't seem to figure out how to get rid of it. I'm using the JQuery UI tab system and it seems like the anchor tags are what is jutting out beneath the li tags. Any suggestions on how to get rid of this bug and close up the gap between the li's and the content?

Here's a fiddle: http://jsfiddle.net/nmbCu/

It's yellow tabs that I'm talking about. I know the image isn't loading but you can see how there's a sliver underneath the image that is lighting up. I want that gone. Any suggestions on how to get rid of it AND the dark grey line beneath that? I basically want the yellow tab system sitting right on top of the light gray background.

Here's some of the relevant bits of code:

Html

<section>
        <div class="tabs">
            <ul>
                <li><a href="#TVHE"><img alt="TV & Home Entertainment" src="images/thumb_TV_normal.png" /></a></li>
                <li><a href="#Headphones"><img alt="Headphones" src="images/thumb_Headphones_normal.png" /></a></li>
                <li><a href="#VAIO"><img alt="VAIO" src="images/thumb_Vaio_normal.png" /></a></li>
                <li><a href="#Tablet"><img alt="Tablet" src="images/thumb_Tablet_normal.png" /></a></li>
                <li><a href="#Reader"><img alt="Reader" src="images/thumb_Reader_normal.png" /></a></li>
                <li><a href="#PortElec"><img alt="MP3" src="images/thumb_MP3_normal.png" /></a></li>
                <li><a href="#Camera"><img alt="Cameras" src="images/thumb_Cameras_normal.png" /></a></li>
            </ul>

And here's some of the relevant bits of CSS:

section {
    background: rgb(187, 187, 187);
    width: 900px;
    padding-bottom: 50px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

section p{
    color: rgb(102, 102, 102);
    font-family: Arial, sans-serif;
    line-height: 18px;
    font-size: 14px;
    margin-right: 20px;
}

section .tabs {
    background: rgb(187, 187, 187);
    width: 900px;
}

section .tabs ul{
    padding: 0;
}

section .tabs ul li{
    list-style-type: none;
    display: inline-block;
    margin-right: -3px;
    text-decoration: none;
}

section .tabs ul li a {
    text-decoration: none;
}

section .tabs ul li:hover{
    background: #FFF773;
}

section .tabs ul li.ui-tabs-active {
    background: #FFF100;
}

section div.tabs div.tabContent {
    width: 895px;
    background: #dddddd;
    text-align: center;
    margin-top: -20px;
    padding-bottom: 50px;
}

div.innerBox {
    background: #dddddd;
    margin: 25px 30px 50px;
    padding: 10px 10px 0;
    width: 800px;
}

Answer 1

update your style like this:

section div.tabs div.tabContent {
    /* other css properties */
    margin-top: -25px;
}

fiddle: http://jsfiddle.net/nmbCu/1/

EDIT to address your comment, see the updated fiddle.

http://jsfiddle.net/nmbCu/2/

I've made a few changes so you might want to compare the old and new CSS. I've removed the negative margin too - basically you were using it to compensate a positive margin applied to the child div, so it is much easier to remove the margin from it.