This is a migrated thread and some comments may be shown as answers.

RadTabStrip not functioning correctly in IE7

5 Answers 73 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Carmel Gafa
Top achievements
Rank 1
Carmel Gafa asked on 10 Nov 2010, 11:52 AM
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>




5 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 11 Nov 2010, 10:14 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Carmel Gafa
Top achievements
Rank 1
answered on 11 Nov 2010, 10:40 AM
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.
0
Kamen Bundev
Telerik team
answered on 11 Nov 2010, 02:26 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Carmel Gafa
Top achievements
Rank 1
answered on 12 Nov 2010, 09:50 AM
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.
0
Kamen Bundev
Telerik team
answered on 12 Nov 2010, 10:33 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
TabStrip
Asked by
Carmel Gafa
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Carmel Gafa
Top achievements
Rank 1
Share this question
or