Horizontal Menu in IE 8 #36

jeffdlong · 2013-03-28T00:59:21Z

I implemented your Horizontal Menu and for some reason it doesn't seem to work in IE 8??? Works great in chrome. But in IE 8 it turns it into a bulleted list. Thanks, Jeff

pedrocorreia · 2013-03-28T11:07:48Z

Hi, Jeff

Could you please post a sample of your code?

jeffdlong · 2013-03-28T11:31:41Z

Sure. Here is the base code that came with the download (my-page.html). It works in Chrome but not IE 8 (for me). I'm not sure if I pasted it correctly, but here it is:

    <!-- Favicon.ico placeholder -->
    <link rel="shortcut icon" href="imgs/ink-favicon.ico">

    <!-- Apple icon placeholder -->
    <link rel="apple-touch-icon-precomposed" href="imgs/touch-icon.57.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="imgs/touch-icon.72.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="imgs/touch-icon.114.png">

    <!-- Apple splash screen placeholder -->
    <link rel="apple-touch-startup-image" href="imgs/splash.320x460.png" media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="imgs/splash.768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="imgs/splash.1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="./css/ink.css">

    <!--[if IE]>
        <link rel="stylesheet" href="./css/ink-ie.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <![endif]-->

</head>
<body>

    <!-- Add your site or application content here -->

    <header class="ink-container ink-for-l">
        <div class="ink-vspace">
            <h1 class="">H1 heading</h1>
            <p>Write some stuff here to let people know how great your site really is!</p>
        </div>
    </header>

    <nav class="ink-container ink-navigation">
        <ul class="horizontal menu">
            <li class="active">
                <a href="#">Menu item 1</a>
            </li>
            <li>
                <a href="#">Menu item 2</a>
            </li>
            <li>
                <a href="#">Menu item 3</a>
            </li>
            <li>
                <a href="#">Menu item 4</a>
            </li>
        </ul>
    </nav>

    <header class="ink-container ink-for-m ink-for-s">
        <div class="ink-vspace">
            <h1 class="">H1 heading</h1>
            <p>Write some stuff here to let people know how great your site really is!</p>
        </div>
    </header>

    <div class="ink-container ink-vspace">
        <h4>InK takes a diferent approach to a grid system to make it truly flexibe and responsive.</h4>
        <p>Our </p>
        <div class="ink-vspace">
            <h4>You can divide your layout in halves...</h4>
            <div class="ink-row">
                <div class="ink-l50">
                    <div class="ink-gutter">
                        <p>Upon waking next morning about daylight, I found Queequeg's arm thrown over me in the most loving and affectionate manner. You had almost thought I had been his wife. The counterpane was of patchwork, full of odd little parti-coloured squares and triangles; and this arm of his tattooed all over with an interminable Cretan labyrinth of a figure, no two parts of which were of one precise shade&mdash;owing I suppose to his keeping his arm at sea unmethodically in sun and shade, his shirt sleeves irregularly rolled up at various times&mdash;this same arm of his, I say, looked for all the world like a strip of that same patchwork quilt.</p>
                    </div>
                </div>
                <div class="ink-l50">
                    <div class="ink-gutter">
                        <p>Upon waking next morning about daylight, I found Queequeg's arm thrown over me in the most loving and affectionate manner. You had almost thought I had been his wife. The counterpane was of patchwork, full of odd little parti-coloured squares and triangles; and this arm of his tattooed all over with an interminable Cretan labyrinth of a figure, no two parts of which were of one precise shade&mdash;owing I suppose to his keeping his arm at sea unmethodically in sun and shade, his shirt sleeves irregularly rolled up at various times&mdash;this same arm of his, I say, looked for all the world like a strip of that same patchwork quilt.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="ink-vspace">
            <h4>... thirds ...</h4>
            <div class="ink-row">
                <div class="ink-l33 ink-m50">
                    <div class="ink-gutter">
                        <p>Upon waking next morning about daylight, I found Queequeg's arm thrown over me in the most loving and affectionate manner. You had almost thought I had been his wife. The counterpane was of patchwork, full of odd little parti-coloured squares and triangles; and this arm of his tattooed all over with an interminable Cretan labyrinth of a figure, no two parts of which were of one precise shade&mdash;owing I suppose to his keeping his arm at sea unmethodically in sun and shade, his shirt sleeves irregularly rolled up at various times&mdash;this same arm of his, I say, looked for all the world like a strip of that same patchwork quilt.</p>
                    </div>
                </div>
                <div class="ink-l33 ink-m50">
                    <div class="ink-gutter">
                        <p>Upon waking next morning about daylight, I found Queequeg's arm thrown over me in the most loving and affectionate manner. You had almost thought I had been his wife. The counterpane was of patchwork, full of odd little parti-coloured squares and triangles; and this arm of his tattooed all over with an interminable Cretan labyrinth of a figure, no two parts of which were of one precise shade&mdash;owing I suppose to his keeping his arm at sea unmethodically in sun and shade, his shirt sleeves irregularly rolled up at various times&mdash;this same arm of his, I say, looked for all the world like a strip of that same patchwork quilt.</p>
                    </div>
                </div>
                <div class="ink-l33 ink-m100 ink-for-l ink-for-s">
                    <div class="ink-gutter">
                        <p>Upon waking next morning about daylight, I found Queequeg's arm thrown over me in the most loving and affectionate manner. You had almost thought I had been his wife. The counterpane was of patchwork, full of odd little parti-coloured squares and triangles; and this arm of his tattooed all over with an interminable Cretan labyrinth of a figure, no two parts of which were of one precise shade&mdash;owing I suppose to his keeping his arm at sea unmethodically in sun and shade, his shirt sleeves irregularly rolled up at various times&mdash;this same arm of his, I say, looked for all the world like a strip of that same patchwork quilt.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="ink-vspace">
            <h4>... fourths and more.</h4>
            <div class="ink-row">
                <div class="ink-l25 ink-m50">
                    <div class="ink-gutter">
                        <p>Upon waking next morning about daylight, I found Queequeg's arm thrown over me in the most loving and affectionate manner. You had almost thought I had been his wife. The counterpane was of patchwork, full of odd little parti-coloured squares and triangles; and this arm of his tattooed all over with an interminable Cretan labyrinth of a figure, no two parts of which were of one precise shade&mdash;owing I suppose to his keeping his arm at sea unmethodically in sun and shade, his shirt sleeves irregularly rolled up at various times&mdash;this same arm of his, I say, looked for all the world like a strip of that same patchwork quilt.</p>
                    </div>
                </div>
                <div class="ink-l25 ink-m50">
                    <div class="ink-gutter">
                        <p>Upon waking next morning about daylight, I found Queequeg's arm thrown over me in the most loving and affectionate manner. You had almost thought I had been his wife. The counterpane was of patchwork, full of odd little parti-coloured squares and triangles; and this arm of his tattooed all over with an interminable Cretan labyrinth of a figure, no two parts of which were of one precise shade&mdash;owing I suppose to his keeping his arm at sea unmethodically in sun and shade, his shirt sleeves irregularly rolled up at various times&mdash;this same arm of his, I say, looked for all the world like a strip of that same patchwork quilt.</p>
                    </div>
                </div>
                <div class="ink-l25 ink-m50">
                    <div class="ink-gutter">
                        <p>Upon waking next morning about daylight, I found Queequeg's arm thrown over me in the most loving and affectionate manner. You had almost thought I had been his wife. The counterpane was of patchwork, full of odd little parti-coloured squares and triangles; and this arm of his tattooed all over with an interminable Cretan labyrinth of a figure, no two parts of which were of one precise shade&mdash;owing I suppose to his keeping his arm at sea unmethodically in sun and shade, his shirt sleeves irregularly rolled up at various times&mdash;this same arm of his, I say, looked for all the world like a strip of that same patchwork quilt.</p>
                    </div>
                </div>
                <div class="ink-l25 ink-m50">
                    <div class="ink-gutter">
                        <p>Upon waking next morning about daylight, I found Queequeg's arm thrown over me in the most loving and affectionate manner. You had almost thought I had been his wife. The counterpane was of patchwork, full of odd little parti-coloured squares and triangles; and this arm of his tattooed all over with an interminable Cretan labyrinth of a figure, no two parts of which were of one precise shade&mdash;owing I suppose to his keeping his arm at sea unmethodically in sun and shade, his shirt sleeves irregularly rolled up at various times&mdash;this same arm of his, I say, looked for all the world like a strip of that same patchwork quilt.</p>
                    </div>
                </div>
            </div>
        </div>          
    </div>

    <footer>
        <div class="ink-container">
            <nav class="ink-navigation">
                <ul class="ink-footer-nav">
                    <li><a href="#">Footer item 1</a></li>
                    <li><a href="#">Footer item 2</a></li>
                    <li><a href="#">Footer item 3</a></li>
                </ul>
            </nav>
            <p class="copyright">
                All stuff reverved.<br>
                Stuff is a trademark created at the Stuff that makes Stuff
            </p>
        </div>
    </footer>

</body>

pedrocorreia · 2013-03-28T12:01:58Z

Thanks for your report, Jeff.

You'll need to download html5shiv.js from here: https://github.com/aFarkas/html5shiv/zipball/master and add it to your page. html5shiv adds support for new html5 tags in for IE8 and under.

It should be bundled with Ink, but for some reason it's not. I'll look into it.

Thanks again, Jeff.

jeffdlong · 2013-03-28T12:19:08Z

Thanks. That partially worked. The navigation visually looks right except it doesn't highlight any of the menu items when you pass the cursor over them. Basically the hover characteristic doesn't seem to be working.

Thanks!

pedrocorreia · 2013-03-28T18:11:34Z

You are right Sir!

Can't find out why either. Let me do some debugging.
Btw, are you testing with IE8 or with another version using IE8 mode?

jeffdlong · 2013-03-28T18:15:06Z

Pedro,

I am testing with IE 8.0.7601.17514, 256-bit.

Thanks!
Jeff

jeffdlong · 2013-03-29T18:13:09Z

HI Pedro, ink-collapsible doesn't work in IE either.

THanks!

pedrocorreia · 2013-05-27T15:59:16Z

Hey there jeffdlong.

Sorry it took so long but these issues have been solved and their solution will be available as we release v2 of Ink.

Meanwhile feel free to clone the repository and checkout branch v2. It's a WIP branch but it does contain the latest code.

mrwebmaster · 2013-08-12T21:23:14Z

Hi, I'm having the same issue. I think I added the html5shiv file, but IE8 is rendering the menu horizontal.

I'm using INK 2.2.0

Below is the source code.

Thanks for your help.
``

            <link rel="icon" href="favicon.ico" type="image/x-icon"> 
                    <!-- Favicon.ico placeholder -->
                    <link rel="shortcut icon" href="/favicon.ico">      
                    <!-- Apple icon placeholder -->
                    <link rel="apple-touch-icon-precomposed" href="img/touch-icon.57.png">
                    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch-icon.72.png">
                    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch-icon.114.png">
                    <!-- Apple splash screen placeholder -->
                    <link rel="apple-touch-startup-image" href="img/splash.320x460.png" media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
                    <link rel="apple-touch-startup-image" href="img/splash.768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
                    <link rel="apple-touch-startup-image" href="img/splash.1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
                    <!-- Stylesheets -->      
                    <link rel="stylesheet" href="/min/?f=/css/ink.css,/css/ultragestion.css">       
                    <!--[if IE 7 ]>
                        <link rel="stylesheet" href="../css/ink-ie7.css" type="text/css" media="screen" title="no title" charset="utf-8">
                                <script type="text/javascript">
            //<![CDATA[
            try{if (!window.CloudFlare) { var CloudFlare=[{verbose:0,p:1376342042,byc:1,owlid:"cf",mirage:{responsive:0,lazy:0},mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/abv=2706741234/"},atok:"1bbdf894f8511749855e2b9393965663",zone:"ultragestion.com",rocket:"0",apps:{}}];CloudFlare.push({"apps":{"ape":"d2bafc9608477276da3bad5bb1486892"}});var a=document.createElement("script"),b=document.getElementsByTagName("script")[0];a.async=!0;a.src="//ajax.cloudflare.com/cdn-cgi/nexp/abv=3609848800/cloudflare.min.js";b.parentNode.insertBefore(a,b);}}catch(e){};
            //]]>
            </script>           <![endif]-->
                    <!-- Javascripts -->
            <script type="text/javascript" src="/min/?f=/js/holder.js,/js/ink.min.js,/js/autoload.js,/js/html5shiv.js"></script>
            <script type="text/javascript" src="/js/html5shiv.js"></script>
            </head>
                <body>
            <div id="container1">       
                    <div class="ink-grid">
            <header class="vspace">
            <div class="column-group">
            <div class="large-40">
                            <div id="logou"><a href="/"><span id="logo1">Ultra</span><span id="logo2">gestion</span></a></div>
            </div>
            <div class="large-60">
                            <nav class="ink-navigation">
                <ul class="menu horizontal grey flat rounded" id="menu1">
                                <li>
                                    <a href="/">Inicio</a>
                                </li>
                                <li>
                                    <a href="servicios.php">Servicios</a>
                                </li>
                                <li>
                                    <a href="nosotros.php">Nosotros</a>
                                </li>
                                <li>
                                    <a href="precio.php">Precio</a>
                                </li>
                                <li>
                                    <a href="contacto.php">Contacto</a>
                                </li>
                </ul>
                </nav>
            </div>
            </div>
            </header>
            </div>
            </div>
            <div id="container2">
            </div>
            <div id="container3">
            </div>
            <div id="container4">
            </div>
            </body>
            </html>``

fabiosantoscode · 2013-08-23T16:49:50Z

Have you checked whether the html5shim is being loaded?

mrwebmaster · 2013-08-24T13:30:39Z

Thanks, it was a problem of the load order of the js files. It's already
solved.

On Fri, Aug 23, 2013 at 1:49 PM, Fábio Santos notifications@github.comwrote:

Have you checked whether the html5shim is being loaded?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/36#issuecomment-23176111
.

jeffdlong closed this as completed Mar 28, 2013

pedrocorreia reopened this Mar 28, 2013

pedrocorreia closed this as completed May 27, 2013

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Horizontal Menu in IE 8 #36

Horizontal Menu in IE 8 #36

jeffdlong commented Mar 28, 2013

pedrocorreia commented Mar 28, 2013

jeffdlong commented Mar 28, 2013

pedrocorreia commented Mar 28, 2013

jeffdlong commented Mar 28, 2013

pedrocorreia commented Mar 28, 2013

jeffdlong commented Mar 28, 2013

jeffdlong commented Mar 29, 2013

pedrocorreia commented May 27, 2013

mrwebmaster commented Aug 12, 2013

fabiosantoscode commented Aug 23, 2013

mrwebmaster commented Aug 24, 2013

Horizontal Menu in IE 8 #36

Horizontal Menu in IE 8 #36

Comments

jeffdlong commented Mar 28, 2013

pedrocorreia commented Mar 28, 2013

jeffdlong commented Mar 28, 2013

pedrocorreia commented Mar 28, 2013

jeffdlong commented Mar 28, 2013

pedrocorreia commented Mar 28, 2013

jeffdlong commented Mar 28, 2013

jeffdlong commented Mar 29, 2013

pedrocorreia commented May 27, 2013

mrwebmaster commented Aug 12, 2013

fabiosantoscode commented Aug 23, 2013

mrwebmaster commented Aug 24, 2013