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

Telerik MVC Menu Won't show in IE6

3 Answers 45 Views
Menu
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Aleksander
Top achievements
Rank 1
Aleksander asked on 29 May 2012, 03:53 PM
I have a Teleirk menu in my project using a custom theme and it shows fine in IE7+ but the page shows where the menu should be as whitespace in IE6. Am I missing something for this to work?

Thank you,

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 30 May 2012, 09:06 AM
Hello Aleksander,

This is a classical hasLayout problem. Please try applying a zoom:1 style to the Menu and/or some of its parent elements.

Kind regards,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
0
Aleksander
Top achievements
Rank 1
answered on 30 May 2012, 04:35 PM
How can I add that style to the menu itself? I've added it to the parent containers and still nothing is showing.

Below is my code.

<body style="zoom: 1;">
    <div class="fade" style="zoom: 1;">
        <div class="page" style="zoom: 1;">
            <div id="headerOuterContainer" style="zoom: 1;">
                <div id="headerContainer" style="zoom: 1;">
                    <div id="header">
                        <div id="title">
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/Content/Green/Images/smartQualityLogo2.jpg" style="height:105px; margin: 0px 0px 0px 0px; border: 0px solid Black;" />
                            <div id="tagline">confidence • credibility • improvement</div>
                        </div>
                        <div id="loginContainer">
                            Welcome <strong><%: Page.User.Identity.Name %></strong>!
                        </div>
                        <div style="display: inline; float: right;">
                            <asp:Image ID="imgCallCenter" runat="server" ImageUrl="~/Content/Green/Images/callCenterGreen.jpg" style="width: 250px; height: 140px; border: 0px solid black; margin-left: 0px; z-index: 50;" />
                        </div>
                    </div>
                    <div id="breadCrumbContainer">
                        <div id="breadCrumb" style="padding: 3px 0px 3px 0px; zoom: 1;">
                            <% Html.Telerik().Menu()
                                   .Name("tmNav")
                                   .Items(menu =>
                                   {
                                       menu.Add()
                                           .Text("Home")
                                           .Action("Index", "GreenHome", new { area = "" });
                                       menu.Add()
                                          .Text("Perform QA")
                                          .Action("Index", "PerformQa", new { area = "PerformQa" });
                                       menu.Add()
                                          .Text("My Pending Actions")
                                          .Action("MyPendingActions", "PerformQa", new { area = "PerformQa" });
                                       menu.Add()
                                           .Text("Form Manager")
                                           .Action("Index", "Form", new { area = "Admin" });
                                   })
                                   .Render();
                            %>
                        </div>
                        <asp:Image ID="Image4" runat="server" ImageUrl="~/Content/Green/Images/cpLogo.jpg" style="width: 200px; height: 35px; border: 0px solid black; float: right;" />
                    </div>
                </div>
<%--                <div id="headerImage">
                    <asp:Image ID="imgCallCenter" runat="server" ImageUrl="~/Content/Green/Images/callCenterGreen.jpg" style="width: 250px; height: 140px; border: 0px solid black; margin-left: 0px; z-index: 50;" />
                </div>--%>
            </div>
            <div id="main">
                <div id="mainContent">
                    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                    <div id="footer"></div>
                </div>
            </div>
        </div>
        <div class="appVersion">
            <asp:Label ID="lblAppVersion" runat="server"><% = "Version: " + System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString() + " BETA" %></asp:Label>
        </div>
    </div>
 
    <%= Html.Telerik().ScriptRegistrar().jQuery(false) %>
</body>
0
Dimo
Telerik team
answered on 30 May 2012, 05:47 PM
Hi Aleksander,

You can either use the Menu's HtmlAttributes() fluent method, or an external CSS rule:

.t-menu
{
      zoom: 1;
}

Of course, there is no guarantee that this will work. You may need to apply the zoom style to something else, for example the menu items, or the links inside.

.t-menu .t-item,
.t-menu .t-link
{
      zoom: 1;
}

Greetings,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
Tags
Menu
Asked by
Aleksander
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Aleksander
Top achievements
Rank 1
Share this question
or