Tab Content Script - same length on each tab?

[bluemoon562]

1) Script Title: Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem: Love this script! Okay, now I just need to figure out how to make each tab the same length. Some have shorter text and content than others but I want to make them even in length.

Okay, I figured out the solution. I was able to make the tabs all even lengths by changing the following:

.tabcontentstyle{
border: 1px solid gray;
width: 630px;
height: 410px;
margin-bottom: 1em;
padding: 10px;
left: 0px;
}

I added height: 410px to the tabcontentstyle. You can increase or decrease the height as you see fit.

It works in Firefox and IE6.

[jscheuer1]

Working from the default style, see this post:

http://www.dynamicdrive.com/forums/s...0&postcount=12

[bluemoon562]

Hi John,

That changed the tabs but didn't affect the length of the boxes the way that I wanted.

There must be an easy way that works.

[jscheuer1]

It standardizes the width of the tabs. What were you looking for?

[lorrens]

You're editing the tabcontent box...
You should edit the .shadetabs

[jscheuer1]

You're editing the tabcontent box...
You should edit the .shadetabs

That's what the post at:

http://www.dynamicdrive.com/forums/s...0&postcount=12

that I mentioned before does, more or less:

.shadetabs li a{
float:left;
width:160px;
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

and:

.contentstyle{
clear:left;
border: 1px solid gray;
width: 450px;
margin-bottom: 1em; padding: 10px;
}

But, I think I left out:

.shadetabs li a{
display:block;
float:left;
width:160px;
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

The width for .shadetabs li a may be adjusted to suit. Width will not apply in all browsers to an anchor unless it is display:block but then there is a line break after each tab hence, float left and then later this must be cleared in the .contentstyle element. Editing the .shadetabs directly didn't work when I tried it.

[vanbao]

I would like to minimize the space between tabs. Where do I change that. I am assuming it is in the css file but I change the paddings but nothing happens.

[rangana]

You should'nt hijack someone's thread
I suppose its the right margin

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

[vanbao]

You should'nt hijack someone's thread

What do you mean? This is in relating to the same topic. Don't you want it to be in the same thread?

Thanks for the help though.

[jscheuer1]

It means that if you have a new question, even if it seems to relate to an existing thread, if it isn't the exact same issue, the current policy is to encourage you to start a new thread in which you define the script you are working with and the exact issue you are having with it. Providing a link to your page is always a good idea as well.