Create a gist now

Instantly share code, notes, and snippets.

@tmayr /gist:5190565
Created Mar 18, 2013

Embed
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%; }
@minamarkham

This comment has been minimized.

Show comment
Hide comment
@minamarkham

minamarkham Mar 28, 2013

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

minamarkham commented Mar 28, 2013

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

This comment has been minimized.

Show comment
Hide comment
@marcelotorres

marcelotorres Apr 8, 2013

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

marcelotorres commented Apr 8, 2013

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

This comment has been minimized.

Show comment
Hide comment
@yfkar

yfkar Apr 12, 2013

This saved me from a lot of headache, thanks!

yfkar commented Apr 12, 2013

This saved me from a lot of headache, thanks!
@sforsparky

This comment has been minimized.

Show comment
Hide comment
@sforsparky

sforsparky Apr 30, 2013

You are wonderful!

sforsparky commented Apr 30, 2013

You are wonderful!
@sforsparky

This comment has been minimized.

Show comment
Hide comment
@sforsparky

sforsparky May 2, 2013

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

sforsparky commented May 2, 2013

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

This comment has been minimized.

Show comment
Hide comment
@yarosla

yarosla May 25, 2013

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

yarosla commented May 25, 2013

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

This comment has been minimized.

Show comment
Hide comment
@seniorpreacher

seniorpreacher Jun 12, 2013

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

seniorpreacher commented Jun 12, 2013

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

This comment has been minimized.

Show comment
Hide comment
@countfak

countfak Jul 5, 2013

Thanks! but links are not clickable...

countfak commented Jul 5, 2013

Thanks! but links are not clickable...
@jasonLocke

This comment has been minimized.

Show comment
Hide comment
@jasonLocke

jasonLocke Jul 8, 2013

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.

jasonLocke commented Jul 8, 2013

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

This comment has been minimized.

Show comment
Hide comment
@tazcarper

tazcarper Jul 30, 2013

Thanks!

tazcarper commented Jul 30, 2013

Thanks!
@jpawlyn

This comment has been minimized.

Show comment
Hide comment
@jpawlyn

jpawlyn Oct 18, 2013

Excellent, that was a life saver, thanks.

jpawlyn commented Oct 18, 2013

Excellent, that was a life saver, thanks.
@AmberJune

This comment has been minimized.

Show comment
Hide comment
@AmberJune

AmberJune Dec 11, 2013

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

AmberJune commented Dec 11, 2013

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

This comment has been minimized.

Show comment
Hide comment
@brexis

brexis Jan 5, 2014

thanks, this saves my life.

brexis commented Jan 5, 2014

thanks, this saves my life.
@CPDA

This comment has been minimized.

Show comment
Hide comment
@CPDA

CPDA Jan 28, 2014

thanks!!! This save my brain.

CPDA commented Jan 28, 2014

thanks!!! This save my brain.
@zombiGoats

This comment has been minimized.

Show comment
Hide comment
@zombiGoats

zombiGoats Mar 14, 2014

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.

zombiGoats commented Mar 14, 2014

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

This comment has been minimized.

Show comment
Hide comment
@CMaso

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

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

This comment has been minimized.

Show comment
Hide comment
@gpspake

gpspake Apr 24, 2014

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

gpspake commented Apr 24, 2014

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

This comment has been minimized.

Show comment
Hide comment
@21msweeney

21msweeney Jul 18, 2014

Worked like a charm. Thank you!!!

21msweeney commented Jul 18, 2014

Worked like a charm. Thank you!!!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment