Interfering Spans on Ajax Tab Control Customization

Hello I have a very picky problem when customizing the Ajax Tabs in the control kit.

1<AjaxControl:TabPanel ID="tpNewBooking" runat="server">
2<HeaderTemplate>
3<div class="firsttab">
4<div class="left">
5<div class="right">
6<div class="createtab">Create Booking</div>
7</div>
8</div>
9</div>
10</HeaderTemplate>
11<ContentTemplate>
1213<asp:UpdateProgress ID="UpdateProgress1" runat="server">
14<ProgressTemplate>
15<p style="font: 0.75em tahoma;">
16<img src="GFX/ajax-loader2.gif" style="vertical-align: bottom;" alt="loading..." />
17</p>
18</ProgressTemplate>
19</asp:UpdateProgress>
20<asp:UpdatePanel ID="UpdatePanel2" runat="server">
21<ContentTemplate>
22Content Here
23</ContentTemplate>
24</asp:UpdatePanel>
2526</ContentTemplate>
27</AjaxControl:TabPanel>

As you can see I have added DIVs into the header tags of the TabPanel, this is to customize each tab indidually as I will have a differentFirst Tab andLast Tabbut all other tabs will have the same styling.

Originally I tried using the :firstchild :lastchild CSS properties which caused a lot if problems with cross browser support so I had to figure a way of manipulating the control to assign a different style to the first and last tab. The best way I found was to add DIVs in the header, which in a way works.

What I did was use this CSS below:

1.ajax__tab_header { width:100%; background-image: url(../images/tabsbacktwo.gif); background-position:right; background-repeat:no-repeat; height:29px; }
23.ajax__tab_header span { padding:0; margin:0; }
4.ajax__tab_header span { padding:0; margin:0; }
56.ajax__tab_header span.ajax__tab_active span { padding:0; margin:0; }
7.ajax__tab_header span span span span.ajax__tab_tab { padding:0; margin:0; }
8.ajax__tab_header span.ajax__tab_active span span span.ajax__tab_tab { padding:0; margin:0; }
9101112/* First Tab */13.ajax__tab_header span span span span.ajax__tab_tab .firsttab { background-image:url(../images/tab-normal-center.gif); background-position:bottom; background-repeat:repeat-x; height:29px; }
14.ajax__tab_header span span span span.ajax__tab_tab .firsttab .left { background-image:url(../images/tab-normal-left.gif); background-position:bottom left; background-repeat: no-repeat; padding-left:11px; height:29px; }
15.ajax__tab_header span span span span.ajax__tab_tab .firsttab .right { background-image:url(../images/tab-normal-center.gif); background-position:bottom right; background-repeat: no-repeat; padding-right:11px; height:29px; }
1617.ajax__tab_header span.ajax__tab_active span span span.ajax__tab_tab .firsttab { background-image:url(../images/tab-first-center.gif); background-position:bottom; background-repeat:repeat-x; height:29px; }
18.ajax__tab_header span.ajax__tab_active span span span.ajax__tab_tab .firsttab .left { background-image:url(../images/tab-first-left.gif); background-position:bottom left; background-repeat: no-repeat; padding-left:12px; height:29px; }
19.ajax__tab_header span.ajax__tab_active span span span.ajax__tab_tab .firsttab .right { background-image:url(../images/tab-first-right.gif); background-position:bottom right; background-repeat: no-repeat; padding-right:11px; height:29px; }
2021/* Other Tabs */22.ajax__tab_header span span span span.ajax__tab_tab .othertab { background-image:url(../images/tab-normal-center.gif); background-position:bottom; background-repeat:repeat-x; height:29px; }
23.ajax__tab_header span span span span.ajax__tab_tab .othertab .left { background-image:url(../images/tab-normal-center.gif); background-position:bottom left; background-repeat: no-repeat; padding-left:11px; height:29px; }
24.ajax__tab_header span span span span.ajax__tab_tab .othertab .right { background-image:url(../images/tab-normal-center.gif); background-position:bottom right; background-repeat: no-repeat; padding-right:11px; height:29px; }
2526.ajax__tab_header span.ajax__tab_active span span span.ajax__tab_tab .othertab { background-image:url(../images/tab-second-center.gif); background-position:bottom; background-repeat:repeat-x; height:29px; }
27.ajax__tab_header span.ajax__tab_active span span span.ajax__tab_tab .othertab .left { background-image:url(../images/tab-second-left.gif); background-position:bottom left; background-repeat: no-repeat; padding-left:10px; height:29px; }
28.ajax__tab_header span.ajax__tab_active span span span.ajax__tab_tab .othertab .right { background-image:url(../images/tab-second-right.gif); background-position:bottom right; background-repeat: no-repeat; padding-right:10px; height:29px; }
2930/* Last Tab */31.ajax__tab_header span span span span.ajax__tab_tab .lasttab { background-image:url(../images/tab-normal-center.gif); background-position:bottom; background-repeat:repeat-x; height:29px; }
32.ajax__tab_header span span span span.ajax__tab_tab .lasttab .left { background-image:url(../images/tab-normal-center.gif); background-position:bottom left; background-repeat: no-repeat; padding-left:12px; height:29px; }
33.ajax__tab_header span span span span.ajax__tab_tab .lasttab .right { background-image:url(../images/tab-normal-right.gif); background-position:bottom right; background-repeat: no-repeat; padding-right:11px; height:29px; }
3435.ajax__tab_header span.ajax__tab_active span span span.ajax__tab_tab .lasttab { background-image:url(../images/tab-last-center.gif); background-position:bottom; background-repeat:repeat-x; height:29px; }
36.ajax__tab_header span.ajax__tab_active span span span.ajax__tab_tab .lasttab .left { background-image:url(../images/tab-last-left.gif); background-position:bottom left; background-repeat: no-repeat; padding-left:11px; height:29px; }
37.ajax__tab_header span.ajax__tab_active span span span.ajax__tab_tab .lasttab .right { background-image:url(../images/tab-last-right.gif); background-position:bottom right; background-repeat: no-repeat; padding-right:11px; height:29px; }

Which to an extent worked but only in IE 7. Looking at the same page in Firefox there are gaps between the tabs which I can only assume is being caused by the spans the control is automatically adding to the headers. This is what it looks like in Firefox:

So now you know the problem, what options do I have and is there any third party ajax tab controls that I could use that don't add the stupid spans automatically?

Thanks in advance, look forward to hearing from you guys :)

Okay I managed to get it looking the same on IE7 and FF adjusting the paddings slightly but it completely screws up in IE6 (shown below).

Any ideas anyone?

Hey all .

I need to to have complete control of styles that are applied to each tab

eg

a. for the first tab i need a curve to appear on left side

b.for the second tab i need left side to be vertical and curve on the right side.

the effect would be as below

(tab1 | tab2)

also i want to round off corners of the the tab container.so that it would look like something below

( )

| |

| |

(------)

Pls suggest our comments.

Thanks.

hey am too stuck on something similar below is the query. can u help out someway.

thanks in advance

I need to to have complete control of styles that are applied to each tab

eg

a. for the first tab i need a curve to appear on left side and vertical on right side

b.for the second tab i need left side to be vertical and curve on the right side.

the effect would be as below

(tab1 | tab2)

also i want to round off corners of the the tab container.so that it would look like something below

( )

| |

| |

(------)

Pls suggest our comments.

Thanks.

topgun2129:

Hey all .

I need to to have complete control of styles that are applied to each tab

eg

a. for the first tab i need a curve to appear on left side

b.for the second tab i need left side to be vertical and curve on the right side.

the effect would be as below

(tab1 | tab2)

also i want to round off corners of the the tab container.so that it would look like something below

( )

| |

| |

(------)

Pls suggest our comments.

Thanks.

Although your problem isn't really anything to do with mine, the answer to your problem is in my code above if you take a look.

The CSS is there and the code for putting in the HeaderTemplate of the Ajax Tabs is there too.

By all means use the code for your tabs :)

hey hi, can u post me a working sample code. am currently lost.

topgun2129@.gmail.com

thanks in advance.

hey novi,

thanks for that piece of code am now in complete control of my tabs.

thanks.

topgun2129:

hey novi,

thanks for that piece of code am now in complete control of my tabs.

thanks.

No worries, glad you used your own initiative to extract the code from above. That's a good sign

Hi Novi

Could you email me the working code of Ajax tab control:

petermathro@.yahoo.com

Thanks

Peter