tab and IE 7

I am a bit miffed. I am trying to get the ajax tab control to work and I am running into some issues with IE7. The style doesn't show up in IE7 if I access the page from my web server. The style shows up just fine using Firefox if I access the page from the web server. The style shows up if I access the page using the web server with Visual Studio. Why does the same page work locally and not from a production web server? All I can see in IE7 from the production web server is the tab headers which still work if I click on them.After further testing I discoverd that the ajax tab control only works if it's in the root directory for the site on the production server.

I m having problem to get right view in IE 7, while on firefox it runs fine.

I want to apply ajax tab control not on root directory but inside folder can anyone help me.

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 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 headers of Tab Container within the Update Panel

I have a TabContainer inside of Update Panel. It seems that the background style of the tab header don't shows.

<asp:Button ID="Button1" runat="server" Text="View Tab" />

<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>

<table id="Table1" runat="server">
<tr>
<td>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
 <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Tab 1" runat="server">
 <ContentTemplate>
Text 1
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Tab 2" runat="server">
 <ContentTemplate>
Text 2
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

Is there any other ways to bring back the background style of the tab header.

Thanks in advance

Please help me on this...

You can add a CSS class to your TabContainer. The toolkit ships with the style ajax__tab_xp to ensure its loaded see below.

<Ajax:TabContainerID="TabContainer1"runat="server"CssClass="ajax__tab_xp">

If you still experince issues use fiddler www.fiddlertool.com to check that the XP style sheet is sent as a web resource.

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

TabContainer - Tabs look weird!

Why is the default style looking weird like this. I did not change anything from the original settings so why is this happening and how can I correct it?

hum... I only have this problem with IE6 and 7, it's looks fine with Mozilla.

<%@. Page Language="vb" AutoEventWireup="false" EnableEventValidation="false" CodeBehind="test1.aspx.vb" Inherits="ClientBase.test1" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <link href="Styles.css" type="text/css" rel="stylesheet"></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="TabContainer1" runat="server"> <cc1:TabPanel HeaderText="Tab 1" runat="server"> <ContentTemplate> blabla 1 </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel HeaderText="Tab 2" runat="server"> <ContentTemplate> blabla 2 </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel HeaderText="Tab 3" runat="server"> <ContentTemplate> blabla 3 </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> </form></body></html>

I am sure that someone must have experienced this before. Any sugestions would be great.

Thanks

Yes, I have the EXACT same problem. When I have the page all by itself, it looks as expected. But when I put the page in a template, it gets those same strange white boxes that cut the tab text in 1/2. If you find a solution, please post it here for the rest of us!

A little more research brings me to this thread:http://forums.asp.net/p/1069041/1554327.aspx#1554327 - which discusses in detail the exact problem. It has to do with tabs in Master pages.

Thanks for your reply, this lead me toward the answer needed. It seems that because Quirks Mode is not supported by Ajax Tabs (not sur what quirks mode is exactly) that the page containning the tabs need the following DocType definition in order for it to show properly.

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

TabContainer questions

Hello,I have several questions about the tab container control.

1. For the life of me..i havent been able to Style it the way I want. Are there any demos or tutorials about added CssClass to the tabcontainer?

2. Why is there a delay to load the tabcontainer? The page loads then a few seconds later the tabs popin. Is there a way to disable this lag?

Thanks

I've been struggling with it myself. It seems a bit unresponsive to styling. I believe I did see a post by a dev who said that a guide to styling the tab controls was one of his near-term priorities, though.
Any idea on the slow display? Is there a setting for this?
I have put together a description of how to skin the Calendar and Tab controls on my blog athttp://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx.

HI!

I'm trying to modify the Tabcontainer as you describe in youre blog, but I kan get it to work, and now I have a melt down in my brain.

In the Css-file I created I've added youre Css stucture, but I cant figure out the line below, is it a Resource.resx "WebResource" in App_GlobalResources folder.
The file in this case is tab-right.gif, but what is the AjaxControlToolkit and Tabs for, does this need to exist.

(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>)

Thanks for a replay