Hi,
I am using a TabContainer with a custom CSS file. I have copied the original CSS file and have modified it a little. Here is the CSS I am using:
/* xp theme */
/* Our Additions */
.StpAjaxTab
{
margin-left:auto;margin-right:auto;}
.StpAjaxTab.ajax__tab_header{
font-family:verdana,tahoma,helvetica;font-size:11px;
/* Our Additions */
border-bottom:solid1px#000000;text-align:left;}
.StpAjaxTab.ajax__tab_outer{
padding-right:4px;height:21px;}
.StpAjaxTab.ajax__tab_inner{
padding-left:3px;/* Our Additions */
border:solid1px#000000;}
.StpAjaxTab.ajax__tab_tab{
height:13px;padding:4px;
margin:0;}
.StpAjaxTab.ajax__tab_hover.ajax__tab_outer{
}
.StpAjaxTab.ajax__tab_hover.ajax__tab_inner{
/* Our Additions */background-color:#DDDDDD;}
.StpAjaxTab.ajax__tab_hover.ajax__tab_tab{
/* Our Additions */background-color:#DDDDDD;}
.StpAjaxTab.ajax__tab_active.ajax__tab_outer{
}
.StpAjaxTab.ajax__tab_active.ajax__tab_inner{
/* Our Additions */background-color:#DDDDDD;
border:solid1px#000000;}
.StpAjaxTab.ajax__tab_active.ajax__tab_tab{
/* Our Additions */background-color:#DDDDDD;}
.StpAjaxTab.ajax__tab_body{
font-family:verdana,tahoma,helvetica;font-size:10pt;
border:1pxsolid#999999;border-top:0;
padding:8px;background-color:#ffffff;
/* Our Additions */background-color:#DDDDDD;
border:solid1px#000000;border-top:none0px;}
I am using the TabContainer with the CssClass like this
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
<ajax:TabContainerID="TabContainer"runat="server"Width="750px"Height="200px"meta:resourcekey="TabContainer"CssClass="StpAjaxTab">
<ajax:TabPanelID="AlleTrefferTabPanel"runat="server">
<HeaderTemplate>
<asp:UpdateProgressID="UpdateProgress"runat="server">
<ProgressTemplate>
<asp:ImageID="ProgressImage"runat="server"ImageUrl="~/Images/progressIcon.gif"Width="16"Height="16"/>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:LabelID="AlleTrefferLabel"runat="server"Visible="false"Text="Alle Treffer"meta:resourcekey="AlleTrefferLabel"></asp:Label>
</HeaderTemplate>
<ContentTemplate>
Content, you may place a button to generate a partial postback...
</ContentTemplate>
</ajax:TabPanel></ajax:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
If you try this out, you will see, that it will see that it works perfectly on IE. But on firefox, when a partial postback is generated, the tab headers' positions are not as they have to be.
After a partial postback has been generated, the tabs are not moving back to their original position. So the question is simple. How can I get the TabContainer in firefox behave exact like in IE?
I tried to change the css styles, but it doesn't worked.
Thanks for help,
bye...
Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx for a tab theming example.
-Damien
