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 border on the 'tab' to be WHITE when hovering over one 'tab' (so that the tab over wh

Solution 1:

Just amend:

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

to:

#contentBox > li:hover, #contentBoxul
{
    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.

Solution 2:

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:hoverul
{
    position:absolute;
    z-index:-99;
    margin-top:5px;
    display: block;


}

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

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

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

Solution 3:

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.