Tab Container Custom Style in Firefox...

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

Tab control style

hi

i want to override the default style of tab control.i copied the Css file from this linkhttp://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx

to a css file and set the tab container's css file to the new class name but this added some code in aspx page

<

ajaxToolkit:TabContainerID="TabContainer1"runat="server"CssClass="ajax_def_tab"><ajaxToolkit:TabPanelID="general"HeaderText="General "runat="server"><system.web.ui.controlrunat="server">

<div__designer:dtid="1688854155231235"id="DivGeneral"><asp:Panelrunat="server"GroupingText="General"Font-Size="10pt"Font-Names="Verdana"Height="50px"ID="Panel1"__designer:dtid="1688854155231236"><table__designer:dtid="1688854155231237"cellpadding="0"cellspacing="2"border=0class="label"width=100%><tr__designer:dtid="1688854155231238"><td__designer:dtid="1688854155231239"nowrap>First Name:</td><td__designer:dtid="1688854155231240"><asp:TextBoxrunat="server"BorderWidth="1px"Width="184px"ID="TextBox1"__designer:dtid="1688854155231241"></asp:TextBox>

</

td><td__designer:dtid="1688854155231242"nowrap>Last Name:</td><td__designer:dtid="1688854155231243"><asp:TextBoxrunat="server"BorderWidth="1px"ID="TextBox2"__designer:dtid="1688854155231244"></asp:TextBox>

</

td><td__designer:dtid="1688854155231245"nowrap>Middle Name</td><td__designer:dtid="1688854155231246"><asp:TextBoxrunat="server"BorderWidth="1px"Width="112px"Height="16px"ID="TextBox3"__designer:dtid="1688854155231247"></asp:TextBox>

</

td>

any help??

Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx

-Damien

Tab Controls and CssClass Not Working

I have been working with the tab Control for two days with no success at overridding the default styles for the tabs. I have copied the styles from the tabs.css file located in the toolkit, and have modified the hover, active and selected styles that I want to modiy. I have included the new css sheet into my application and included the CssClass reference in the file code. when I run the page or site to debug I get the default images and actions. Could anyone tell me what is wrong. I'm including the source code below:

ASP file

<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="true"CodeFile="Default.aspx.vb"Inherits="_Default" %>

<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

<linkhref="Tabs.css"rel="stylesheet"type="text/css"/>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<div>

<cc1:TabContainerID="TabContainer1"runat="server">

<cc1:TabPanelID="TabPanel1"runat="server"CssClass="ajax__tab_tab1">

<HeaderTemplate>DashBoard</HeaderTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

</div>

</form>

</body>

</html>

Style sheet

/* default layout */

.ajax__tab_default.ajax__tab_header {white-space:nowrap;}

.ajax__tab_default.ajax__tab_outer {display:-moz-inline-box;display:inline-block}

.ajax__tab_default.ajax__tab_inner {display:-moz-inline-box;display:inline-block}

.ajax__tab_default.ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

/* tab1 theme */

.ajax__tab_tab1.ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>)repeat-xbottom;}

.ajax__tab_tab1.ajax__tab_outer {padding-right:4px;background:url("Images\green_gradient_3.gif")no-repeatright;height:21px;}

.ajax__tab_tab1.ajax__tab_inner {padding-left:3px;background:url("Images\green_gradient_1.gif")no-repeat;}

.ajax__tab_tab1.ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>)repeat-x;}

.ajax__tab_tab1.ajax__tab_hover.ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>)no-repeatright;}

.ajax__tab_tab1.ajax__tab_hover.ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>)no-repeat;}

.ajax__tab_tab1.ajax__tab_hover.ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>)repeat-x;}

.ajax__tab_tab1.ajax__tab_active.ajax__tab_outer {background:url("Images\green_gradient_4.gif")no-repeatright;}

.ajax__tab_tab1.ajax__tab_active.ajax__tab_inner {background:url("Images\green_gradient_3.gif")no-repeat;}

.ajax__tab_tab1.ajax__tab_active.ajax__tab_tab {background:url("Images\green_gradient_1.gif")repeat-x;}

.ajax__tab_tab1.ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1pxsolid#999999;border-top:0;padding:8px;background-color:#ffffff;}

/* scrolling */

.ajax__scroll_horiz {overflow-x:scroll;}

.ajax__scroll_vert {overflow-y:scroll;}

.ajax__scroll_both {overflow:scroll}

.ajax__scroll_auto {overflow:auto}

thank you,

kkof

You should apply the CssClass attribute to the TabContainer control rather than to the TabPanel element.

Kind regards,

sbogus.

Thanks sbogus, placing the CssClass on the TabContainer corrected the issues I was having.