Menu do not work in IE8

[Pierre]

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

[Kamen Bundev]

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

 

 

[Pierre]

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....

[Kamen Bundev]

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