Foundation Topbar IE8 Fix

gistfile1.css

.lt-ie9 .top-bar {
  background: #2f2f2f;
  *zoom: 1;
  overflow: visible; 
}
.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: #111111; }
.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: #111111; 
}
.lt-ie9 .top-bar-section li a:not(.button):hover { background: #2b2b2b; }
.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: #1e1e1e; 
}
.lt-ie9 .top-bar-section .dropdown li label {
  white-space: nowrap;
  background: #1e1e1e; 
}
.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: #111111;
  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%; }

You're my new favorite person. This is just what I needed. Thank you!

Items with dropdown is not clickable, or is it just me?

This saved me from a lot of headache, thanks!

You are wonderful!

gah, yea, my links aren't clickable and for some reason clicking anywhere on the entire page toggles the dropdown.

Looks awful. Does it actually work? Is it clickable, etc.?

Thanks mate! This saved me a lot of valuable time!

Thanks! but links are not clickable...

I just added < meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
in the head of my html file. Without it IE kicks into quirks mode and breaks the top bar......at least on a couple sites I built. Its in the head of html5 BP.

Thanks!

Excellent, that was a life saver, thanks.

Thank you SO much for this, works great!

If anyone is wondering how to get the dropdown arrows to work in IE 8, I figured something out. The dropdown arrow is created using CSS border styles that IE 8 won't recognize.

Here's an easy way to override that and use an image for the arrows instead:

First, override the border completely:

.lt-ie9 .top-bar-section .has-dropdown > a:after {
 border: 0 none !important;
}

Next, add a background image to the dropdown > a and position it until it looks good, like so:

.lt-ie9 .top-bar-section .has-dropdown > a {
 background: url("/img/white-dropdown-arrow.png") no-repeat scroll 92% 18px transparent;
}

thanks, this saves my life.

thanks!!! This save my brain.

Thanks for posting this. It just saved me a ton of time.
For those having problems with the drop down arrows not showing, instead of replacing with an image you can also just change the :after to use a double colon.

So .lt-ie9 .top-bar-section .has-dropdown > a:after
becomes .lt-ie9 .top-bar-section .has-dropdown > a::after.

This is an annoying thing with IE8 and using :before or :after. It wants a double colon. I tried it and it worked for me.

Thanks very much for this -- it looks good and the links work great. Hower, I've had some trouble getting the menu to toggle to the menu icon when the viewport gets small. The menu items just keep shifting left, until they disappear (at around 340px). My code is below if you (or anyone else) want to try it (your css code is contained in css/ie8topbarfix.css):

<!doctype html>
<!--[if lt IE 9]>
        <html class="no-js lt-ie9" lang="en">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bikes Rock! Foundation 5 Basic Features</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/foundation.css" />
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="css/ie8topbarfix.css">
    <![endif]-->

    <script src="js/vendor/modernizr.js"></script>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
      <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
      <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
        <div class="fixed contain-to-grid"><!-- fixed class can cause topbar to overlap content on IE8 at small width-->
            <!--[if lt IE 9]>
                <nav class="top-bar">
            <![endif]-->
            <!--[if gt IE 8]><!--><nav class="top-bar" data-topbar="top-bar"><!--<![endif]-->
            <!--"data-topbar" by itself causes IE8 to throw JS error, but is necessary to make menu items appear when menu icon (appears at small width) is clicked. Alternate code may be necessary. Normally we'd just put data-topbar in tag all by itself, with no "=", but instead we're using data-topbar="topbar" to satisfy well-formed XML-->
                <ul class="title-area">
                    <li class="name">
                        <h1><a href="bikesrock.html">BikesRock</a></h1>
                    </li>
                     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                    <li class="toggle-topbar menu-icon"><a href="">Menu</a></li><!--  toggle-topbar means appear when width is small-->
                </ul>
                <section class="top-bar-section">
                    <ul class="right">
                        <li class="divider"></li>
                        <li><a href="http://www.yahoo.com">About</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Contact</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Top Bikes</a></li>
                        <li class="divider"></li>
                    </ul>
                </section>
            </nav>
        </div>


        <!--[if lt IE 9]>
            <script src="js/vendor/jquery1.10.2.min.js"></script>
        <![endif]-->
        <![if !IE]>
            <script src="js/vendor/jquery2.1.0.js"></script>
        <![endif]>
        <script src="js/foundation.min.js"></script>
        <script>
          $(document).foundation();
        </script>
        <script src="js/rem.js"></script>
    </body>
</html>

This is great. Started sassifying for the lulz: https://gist.github.com/gpspake/11239576

Worked like a charm. Thank you!!!