Skip to content

Instantly share code, notes, and snippets.

@tmayr

tmayr/gist:5190565

Created March 18, 2013 20:34
Show Gist options
  • Save tmayr/5190565 to your computer and use it in GitHub Desktop.
Save tmayr/5190565 to your computer and use it in GitHub Desktop.
Download ZIP
Foundation Topbar IE8 Fix
Raw
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%; }
@tahme
Copy link

tahme commented Apr 12, 2013

This saved me from a lot of headache, thanks!

@sforsparky
Copy link

You are wonderful!

@sforsparky
Copy link

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

@yarosla
Copy link

yarosla commented May 25, 2013

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

@seniorpreacher
Copy link

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

Copy link

ghost commented Jul 5, 2013

Thanks! but links are not clickable...

@jasonLocke
Copy link

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.

@tazcarper
Copy link

Thanks!

@jpawlyn
Copy link

jpawlyn commented Oct 18, 2013

Excellent, that was a life saver, thanks.

@amberjune
Copy link

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;
}

@brexis
Copy link

brexis commented Jan 5, 2014

thanks, this saves my life.

@cpda
Copy link

cpda commented Jan 28, 2014

thanks!!! This save my brain.

@zombiGoats
Copy link

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.

@CMaso
Copy link

CMaso commented Apr 11, 2014

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>

@gpspake
Copy link

gpspake commented Apr 24, 2014

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

@21msweeney
Copy link

Worked like a charm. Thank you!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment