Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Completly Sumped

Status
Not open for further replies.
Krus1972

Krus1972

Programmer
Mar 18, 2004
145
US
I am working on some simple tabs for my website. They can be seen here:


The problem is the white space in between each of the larger spaces marked "Tab x". I am trying to make the bottom border color of each of these small spaces something other then white. For the life of me no matter what I do in CSS the borders of these small spaces ALWAYS stay white. The border width changes ok within the CSS, but, I cannot get the border color to change no matter how I define the border-color in the CSS. These little spaces use a TD width="5" and class="tabs2" in the code below. I would appreciate it if anyone could help. My HTML code and CSS is below:

HTML Code:

<head>
<link rel="stylesheet" type="text/css" HREF="/stylesheet/mainnew.css" />
</head>

<body>

<br />

<TABLE class="tabtable" WIDTH="973" ALIGN="CENTER" cellspacing="0">
<tr>
<TD class="tabselected" valign="middle" width="240" height="44">
<center>Tab 1</center>
</td>

<TD class="tabs2" width="5" height="44">
</TD>


<TD class="tabs" valign="middle" width="240" height="44">
<center>Tab 2</center>
</td>

<TD class="tabs2" width="5" height="44">
</TD>

<TD class="tabs" valign="middle" width="240" height="44">
<center>Tab 3</center>
</td>

<TD class="tabs2" width="5" height="44">
</TD>


<TD class="tabs" valign="middle" width="240" height="44">
<center>Tab 4</center>
</td>
</tr>
</table>

</body>
</html>

CSS CODE (mainnew.css):

.tabs
{
border-color:#999;
border-style:solid;
border-width:1px 2px 2px; 1px;
float:left;
margin:0 5px 0 0;
background-image:url(background-attachment:scroll;
background-color:#eee;
background-position:0 -1px;
background-repeat:repeat;
}



.tabs2

{
border-bottom:2px solid #2472c2;

}



.tabselected
{


border-left:1px solid #999;
border-right:2px solid #2472c2;
border-top:4px solid #2472c2;
}


.tabtable

{

list-style:none outside none;
margin:0;
padding:0 0 0 10px;
height:44px;

}




Thanks for any help!
 
Sort by date Sort by votes
you will probably have better luck building tabs without the use of tables. tables are designed for one thing: tabular data. which tabs are not. a better approach would be to use an unordered list with the appropriate CSS and javascript to handle navigation. the jqueryui library has very nice cross browser tabs .

Jason Meckley
Programmer

faq855-7190
faq732-7259
 
Upvote 0 Downvote
For some odd reason, it seems not to apply borders to empty table cells - such are the mysteries of table-based layouts.

If you stick with this approach, do this instead for your spacer cells:
Code: 
<TD class="tabs2" width="5" height="44">&nbsp;</TD>

However, it's possible to get the same visual effect without all that table markup:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Tab Test</title>
<style type="text/css">

ul.tabs
{
list-style:none;
margin:0 auto;
padding:0;
width:992px; /* (tab width + borders + margin) x 4 */
border-bottom:2px solid #2472c2;
}

.tabs li
{
border-color:#999;
border-style:solid;
border-width:1px 2px 2px 1px;
float:left;
margin:0 5px 0 0;
background: #eee url([URL unfurl="true"]http://product.info/images/tabs.gif)[/URL] repeat-x;
width: 240px;
height:44px;
position:relative;
top:2px; /* Nudge tabs down to cover ul border */
line-height: 44px;
text-align:center;
}


.tabs li.selected
{
border-right:2px solid #2472c2;
border-top:4px solid #2472c2;
border-bottom-color: #fff;
height:41px;
line-height: 41px;
background: #fff;
}


</style>
</head>

<body>

<br />
<ul class="tabs">
  <li class="selected">Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
  <li>Tab 4</li>
</ul>


</body>
</html>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top