I implemented your Horizontal Menu and for some reason it doesn't seem to work in IE 8

Pedro, I am testing with IE 8.0.7601.17514, 256-bit. <p dir="aut

Horizontal Menu in IE 8 about ink HOT 11 CLOSED

sapo commented on June 12, 2024

Horizontal Menu in IE 8

from ink.

Comments (11)

pedrocorreia commented on June 12, 2024

Hi, Jeff

Could you please post a sample of your code?

from ink.

jeffdlong commented on June 12, 2024

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>

from ink.

pedrocorreia commented on June 12, 2024

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.

from ink.

jeffdlong commented on June 12, 2024

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!

from ink.

pedrocorreia commented on June 12, 2024

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?

from ink.

jeffdlong commented on June 12, 2024

Pedro,

I am testing with IE 8.0.7601.17514, 256-bit.

Thanks!
Jeff

from ink.

jeffdlong commented on June 12, 2024

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

THanks!

from ink.

pedrocorreia commented on June 12, 2024

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.

from ink.

mrwebmaster commented on June 12, 2024

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

from ink.

fabiosantoscode commented on June 12, 2024

Have you checked whether the html5shim is being loaded?

from ink.

mrwebmaster commented on June 12, 2024

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 [email protected]:

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
.

from ink.

Horizontal Menu in IE 8 about ink HOT 11 CLOSED

Comments (11)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent