DD Tabcontent modifications

[bavarian]

1) Script Title: Tab Content Script

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

3) Describe problem: instead of those 2 different SHADE.gif files i would like the tabs to be made of 2 gif-files, that are NOT x-repeat_ing, but filling the tab in it's whole width.

been tricking around like an idiot but cannot figure out how. for example i tried this ...

.shadetabs li {
display: inline;
margin: 0;
width: 130px;
}

since the images i want to use as tabs are 130px in width i thought this would be the solution .... but no, the tabs are only as wide as the text in them demands ...

somebody willing to direct me into the correct direction to resolve this ? big thanks in advance !

[jscheuer1]

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

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

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected a {
position: relative;
top: 1px;
z-index:100;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontentstyle{ /*style of tab content oontainer*/
clear:left;
position: relative;
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block!important;
}
}