RadTabStrip not functioning correctly in IE7

[Carmel Gafa]

Hi, we have a problem with RadTabStrip (we're using the MultiPage functionality) on Internet Explorer 7.

On Chrome and all other major browsers, the tabstrip looks perfectly fine. (Please see attached file chrome-banner.png)
Please see attached file ie7-banner.png to view how it works on IE7.

We suspect that while the CSS file is loading well, (as the tabstrip is laid out well on the page) telerik's javascript is not executing, which is why the tabs appear unstyled.

The code we are using is attached below. We're also registering a script manager in the master page.

<div id="BannerManagementWrapper">
        <telerik:RadTabStrip RegisterWithScriptManager="true" EnableEmbeddedBaseStylesheet="true" ID="BannerManagementTabStrip" Skin="Sunset" runat="server" MultiPageID="BannerManagementMultiPage"
            SelectedIndex="0">
            <Tabs>
                <telerik:RadTab Text="Create a Banner" PageViewID="BannerCreationPage">
                </telerik:RadTab>
                <telerik:RadTab Text="Manage Banners" PageViewID="BannerManagementPage">
                </telerik:RadTab>

            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="BannerManagementMultiPage" runat="server" SelectedIndex="0">
            <telerik:RadPageView runat="server" ID="BannerCreationPage" ClientIDMode="Static"
                CssClass="BannerTabPage">
                <h2>
                    Create a new Banner
                </h2>
                <div class="fieldContainer">
                    <fieldset>
                        <div class="field">
                            <asp:Label ID="BannerTitleLabel" AssociatedControlID="BannerTitle" Text="Title:"
                                CssClass="fieldLabel" runat="server" />
                            <asp:TextBox ID="BannerTitle" runat="server" MaxLength="250"></asp:TextBox>
                        </div>
                        <div class="field">
                            <asp:Label ID="BannerUrlLabel" AssociatedControlID="BannerUrl" Text="Url:"
                                CssClass="fieldLabel" runat="server" />
                            <asp:TextBox ID="BannerUrl" runat="server" MaxLength="250"></asp:TextBox>
                        </div>
                        <div class="field">
                            <asp:Label ID="BannerImageUrlLabel" AssociatedControlID="BannerImageUrl" Text="Image Url:"
                                CssClass="fieldLabel" runat="server" />
                            <asp:TextBox ID="BannerImageUrl" runat="server" MaxLength="250"></asp:TextBox>
                        </div>

                    </fieldset>
                </div>
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="BannerManagementPage" ClientIDMode="Static"
                CssClass="BannerTabPage">
                <h2>
                    Manage Existing Banners
                </h2>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>

[Kamen Bundev]

Hello Carmel,

This issue looks more like you've hit the IE 31 stylesheets limit. Can you check if the workarounds listed in the blog post can help or can you send a live URL of your page where we can reproduce the issue and help you fix it. You can send a support ticket if you prefer privacy.

Best wishes,
Kamen Bundev
the Telerik team

[Carmel Gafa]

Hi, thanks for your reply.
We do not think that is the problem. As we've mentioned already, the stylesheets are loading correctly. Furthermore, IE8 displays the page correctly.

Also we do not have that many stylesheets or style tags.

[Kamen Bundev]

Hello Carmel,

If the page works in other Internet Explorer versions, then - yes, this is not the aforementioned limit. However, the code you've sent is not enough to pinpoint the reason why this happens. Can you send a live URL or if that's not possible - a sample project with the issue isolated? Thank you in advance.

Best wishes,
Kamen Bundev
the Telerik team

[Carmel Gafa]

Hi. we pinned down the issue to a problem in our CSS files.

We were setting the following:

html, body, span, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr, button
{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:transparent;}

When we removed either the span selector or the background:transparent (or both), the tabstrip works well on IE7. It's strange that this problem only affects IE7 though, shouldn't the tabstrip's CSS override it? It appears to do so in other browsers.

[Kamen Bundev]

Hello Carmel,

Well, there is a known bug about the last selector with the same specificity not getting applied in IE7, maybe it has something to do with your problem. Check bug #100 on this page for more information:
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

Sincerely yours,
Kamen Bundev
the Telerik team