css tabstrip , how to move bottom line

[BitShift]

I am looking at an example of using CSS that builds a tabstrip and a box with a border around it. Im wondering if there is any way to remove the line at the bottom of the active tab?

/* uiTabControl ----------------------------------------------------- */
.navUnselected { 
FONT-WEIGHT: bold; COLOR: #29649E;
BORDER-TOP: 1px solid #29649E;
BORDER-LEFT: 1px solid #29649E;
BORDER-RIGHT: 1px solid #29649E;
BORDER-BOTTOM: none;/*BORDER-BOTTOM: 1px solid #fff;*/
BACKGROUND-COLOR: transparent;
}
.navSelected { 
FONT-WEIGHT: bold; COLOR: #6F9ED4;
border: 1px solid #29649E;
BACKGROUND-COLOR: #29649E;
}
.navSelected, .navUnselected {
 display: inline; /* explicitly force to be inline */ 
 PADDING-RIGHT: 10px; PADDING-LEFT: 10px;
 PADDING-BOTTOM: 5px; PADDING-TOP: 5px; 
 TEXT-DECORATION: none;
 LINE-HEIGHT: 24px;
 FONT-SIZE: 10px;
 FONT-FAMILY: verdana, arial, sans-serif;
 margin-right: 3px;
}
/* ------------------------------------------------------------------ */
DIV.box {
BORDER: 1px solid #29649E;
margin-top: 0px;
padding: 10px;
 HEIGHT: 115px; WIDTH: 450px;
}

[edited by: DrDoc at 8:48 pm (utc) on Oct. 19, 2006]
[edit reason] No URLs, please. See TOS. [/edit]

[penders]

Have you tried setting the width of the bottom border of your .navSelected class to 0 (zero)? Assuming that this is the class used on your 'active tab'?

.navSelected { 
... 
border: 1px solid #29649E; 
border-bottom-width:0; 
... 
}

I would have said that ideally, your CSS rules should also be all lower-case - in case you ever need to use XHTML in the future. It seems to be more of the convention anyway.

Would perhaps need to see your HTML markup if you still have your bottom borders...

[BitShift]

well, yes, but actually its the <div> that forms the box around the content area. The tabs (which are nothing but links) are just above the div and so its really the div that needs its border set to 0, but on in the area where the selected tab is. one way of doing this might be to use a taller area for the selected tab and overlap the <div> slightly. not sure how to do it.

[penders]

Ah, ok, gotcha... is it not possible to clear the top border of your DIV entirely, and just set the bottom border on all your navUnselected tabs, but not on your navSelected tab? The bottom border on your tabs then acts as the top border of your DIV. If your tabs don't stretch the full with of the content DIV, then you may need a 'dummy' DIV that fills the gap and provides the remaining bottom (top DIV) border?