Skip to content

Instantly share code, notes, and snippets.

Last active May 10, 2024 14:40
Show Gist options
  • Save hatefulcrawdad/5068210 to your computer and use it in GitHub Desktop.
Save hatefulcrawdad/5068210 to your computer and use it in GitHub Desktop.
/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column,
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }
.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }
.lt-ie9 .large-1,
.lt-ie9 .row .large-1 { width: 8.33333%; }
.lt-ie9 .large-2,
.lt-ie9 .row .large-2 { width: 16.66667%; }
.lt-ie9 .large-3,
.lt-ie9 .row .large-3 { width: 25%; }
.lt-ie9 .large-4,
.lt-ie9 .row .large-4 { width: 33.33333%; }
.lt-ie9 .large-5,
.lt-ie9 .row .large-5 { width: 41.66667%; }
.lt-ie9 .large-6,
.lt-ie9 .row .large-6 { width: 50%; }
.lt-ie9 .large-7,
.lt-ie9 .row .large-7 { width: 58.33333%; }
.lt-ie9 .large-8,
.lt-ie9 .row .large-8 { width: 66.66667%; }
.lt-ie9 .large-9,
.lt-ie9 .row .large-9 { width: 75%; }
.lt-ie9 .large-10,
.lt-ie9 .row .large-10 { width: 83.33333%; }
.lt-ie9 .large-11,
.lt-ie9 .row .large-11 { width: 91.66667%; }
.lt-ie9 .large-12,
.lt-ie9 .row .large-12 { width: 100%; }
.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }
.lt-ie9 .pull-2 { right: 16.66667%; }
.lt-ie9 .pull-3 { right: 25%; }
.lt-ie9 .pull-4 { right: 33.33333%; }
.lt-ie9 .pull-5 { right: 41.66667%; }
.lt-ie9 .pull-6 { right: 50%; }
.lt-ie9 .pull-7 { right: 58.33333%; }
.lt-ie9 .pull-8 { right: 66.66667%; }
.lt-ie9 .pull-9 { right: 75%; }
.lt-ie9 .pull-10 { right: 83.33333%; }
.lt-ie9 .push-2 { left: 16.66667%; }
.lt-ie9 .push-3 { left: 25%; }
.lt-ie9 .push-4 { left: 33.33333%; }
.lt-ie9 .push-5 { left: 41.66667%; }
.lt-ie9 .push-6 { left: 50%; }
.lt-ie9 .push-7 { left: 58.33333%; }
.lt-ie9 .push-8 { left: 66.66667%; }
.lt-ie9 .push-9 { left: 75%; }
.lt-ie9 .push-10 { left: 83.33333%; }
/* Nicolas Gallagher's micro clearfix */
.lt-ie9 .row { *zoom: 1; }
.lt-ie9 .row:before, .row:after { content: " "; display: table; }
.lt-ie9 .row:after { clear: both; }
Copy link

mlasell commented May 22, 2013

Why does one need responsive layout in IE8 or 7? What device uses IE8 or 7 that needs to be responsive? Couldn't one just have a fixed-width IE7/8 css file?

Copy link

conchan commented May 24, 2013

This may be an obvious thing, but I just wanted to note that this assumes you're using Foundation's standard 12 column grid. If you customized your Foundation download and are using more/less columns like I am, remember to correct and make the math adjustments.

Copy link

boah123 commented Jun 1, 2013

IE7 and Foundation is drama. Another problem with IE and Foundation is the mobile first principle. Is there a way to show IE users the non-mobile version?

Copy link

boah123 commented Jun 2, 2013

An update of the .scss file to add support for IE in Foundation is very welcome.

I have changed the default number of columns, the margins and the grid width. This makes the ie8-grid-foundation-4.css useless. The file respond.min.js does a better job in IE7 while their remain issues with the topbar (menu items are missing), the orbit (not vissible at all), Grid Blocks (it's now a vertical list, should be horizontally), and mobile first (no desktop version).

Any updates suggestions are welcome!
Even a graceful way to tell users of IE7 and below to update their browser is welcome.

Thank you very much!

Copy link

lonchbox commented Jun 5, 2013

For nav I add this too:

.lt-ie9 .top-bar .top-bar-section ul {
    li {
        float: left;
        display: inline;

Copy link

This may seem like a daft question to you guys but what do I do with "ie8-grid-foundation-4.css"? Just add it to the foundation.css?

Thanks, and be gentle with an aging newbie ;-)

Copy link

@djpthurso You can load it in a separate file after foundation.css. Then you'd need to target the new file to load when IE8 is detected. Learn more here:

Copy link

Thanks @qwerypants

Copy link

@djpthurso You also can use modernizr for loading the stylesheet as it comes loaded with F4 already....

// test for media querie support
// test if browser understands media queries
test:'only all'),
// if not load ie8-grid
nope: 'css/ie8-grid-foundation-4.css'

but an alternative might also be to load respond.js as it makes the original responsive F4 grid work on IE8

// test for media querie support
// test if browser understands media queries
test:'only all'),
// if not load respond.js file
nope: 'js/vendor/respond.min.js'

Copy link

respond.min.js did the trick, without using any special CSS, thanks for the tip @pixelkai !!!

Copy link

I implemented @stevehiley 's modified version of this and it did a lot to improve our site in IE8. However, the top navigation still looks abysmal (at least when testing in IE 10's IE8 browser mode). Can anyone tell what might be happening on in the

section and how to get it to look a little better?

Thanks so much for your help.

Copy link

hgezim commented Jul 3, 2013

respond.js worked great for me as well.

Copy link

finbrit commented Jul 3, 2013

@hgezim.I am trying to get respond.js working and I am having no luck. No matter whether I try and load it with Modinizer, ie8 conditional query or just include it directly, all I see in ie8 is the "small" media query breakpoint results no matter what size the screen, so media-query seem to be completely ignored. Is it working for you in ie8? If so, any chance you could give me some pointers on how you managed it.

Copy link

@hgezim no luck for me either. I have tried css3mediaqueries and respond.js and its still broken in IE8. Would love some feedback on how you did it.

Copy link

shaunw commented Jul 11, 2013


this (and working in stevehiley's comment) was abetter solution for me then respond.js

Copy link

Also something that has helped me target ie8 is using mixins with ie-8 being added. You can see my example here

Copy link

Does anybody know how to get Foundation 4 Top Bar to display correctly in IE8?
I've tried @lonchbox's solution, but it doesn't work for me. :(

I've found this - and it helped me with my Top Bar problem after few minor changes. :)

Copy link

Celleb commented Sep 18, 2013

This fixes the grid problems for ie7 and 8

Copy link

helpse commented Sep 22, 2013

Why don't you just use respond.js?

Copy link

Why is support for IE8 not included by default? According to, over 30% of users are still using Windows XP, and I imagine a large % of those will be using IE8 and are therefore unable to update to IE9 or IE10. Having just started using Foundation I'm disappointed that such a large number of users are excluded (awkward as developing for IE8 might be).

Copy link

@redranger Zurb is a forward-thinking organization. By only basically supporting IE8 they can focus on more important things.

"Support" for a browser can also mean a lot of things. Do you mean content parity? Identical design across platforms? According to W3C's stats, IE8 is currently at only 7% market share. My company's most conservative analytics for a 170,000-visit-per-month site show it at 12% (we're in Ontario, Canada). That means we still have to provide a good experience for IE8 users, but perhaps we can get away with giving them the mobile-first design.

Copy link

replete commented Oct 21, 2013

Copy link

Awesome stuff - thanks!!!

Copy link

irynaO commented Oct 31, 2013

Thanks a lot. It works great!

Copy link

This is MAGIC. Thank you so much!

Copy link

brexis commented Jan 5, 2014

thanks, this saves my life.

Copy link


You snippet invalidates the html all together. Is there a way around the problem?

Copy link

realph commented Feb 3, 2014

Dude! You deserve a medal. This has helped me greatly. Thanks for the great work!

Copy link

Thanks a lot for your snipet ;)

Copy link

It would be highly educational for me if someone could explain why old versions of Internet Explorer don't work the same way as the other browsers. In terms of or, what does IE<9 implement differently or lack?

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