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

Menu do not work in IE8

3 Answers 37 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 2
Iron
Iron
Pierre asked on 20 Mar 2014, 08:26 PM
Hi
After testing my umbraco site on IE8, I found the my kendoMenu do not style correctly and the hover do not open the submenu.

my head:
<script src="~/scripts/jquery.min.js"></script>       
<script src="~/scripts/kendo.web.min.js"></script>
<script src="~/scripts/modernizr.custom.76706.js"></script>
<script src="~/scripts/Base.js"></script>
 
<link rel="shortcut icon" href="~/css/imgs/Altex-favicon.ico" >       
<link href="~/css/Themes/kendo.common.min.css" rel="stylesheet" />
<link href="~/css/Themes/kendo.silver.min.css" rel="stylesheet" />
<link href="~/css/Main.css" rel="stylesheet" />


my HTML:
               <table class="TableMenu">
                    <tr>
                        <td rowspan="2" class="TdLogo"><a href="/"><img alt="Altex" width="200" src="/css/imgs/Logo_Altex.jpg" /></a></td>                       
                        <td class="NavG"><ul id="NavG" class="menu">
    <li>
        <a class="MenuSelected" href="/home.aspx">Home</a>
    </li>
    <li>
        <a class="" href="/about-altex.aspx">About Us</a>
                <ul>
                        <li>
                            <a href="/about-altex.aspx">About Altex</a>
                        </li>
                        <li>
                            <a href="/about-altex/why-us.aspx">Why Us</a>
                        </li>
                        <li>
                            <a href="/about-altex/child-safety.aspx">Child Safety</a>
                        </li>
                        <li>
                            <a href="/about-altex/environmental-responsibility.aspx">Environmental Responsibility</a>
                        </li>
                </ul>
    </li>
    <li>
        <a class="" href="/your-needs.aspx">Our Fabrics</a>
                <ul>
                        <li>
                            <a href="/your-needs.aspx">Your Needs</a>
                        </li>
                        <li>
                            <a href="/your-needs/ambio®.aspx">Ambio®</a>
                        </li>
                        <li>
                            <a href="/your-needs/transparent.aspx">Transparent</a>
                        </li>
                        <li>
                            <a href="/your-needs/translucent.aspx">Translucent</a>
                        </li>
                        <li>
                            <a href="/your-needs/opaque.aspx">Opaque</a>
                        </li>
                </ul>
    </li>
    <li>
        <a class="" href="/our-products.aspx">Our Products</a>
                <ul>
                        <li>
                            <a href="/our-products.aspx">Our Products</a>
                        </li>
                        <li>
                            <a href="/our-products/roller-shade.aspx">Roller Shade</a>
                        </li>
                        <li>
                            <a href="/our-products/aleo™.aspx">Aleo™</a>
                        </li>
                        <li>
                            <a href="/our-products/panel-track.aspx">Panel Track</a>
                        </li>
                        <li>
                            <a href="/our-products/roman-shade.aspx">Roman Shade</a>
                        </li>
                        <li>
                            <a href="/our-products/inclinable-roman-shade.aspx">Inclinable Roman Shade</a>
                        </li>
                        <li>
                            <a href="/our-products/ready-to-install-shade.aspx">Ready-to-install Shade</a>
                        </li>
                        <li>
                            <a href="/our-products/fixed-multiform-shade.aspx">Fixed Multiform Shade</a>
                        </li>
                </ul>
    </li>
    <li>
        <a class="" href="/warranty.aspx">Support</a>
                <ul>
                        <li>
                            <a href="/warranty.aspx">Warranty</a>
                        </li>
                        <li>
                            <a href="/warranty/faq.aspx">FAQ</a>
                        </li>
                        <li>
                            <a href="/warranty/security.aspx">Security</a>
                        </li>
                </ul>
    </li>
    <li>
        <a class="" href="/contact-us.aspx">Contact Us</a>
    </li>
</ul>
 
</td>
                    </tr>
                    <tr>                       
                        <td><ul class="NavC-Hidden">
</ul></td>
                    </tr>
                </table>



My JS
$('#NavG').kendoMenu();


Any suggestion?
Note: I try the kendo menu demo on the old IE8 station, and all is working. The same site in IE11 work like a charm. What I missed out?!
Thanks
See pic1 for IE11 demo
See pic2 for IE8 demo

3 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 24 Mar 2014, 12:22 PM
Hello Pierre,

You code ran separately seems to be working fine in IE8 - you can check that here. However, if a JavaScript error happens before your Menu initialization, it can stop the init and your would get what you are describing. Can you check the IE8 DevTools console for any error messages and post them here? Thanks in advance. Another thing that will help me even more is to isolate the error in a sample project and send it over or just send a live URL to your page, so I can check what is happening myself.

Regards,
Kamen Bundev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Pierre
Top achievements
Rank 2
Iron
Iron
answered on 24 Mar 2014, 09:23 PM
Thanks for reply,
I just found why. I forgot to add
<!DOCTYPE html>
And I Add:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
But I am not shure if I need that....
0
Kamen Bundev
Telerik team
answered on 25 Mar 2014, 08:58 AM
Hi Pierre,

In up to and including IE9 pages with no doctype are rendered using Quirksmode, which is in fact the IE5.5 rendering engine. We don't support that as it is heavily broken. Please always use doctype on your pages, or Kendo UI won't work otherwise.

The meta you are including can only help you if you have a doctype (the meta is supposed to force using the latest rendering engine available in that IE browser - in IE8 this is the IE8 Standards mode).

Let me know if this helps.

Regards,
Kamen Bundev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Menu
Asked by
Pierre
Top achievements
Rank 2
Iron
Iron
Answers by
Kamen Bundev
Telerik team
Pierre
Top achievements
Rank 2
Iron
Iron
Share this question
or