I am trying to use a RadTabStrip control with a Close button on every tab. The Close button is created using TabTemplates.
Everything works fine, with the exception of IE6, where even though I use the styles provided in the Telerik example for the IE6 to fix the line-height bug, it still does not render properly. The bottom of the tabs is slightlly missaligned.
I have included a screen shot of the problem (UISample.JPG). Also, bellow I listed the sample aspx code and the css I am using.
I have tried to play with the css style, but I did not manage to get it to work properly. Does anybody have a solution for this ?
Thanks a lot for the help !
This is the aspx code:
Everything works fine, with the exception of IE6, where even though I use the styles provided in the Telerik example for the IE6 to fix the line-height bug, it still does not render properly. The bottom of the tabs is slightlly missaligned.
I have included a screen shot of the problem (UISample.JPG). Also, bellow I listed the sample aspx code and the css I am using.
I have tried to play with the css style, but I did not manage to get it to work properly. Does anybody have a solution for this ?
Thanks a lot for the help !
This is the aspx code:
<
head
runat
=
"server"
>
<
title
>Untitled</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"styles.css"
/>
</
head
>
<
body
>
<
form
id
=
"mainForm"
runat
=
"server"
>
<
telerik:RadScriptManager
runat
=
server
ID
=
"ScriptManager"
></
telerik:RadScriptManager
>
<
div
>
<
telerik:RadTabStrip
ID
=
"RadTabStrip1"
runat
=
"server"
SelectedIndex
=
"0"
Skin
=
"Vista"
ScrollChildren
=
"true"
ScrollButtonsPosition
=
"Middle"
Orientation
=
"HorizontalTop"
>
<
TabTemplate
>
<
div
class
=
"textWrapper"
>
<%# DataBinder.Eval(Container, "Text") %>
</
div
>
<
span
class
=
"ie6shim"
></
span
>
<
img
src
=
"Images/Close.gif"
alt
=
"Close"
onclick
=
"deleteTab('<%# DataBinder.Eval(Container, "
Text") %>')" />
<
TabTemplate
>
<
Tabs
>
<
telerik:RadTab
runat
=
"server"
Selected
=
"True"
Text
=
"Tab1"
></
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Tab2"
></
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Tab3"
></
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
</
div
>
</
form
>
</
body
>
This is the styles.css file:
.tabStrip
{
position:absolute;
top:0;
}
.rtsIn img
{
vertical-align:middle;
width: 14px;
height: 14px;
margin-left: 10px;
}
.rtsIn .textWrapper
{
display: inline;
}
/* IE6 fixes for line-height bug */
* html .rtsIn img
{
margin-bottom: 10px;
}
* html .rtsIn .textWrapper
{
float: left;
height:26px;
}
* html .rtsIn .ie6shim
{
height: 26px;
display: inline-block;
}