Menu do not work in IE8

4 posts, 0 answers
  1. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 20 Mar 2014 Link to this post

    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
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 24 Mar 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 24 Mar 2014 Link to this post

    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....
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 25 Mar 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready