CODEWITHSUNDEEP
htmlcssborder
b0x0rz
b0x0rz

Reputation: 3981

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 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 :( :(

Upvotes: 0

Views: 2749

Answers (3)

Tim Yates
Tim Yates

Reputation: 5291

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.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 2

Niklas
Niklas

Reputation: 30002

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/

Upvotes: 1

Related Questions