CSS Issue With JQuery UI Tabs

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

Solution 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.