Menu icon Foundation
Foundation 5 Tabs with IE8

I know I know it's not supported but like lots of people I have a fair amount of IE 8 Traffic. The page is HERE:
http://www.bistromd.com/order

Foundation looks great and working until you emulate ie8 in document mode then everything goes full width and breaks.

I have read this :
http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8
and this:
http://www.kycosoftware.com/blog/article/getting-foundation-5-to-work-in-ie8

and have the following code in my head tag but I can't seem to make it work. I think I am missing something. Anybody have any ideas?

<!--[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]-->

Foundation 5ie8

I know I know it's not supported but like lots of people I have a fair amount of IE 8 Traffic. The page is HERE:
http://www.bistromd.com/order

Foundation looks great and working until you emulate ie8 in document mode then everything goes full width and breaks.

I have read this :
http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8
and this:
http://www.kycosoftware.com/blog/article/getting-foundation-5-to-work-in-ie8

and have the following code in my head tag but I can't seem to make it work. I think I am missing something. Anybody have any ideas?

<!--[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]-->

Bob Sawyer over 4 years ago

I added this to the footer of my site. Seems to help:

 jQuery(document).ready(function () {

            if (jQuery("HTML").hasClass("ie8-custom")) {
                for (var c = 1; c <= 12; c++) {
                    jQuery('.small-' + c + '[class*="medium"]').removeClass("small-" + c);
                    //Perform any other column-specific adjustments your design may require here
                }
                jQuery('.show-for-small').remove();
                jQuery('.hide-for-small').removeClass('hide-for-small');
                jQuery('.top-bar-section UL').css({ width: "inherit" });
                jQuery('.top-bar-section UL LI').css({ float: "left" });
                jQuery('.top-bar').css({ height: "inherit" });

            }
        });

Don't recall where I found this, though, so props to the original poster.

Michael Richards over 4 years ago

Didn't fix it... Thanks though...

Bob Sawyer over 4 years ago

Oh well. I tried. :)