Hello, I am using RadControls for ASP.NET AJAX version 2009.3.1314.20
My Horizontal TabStrip works fine in IE 7, 8, FF & Chrome but in IE 6 the width of each tab seems to be Auto (100%) because the tabs stack vertically one above the other like they should for a vertical tabstrip. I inspected the CSS using IE Developer Tools and when I hover over the DIVs that hold each tab the highligh of the dv spans 100% of the container holding the tab control. I was hoping simply modifying the style to include a fixed width for the tabs and float them left would fix this but either that doesn't work or I am not overriding the appropriate styles. Here is what I have tried but this doesn't work
.RadTabStrip .rtsLI
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
OVERFLOW: hidden;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
width:100px !important;
float:left;
}
.RadTabStrip .rtsLink
{
TEXT-ALIGN: center;
width:100px !important;
}
Any suggestions on how I can fix this issue?
Thanks in advance
Cliff
My Horizontal TabStrip works fine in IE 7, 8, FF & Chrome but in IE 6 the width of each tab seems to be Auto (100%) because the tabs stack vertically one above the other like they should for a vertical tabstrip. I inspected the CSS using IE Developer Tools and when I hover over the DIVs that hold each tab the highligh of the dv spans 100% of the container holding the tab control. I was hoping simply modifying the style to include a fixed width for the tabs and float them left would fix this but either that doesn't work or I am not overriding the appropriate styles. Here is what I have tried but this doesn't work
.RadTabStrip .rtsLI
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
OVERFLOW: hidden;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
width:100px !important;
float:left;
}
.RadTabStrip .rtsLink
{
TEXT-ALIGN: center;
width:100px !important;
}
Any suggestions on how I can fix this issue?
Thanks in advance
Cliff