Multiple line titles in css tab menu

[Zoren]

1) Script Title: Ajax Tabs Content script

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

3) Describe problem: I need to create tab titles/links that have two lines of text. I have some long link titles that make the tabbed menu too long. I would like to have multiple lines for some of the links. I would like the long tabs to look like this:

External Companies
and Commissions

Adding a line break <br> destroys the menu. Is there a way to set the width in the css or another way to achieve this? Thanks in advance for looking at my post.
Regards,

Zoren

[jscheuer1]

Give this a shot (additions red):


.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{
text-decoration: none;
position:relative;
top:1px;
display:block;
float:left;
width:2.875em;
height:2.25em;
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{
position: relative;
top: 1px;
}

.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;
}

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

Notes: Most of the changes are to the '.shadetabs li a' selector. But, don't miss the clear:left; added to the '.contentstyle' selector. Width and height for the '.shadetabs li a' selector will probably have to be customized for your layout. No BR tags required, with the right width and height, the text will wrap automatically.