First of all,I'm using the entire radcontrol suite Q2 2009 SP1. The problem I'm having is that I have a page with a rad tab strip that seems to be functioning correctly but in IE, when I click on one tab, they both appear with the style of a selected tab. This is not happeneing in FireFox.
Here is my tabstrip definiton:
<
telerik:RadTabStrip ID="tabstrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" Skin="Simple">
<Tabs>
<telerik:RadTab runat="server" Selected="True" Text="Core Curriculum">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Organ Systems">
</telerik:RadTab>
</Tabs>
</
telerik:RadTabStrip>
I should say that I have tried several skins and always have the same issue.
Here is an abbreviated version of my multipage setup:
<telerik:RadMultiPage id="RadMultiPage1" runat="server" SelectedIndex="0">
<telerik:RadPageView ID="pageViewCC" runat="server">
<table cellspacing="0" cellpadding="0" width="780" border="0">
<tbody>
<tr>
<td>
<table border="0" width="100%" cellpadding="7" cellspacing="0" style="background-color:#ffffff;">
<tr style="padding-bottom:3; padding-left:10; padding-right:10;">
<td valign="top">
<span class="font14" style="color:#0f424f;"><b>Browse by Curricular Topics</b></span><br />
<span class="font11">Find content on our site using this list of topics derived from the ACPE Core Curriculum.</span>
<br/>
<table width="100%" cellpadding="0" cellspacing="0" style="background-color:#ffffff;BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid; margin-top:5px;">
<tr>
<td style="height: 36px;" >
<telerik:RadAjaxPanel ID="rapViewCC" runat="server">
<table border="0" style="height:100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<!-- details deleted -->
<td id="tdLeft" width="30%" style="min-width:30%;" class="font12" valign="top" align="left">
<table class="CellHolder" bgcolor="#ffffff" cellspacing="0" cellpadding="0">
<tr><td runat="server" id="tdClinicalScience" style="padding-top:3px; padding-right:3px; padding-left:3px;" class="font11noMarginTRLPadding"> <b><asp:LinkButton ID="lnkbtClinicalScience" runat="server" Text="Clinical Science"></asp:LinkButton></b></td></tr>
<tr><td runat="server" id="tdAdministrativePharmacySciences" style="padding-top:3px; padding-right:3px; padding-left:3px;" class="font11noMarginTRLPadding"> <b><asp:LinkButton ID="lnkbtAdministrativePharmacySciences" runat="server" Text="Social, Behavioral, & Administrative Pharmacy Sciences"></asp:LinkButton></b></td></tr>
<tr><td runat="server" id="tdPharmaceuticalSciences" style="padding-top:3px; padding-right:3px; padding-left:3px;" class="font11noMarginTRLPadding"> <b><asp:LinkButton ID="lnkbtPharmaceuticalSciences" runat="server" Text="Pharmaceutical Sciences"></asp:LinkButton></b></td></tr>
<tr><td runat="server" id="tdBasicBiomedicalSciences" style="padding-top:3px; padding-right:3px; padding-left:3px;" class="font11noMarginTRLPadding"> <b><asp:LinkButton ID="lnkbtBasicBiomedicalSciences" runat="server" Text="Basic Biomedical Sciences"></asp:LinkButton></b></td></tr>
<tr><td id="tdSpaceHolder" style="height:100%" class="font11noMarginRLPadding" ></td></tr>
</table>
</td>
<td style="width:15px;" > </td>
<td id="td2" valign="top" class="font12" align="left">
<table>
<tr><td class="font12" style="vertical-align:top;"><div style="float:left;"><asp:Image ID="imgTopic" runat="server" BorderWidth="0" ImageUrl="~/images/icon_bio.gif" /></div>
<div style=" color:#660000; float:left; margin-top:13px; padding-left:10px;"><b><asp:Label ID="lblTopicname" runat="server"></asp:Label></b></div></td></tr>
<tr><td style="padding-left:30px;">
<div style="width:450px;overflow-x:hidden;">
<telerik:RadTreeView style="overflow:hidden;"
ID="currTopicTreeView"
runat="server" ShowLineImages="False"
OnClientMouseOver="onMouseOver"
OnClientNodeClicked="ClientNodeClicked"
OnClientNodeClicking = "ClientNodeClicking"
>
</telerik:RadTreeView>
</div>
<script type="text/javascript">
function onMouseOver(sender, e)
{
e.get_node().unhighlight();
//e.get_node().get_textElement().innerHTML = '<span style=\'color:#660000;\'>' + e.get_node().get_text() + '</span>'
}
function ClientNodeClicked(sender, eventArgs)
{
var node = eventArgs.get_node();
node.unhighlight();
node.toggle();
}
function ClientNodeClicking(sender, eventArgs)
{
eventArgs.get_node().unhighlight();
}
</script>
<br /></td></tr>
</table>
</td>
</tr>
</table>
</telerik:RadAjaxPanel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</telerik:RadPageView>
<telerik:RadPageView ID="pageViewOS" runat="server">
<table border="0" width="780" cellpadding="7" cellspacing="0" bgcolor="#ffffff">
<tr style="padding-bottom:3; padding-left:10; padding-right:10;"><td>
<table cellpadding=0 cellspacing=2>
<tr><td><img src="/images/icon_organ.gif" border="0"></td>
<td><font class="font14" color="#0f424f"><br><b>Browse by Organ Systems</b></font>
<br class="Spacer2">
<font class="font11">Find content on our site using this list of organ systems, adapted from the <a href='resourceToc.aspx?resourceID=406'> Pharmacotherapy</a> table of contents. For information on additional clinical topics, please SEARCH the full site.</font></td>
</tr></table>
</td>
</tr>
<tr>
<td colspan=2>
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="height:100%; BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid">
<tr>
<td style="height: 36px" >
<telerik:RadAjaxpanel ID="rapOS" runat="server">
<table border="0" style="height:100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td id="tdParentCell" width="200" class="font12" valign="top" align="left">
<table class="CellHolder" bgcolor="#ffffff" cellspacing="0" cellpadding="0">
<asp:Repeater ID="rptParents" runat="server">
<!-- details deleted-->
</asp:Repeater>
</table>
</td>
<td width="15" ></td>
<td id="tdChildCell" class="font12" valign="top" align="left"> <asp:Label id="lblChild" runat="server"></asp:Label></td>
</tr>
</table></telerik:RadAjaxpanel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</telerik:RadPageView>
</telerik:RadMultiPage>
Again, it works fine in FF. Has anyone seen this before?