Tabs in the tabstrip overflow content area in IE7

[Hilda]

Hi,

I have implemented an application where there is a main tabstrip with  tabs and in each of these tabs there are again tabs whose numbers vary between tabs(nested tabs).
  
I have implemented the same by rendering partial in each of the main tabs and again rendering content of the inner tabs as partials.

While debugging it works fine in chrome.

 But in IE7, there is a problem. When I go to a inner tab with more content(large partial) then to the smaller inner tabs(tabs containing lesser content), there is some extra borders and lines shown below these pages which does not exist in code.

The pseudo code for the same is as follows:

Outer tabstrip(main file):

<% Html.Telerik().TabStrip()
       .Name("TabStrip1")

       .Items(tabstrip =>
       {
           tabstrip.Add()
               .Text("Tab 1   >>")
               .Encoded(false)
               .Content(() =>
               {
                   Html.RenderPartial("Tab1");
               });
           tabstrip.Add()
               .Text("Tab 2    >>").Encoded(false)
               .Content(() =>
                     {
                         Html.RenderPartial("Tab2");
                     });
           ......
           tabstrip.Add()
                .Text("Tab 7   >>").Encoded(false)
                .Content(() =>
                      {
                          Html.RenderPartial("Tab7");
                      });

       })
       .SelectedIndex(0)
       .ClientEvents(events => events
       .OnLoad(() =>
       {
           %>
            function(e) {


            }
           <%
       }))
       .HtmlAttributes(new { style = "font-size: 1.10em;" })
       .Render();
        %>


One of the inner tabstrip data( Tab1)

<% Html.Telerik().TabStrip()
       .Name("TabStrip2")

       .Items(tabstrip =>
       {
           tabstrip.Add()
               .Text("Tab 1 of Tab1")
               .Encoded(false)
               .Content(() =>
               {
                   Html.RenderPartial("Tab1Tab1");
               });
           tabstrip.Add()
               .Text("Tab 2  of Tab1").Encoded(false)
               .Content(() =>
                     {
                         Html.RenderPartial("Tab2Tab1");
                     });
           ......
           tabstrip.Add()
                .Text("Tab 10 of Tab1").Encoded(false)
                .Content(() =>
                      {
                          Html.RenderPartial("Tab10Tab1");
                      });

       })
       .SelectedIndex(0)
       .ClientEvents(events => events
       .OnLoad(() =>
       {
           %>
            function(e) {


            }
           <%
       }))
       .HtmlAttributes(new { style = "font-size: 1.10em;" })
       .Render();
        %>

If the content in Tab1Tab1 is more than that in Tab2Tab1. If I first go to Tab1 of Tab1 and then to Tab2 of Tab1 extra lines and borders like that of the tables rendered in Tab1 of Tab1 is shown in Tab 2 of Tab1. Sorry if it was confusing. I have attached the extra content view as an image file.

Kindly Help

Thanks & Regards,
Hilda Fabiola Bernard

[Hilda]

Hi,

The error was rectified.. it was the problem with the css. Fixed it. Thank you

Regards,
Hilda Fabiola Bernard