Menu icon Foundation
Foundation 5 - IE 9 Navigation Problems

Hello,

I've got problems with my topbar-navigation on IE9.
Does anyone have an idea why my topbar is not visible on IE 9?

http://projekt.thinkcreative.ch/pruefag/

<div class="contain-to-grid ">
    <a href="index.html"><img class="logo_small show-for-small-only" src="img/logo_simpel.png"></a>
    <a href="index.html"><span class="logo hide-for-small hatch ">&nbsp;</span></a>
    <nav class="top-bar" data-topbar role="navigation" data-options>
        <ul class="title-area">
            <li class="name">
                <h1 class=""><a href="index.html">PRÜFAG  <span class="claim"> | Wir prüfen - wir beraten</span></a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span></span>Menu</a></li>
        </ul>
        <section class="top-bar-section">
            <ul class="right">
                <li class="divider show-for-small-only"></li>
                <li class="divider show-for-small-only"></li>
                <li class="has-dropdown">
                    <a href="#">Dienstleistungen</a>
                    <ul class="dropdown">
                        <li class="has-dropdown not-click"><a href="dienstleistungen.html">Ordentliche Revisionen</a>
                            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Zurück</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Ordentliche Revisionen</a></li>
                                <li><label>Level eins</label></li>
                                <li><a href="ordentliche_eingesch_revisionen_1.html">Ordentliche Revisionen 1</a></li>
                                <li><a href="#">Ordentliche Revisionen 2</a></li>
                                <li><a href="#">Ordentliche Revisionen 3</a></li>
                                <li><a href="#">Ordentliche Revisionen 4</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown not-click"><a href="dienstleistungen_2.html">Prüfung von Stiftungen und NPOs</a>
                            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Zurück</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Prüfung von Stiftungen und NPOs</a></li>
                                <li><label>Level eins</label></li>
                                <li><a href="#">Prüfung von Stiftungen und NPOs 1</a></li>
                                <li><a href="#">Prüfung von Stiftungen und NPOs 2</a></li>
                                <li><a href="#">Prüfung von Stiftungen und NPOs 3</a></li>
                                <li><a href="#">Prüfung von Stiftungen und NPOs 4</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown not-click"><a href="dienstleistungen_3.html">Andere Prüfungen</a>
                            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Zurück</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Andere Prüfungen</a></li>
                                <li><label>Level eins</label></li>
                                <li><a href="#">Andere Prüfungen 1</a></li>
                                <li><a href="#">Andere Prüfungen 2</a></li>
                                <li><a href="#">Andere Prüfungen 3</a></li>
                                <li><a href="#">Andere Prüfungen 4</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown not-click"><a href="lohnbuchkontrolle.html">Lohnbuchkontrollen</a>
                            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Zurück</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Lohnbuchkontrollen</a></li>
                                <li><label>Level eins</label></li>
                                <li><a href="#">Lohnbuchkontrollen 1</a></li>
                                <li><a href="#">Lohnbuchkontrollen 2</a></li>
                                <li><a href="#">Lohnbuchkontrollen 3</a></li>
                                <li><a href="#">Lohnbuchkontrollen 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="divider show-for-small-only"></li>
                <li id="dd" class="has-dropdown wrapper-dropdown-3" tabindex="1">
                    <a  href="#">Über Prüfag</a>
                    <ul class="dropdown">
                        <li class="has-dropdown not-click"><a href="ueberpruefag.html">Prüfag auf einen Blick</a>
                            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Zurück</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Ordentliche und eingeschränkte Revisionen</a></li>
                                <li><label>Level eins</label></li>
                                <li><a href="team.html">Dirk Stingelin</a></li>
                                <li><a href="#">Thomas Rutishauser</a></li>
                                <li><a href="#">Franziska Monn</a></li>
                                <li><a href="#">Paul Geisser</a></li>
                                <li><a href="#">Assistenten</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="divider show-for-small-only"></li>
                <li>
                <a href="kontakt.html" >Kontakt</a>
                </li>
                <li class="divider show-for-small-only"></li>
            </ul>
        </section>
    </nav>
</div>

Bildschirmfoto 2014 11 26 um 15.18.26

Bildschirmfoto 2014 11 28 um 19.19.43

topnavigation ie-9

Hello,

I've got problems with my topbar-navigation on IE9.
Does anyone have an idea why my topbar is not visible on IE 9?

http://projekt.thinkcreative.ch/pruefag/

<div class="contain-to-grid ">
    <a href="index.html"><img class="logo_small show-for-small-only" src="img/logo_simpel.png"></a>
    <a href="index.html"><span class="logo hide-for-small hatch ">&nbsp;</span></a>
    <nav class="top-bar" data-topbar role="navigation" data-options>
        <ul class="title-area">
            <li class="name">
                <h1 class=""><a href="index.html">PRÜFAG  <span class="claim"> | Wir prüfen - wir beraten</span></a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span></span>Menu</a></li>
        </ul>
        <section class="top-bar-section">
            <ul class="right">
                <li class="divider show-for-small-only"></li>
                <li class="divider show-for-small-only"></li>
                <li class="has-dropdown">
                    <a href="#">Dienstleistungen</a>
                    <ul class="dropdown">
                        <li class="has-dropdown not-click"><a href="dienstleistungen.html">Ordentliche Revisionen</a>
                            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Zurück</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Ordentliche Revisionen</a></li>
                                <li><label>Level eins</label></li>
                                <li><a href="ordentliche_eingesch_revisionen_1.html">Ordentliche Revisionen 1</a></li>
                                <li><a href="#">Ordentliche Revisionen 2</a></li>
                                <li><a href="#">Ordentliche Revisionen 3</a></li>
                                <li><a href="#">Ordentliche Revisionen 4</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown not-click"><a href="dienstleistungen_2.html">Prüfung von Stiftungen und NPOs</a>
                            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Zurück</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Prüfung von Stiftungen und NPOs</a></li>
                                <li><label>Level eins</label></li>
                                <li><a href="#">Prüfung von Stiftungen und NPOs 1</a></li>
                                <li><a href="#">Prüfung von Stiftungen und NPOs 2</a></li>
                                <li><a href="#">Prüfung von Stiftungen und NPOs 3</a></li>
                                <li><a href="#">Prüfung von Stiftungen und NPOs 4</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown not-click"><a href="dienstleistungen_3.html">Andere Prüfungen</a>
                            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Zurück</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Andere Prüfungen</a></li>
                                <li><label>Level eins</label></li>
                                <li><a href="#">Andere Prüfungen 1</a></li>
                                <li><a href="#">Andere Prüfungen 2</a></li>
                                <li><a href="#">Andere Prüfungen 3</a></li>
                                <li><a href="#">Andere Prüfungen 4</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown not-click"><a href="lohnbuchkontrolle.html">Lohnbuchkontrollen</a>
                            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Zurück</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Lohnbuchkontrollen</a></li>
                                <li><label>Level eins</label></li>
                                <li><a href="#">Lohnbuchkontrollen 1</a></li>
                                <li><a href="#">Lohnbuchkontrollen 2</a></li>
                                <li><a href="#">Lohnbuchkontrollen 3</a></li>
                                <li><a href="#">Lohnbuchkontrollen 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="divider show-for-small-only"></li>
                <li id="dd" class="has-dropdown wrapper-dropdown-3" tabindex="1">
                    <a  href="#">Über Prüfag</a>
                    <ul class="dropdown">
                        <li class="has-dropdown not-click"><a href="ueberpruefag.html">Prüfag auf einen Blick</a>
                            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Zurück</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Ordentliche und eingeschränkte Revisionen</a></li>
                                <li><label>Level eins</label></li>
                                <li><a href="team.html">Dirk Stingelin</a></li>
                                <li><a href="#">Thomas Rutishauser</a></li>
                                <li><a href="#">Franziska Monn</a></li>
                                <li><a href="#">Paul Geisser</a></li>
                                <li><a href="#">Assistenten</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="divider show-for-small-only"></li>
                <li>
                <a href="kontakt.html" >Kontakt</a>
                </li>
                <li class="divider show-for-small-only"></li>
            </ul>
        </section>
    </nav>
</div>

Bildschirmfoto 2014 11 26 um 15.18.26

Bildschirmfoto 2014 11 28 um 19.19.43

This post has been closed. No new replies can be added.

Jacob Brooks almost 5 years ago

Most support for IE8/9 will need some serious help to get to work with Foundation 5. The normal recommendation is to use Foundation 3 if you need IE8, but I have gotten a solid working framework with Foundation 4 that works in all browsers.

It does take some time to get things to work however. So more than likely its an issue with coding to have a version for IE8/9 but without seeing all your code its hard to tell. The link below gives some good info about legacy browsers and Foundation 5. Let me know if you have more specific questions:

http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8

Hope that helps!

Robocop almost 5 years ago

Thanks for helping me!
I've tested your links and suggestions, but unfortunately my topbar-navigation menu does not appear correctly in IE9.

If i copy the Demo-Code from the Foundation 5 Docs for a Top-Bar-Navigation and paste this code directly in my Website, same thing happens (attached image). The rest of the page looks perfect, only the topbar-navigation prepares problems.
if I had a problem with the correct version of jquery i would also have problems with the Orbit Slider. But this works fine.

Any tips or advice?

thank you!

Jacob Brooks almost 5 years ago

You will also need to use something similar to the code I have attached. I tried to clear out all my personalized code, but this was taken from a site I coded. First off, if you dont have it, add this to the top of your html, my first lines of code are:

<!DOCTYPE html>
 <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
 <!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
 <!--[if IE 7]><html class="lt-ie9 lt-ie8" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
 <!--[if IE 8]><html class="lt-ie9" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
 <!--[if gt IE 8]><!--><html xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]-->

After that, in your CSS, you will need the IE8/9 specific CSS which looks like this:

/* IE 8 Top Bar */

.lt-ie9 .top-bar {
  background: #604780;
  *zoom: 1;
  overflow: visible;
  z-index: 999; 
}
.lt-ie9 .top-bar:before, .lt-ie9 .top-bar:after {
  content: " ";
  display: table; 
}
.lt-ie9 .top-bar:after { clear: both; }
.lt-ie9 .top-bar .toggle-topbar { display: none; }
.lt-ie9 .top-bar .title-area { float: left; }
.lt-ie9 .top-bar .name h1 a { width: auto; }
.lt-ie9 .top-bar input,
.lt-ie9 .top-bar .button {
  line-height: 2em;
  font-size: 0.875em;
  height: 2em;
  padding: 0 10px;
  position: relative;
  top: 8px; 
}
.lt-ie9 .top-bar.expanded { background: #58205D; }
.lt-ie9 .contain-to-grid .top-bar {
  max-width: 57.5em;
  margin: 0 auto; 
}
.lt-ie9 .top-bar-section {
  -webkit-transition: none 0 0;
  -moz-transition: none 0 0;
  transition: none 0 0;
  left: 0 !important; 
}
.lt-ie9 .top-bar-section ul {
  width: auto;
  height: auto !important;
  display: inline; 
}
.lt-ie9 .top-bar-section ul li { float: left; }
.lt-ie9 .top-bar-section ul li > a { padding-right: 14px !important; }
.lt-ie9 .top-bar-section ul li .js-generated { display: none; }
.lt-ie9 .top-bar-section li a:not(.button) {
  padding: 0 15px;
  line-height: 45px;
  background: #58205D; 
}
.lt-ie9 .top-bar-section li a:not(.button):hover { background: #006ab6; }
.lt-ie9 .top-bar-section .has-dropdown > a { padding-right: 35px !important; }
.lt-ie9 .top-bar-section .has-dropdown > a:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: solid 5px;
  border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
  margin-top: -2.5px; 
}
.lt-ie9 .top-bar-section .has-dropdown.moved { position: relative; }
.lt-ie9 .top-bar-section .has-dropdown.moved > .dropdown { visibility: hidden; }
.lt-ie9 .top-bar-section .has-dropdown:hover > .dropdown, 
.lt-ie9 .top-bar-section .has-dropdown:active > .dropdown { visibility: visible; }
.lt-ie9 .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
  border: none;
  content: "\00bb";
  margin-top: -7px;
  right: 5px; 
}
.lt-ie9 .top-bar-section .dropdown {
  left: 0;
  top: auto;
  background: transparent; 
}
.lt-ie9 .top-bar-section .dropdown li a {
  line-height: 1;
  white-space: nowrap;
  padding: 7px 15px;
  background: #58205D; 
}
.lt-ie9 .top-bar-section .dropdown li label {
  white-space: nowrap;
  background: #58205D; 
}
.lt-ie9 .top-bar-section .dropdown li .dropdown {
  left: 100%;
  top: 0; 
}
.lt-ie9 .top-bar-section > ul > .divider {
  border-bottom: none;
  border-top: none;
  border-right: solid 1px #2b2b2b;
  border-left: solid 1px black;
  clear: none;
  height: 45px;
  width: 0px; 
}
.lt-ie9 .top-bar-section .has-form {
  background: #58205D;
  padding: 0 15px;
  height: 45px; 
}
.lt-ie9 .top-bar-section ul.right li .dropdown {
  left: auto;
  right: 0; 
}
.lt-ie9 .top-bar-section ul.right li .dropdown li .dropdown { right: 100%; }

Keep in mind its really hard to use Top Bar in both IE browsers and modern browsers. There are a lot of colors and padding/margin issues to find using the Developer Tools, but it can be done. I hope that helps.

Robocop almost 5 years ago

Hello Jacob,

With your help i found a good solution for a Drop-down Navigation in IE9.

I coded a new simple Drop-down Menu with HTML and CSS (without JS-magic) only for IE9.

The conditional for a specific IE -Browser Version solved my problems!

Thanks!

Cheers
Rob

Jacob Brooks almost 5 years ago

Awesome! Glad I could provide some kind of help. My next solution was going to be to try making one yourself! If you ever need help let me know, I don't know everything but I use Foundation a lot! Good luck!