css 'tab' fix > bottom border of a tab

@ http://jsfiddle.net/ktCb8/3/ you can see the example.

what do i need to do to get the bottom b开发者_StackOverfloworder on the 'tab' to be WHITE when hovering over one 'tab' (so that the tab over which hover is done is connected to the panel bellow and does not have the gray line).

thnx

latest > http://jsfiddle.net/ktCb8/27/ still cant get it to work :( :(

---

Just amend:

#contentBox > li:hover, #contentBox ul
{
    border: 1px solid #CCC;
    background-color: #FFF;
}

to:

#contentBox > li:hover, #contentBox ul
{
    border: 1px solid #CCC;
    border-bottom: 2px solid #fff;
    background-color: #FFF;
}

Updated JS Fiddle.

---

Edited in response to question in comments:

That won't put a gray border on the #contentbox ul's bottom though?

It does indeed remove the bottom border from the ul as well, to correct that I'd remove the above change, and simply append this new declaration:

#contentBox > li:hover {
    border-bottom: 2px solid #fff;
}

As in this JS Fiddle demo.

---

Lower the z-index of the content element which appears, and set it's margin-top to 1 less pixel.

http://jsfiddle.net/niklasvh/ktCb8/23/

#contentBox > li:hover ul
{
    position:absolute;
    z-index:-99;
    margin-top:5px;
    display: block;


}

EDIT: Or a minor change to David's sample:

#contentBox > li:hover, #contentBox ul
{
    border: 1px solid #CCC;
    border-bottom-width: 2px;
    background-color: #FFF;
}

http://jsfiddle.net/niklasvh/ktCb8/25/

---

Since your first example does work fine in Firefox, Chrome, and Safari on OS X, and you are seeing issues with the spacing on Chrome and Explorer on Windows, it is obviously a discrepency in the base browser styles.

First, use Reset CSS to make the spacings consistent across browsers. Then adjust the top margin of the content box until the borders align. Be sure to use z-index: -1 on the content box as in your first example, not a positive value as in your second.