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 and URL Frame with IE

I have a custom who is using a URL frame to display a page I created with the Ajax Tabcontainer. The page works fine when accessed directly and works fine in Firefox, however in IE 7 when accessed thru the url frame you can't click on any tab to activate and when you rollover the tab it throughs an exception saying access is denied.

Anyone have any ideas how to work around this, or any fixes?

After many searches I found this: http://weblogs.asp.net/bleroy/archive/2007/01/31/how-to-work-around-the-quot-access-denied-quot-cross-domain-frame-issue-in-asp-net-ajax-1-0.aspx

Which fixes the issue.

After many searches I found this: http://weblogs.asp.net/bleroy/archive/2007/01/31/how-to-work-around-the-quot-access-denied-quot-cross-domain-frame-issue-in-asp-net-ajax-1-0.aspx

Which fixes the issue.

Tab custom style lost on postback

I just downloaded the new Ajax toolkit Release 10920 and found that my custom style for the Tab control is lost on postback. When the page is first loaded, my tabs look correct, but after postback my tab css style is not fully rendered. It seemed to revert back to the default style. This has been working with all previous toolkit releases.

Below is my custom style which I've copied to my own custom .css file and made a few minor changes :

/*Tab Style*/
/* default layout */
.ajax__tab_default .ajax__tab_header {white-space:nowrap;text-align:left;padding-left:20px;padding-top:10px;}
.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}

/* xp theme */
.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(../images/tab-line.gif) repeat-x bottom;}
.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(../images/tab-right.gif) no-repeat right;height:21px;}
.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(../images/tab-left.gif) no-repeat;}
.ajax__tab_xp .ajax__tab_tab {height:13px;padding:0px;padding-top:4px;padding-bottom:4px;margin:0;background:url(../images/tab-little.gif) repeat-x;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(../images/tab-hover-right.gif) no-repeat right;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(../images/tab-hover-left.gif) no-repeat;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(../images/tab-hover.gif) repeat-x;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(../images/tab-active-right.gif) no-repeat right;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(../images/tab-active-left.gif) no-repeat;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(../images/tab-active.gif) repeat-x;}
.ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:0;padding:0px;background-color:#ffffff;}

Has anyone encountered this problem with the new release?

Thanks,
Jensayato

Hi,

Can you ellabrote more..

So it will be more helpful to solve your problem.

Tab Panel - Gap between tab and body and style problems

Hi guys.

I am using the AJAX tab panel control and applying custom styles to it. I'm having a problem in that I cannot seem to get the "default" style for the tabs to look right.

I am trying to do something similar to the default style of the tab, whereby the top border changes color when the user hovers over a tab. My problem is two fold:

Firstly, there is a small gap between the tab itself and the content displayed in the body of the panel. How do I get rid of that space? I've tried setting padding and spacing on just about all the styles they mention on the ajax sample website, but I'm not having any luck getting rid of it.

Secondly, this is the style for my outer border:

1.TabPanel .ajax__tab_outer
2{
3background-color: #FFFFFF;
4border-left: solid1px #666666;
5border-top: solid1px #666666;
6border-right: solid1px #666666;
7border-bottom: solid0px #FFFFFF;
8margin-bottom:0px;
9margin-left:2px;
10padding:2px;
11}

And this is the style that has to be applied when the user hovers over a tab:

1.TabPanel .ajax__tab_hover
2{
3background-color: #FFFFFF;
4border-left: solid1px #666666;
5border-top: solid1px #666666;
6border-right: solid1px #666666;
7border-bottom: solid0px #FFFFFF;
8margin-bottom:0px;
9margin-left:2px;
10padding:2px;
11}

What's happening with this setting though is that ANOTHER border is put around the tab, so it looks COMPLETELY wonky.

Please please please help me! I have to have this done tomorrow and it looks TERRIBLE at the moment.

Thanks everyone,
Johann.

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

-Damien