Skip to content

Instantly share code, notes, and snippets.

@hatefulcrawdad
Last active September 9, 2021 18:47
Star You must be signed in to star a gist
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; }
@mlasell
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?

@conchan
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.

@boah123
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?

@boah123
Copy link

boah123 commented Jun 2, 2013

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

Why?
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!

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

@djpthurso
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 ;-)

@qwertypants
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: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

@djpthurso
Copy link

Thanks @qwerypants

@pixelkai
Copy link

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

// test for media querie support
Modernizr.load(
{
// test if browser understands media queries
test: Modernizr.mq('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
Modernizr.load(
{
// test if browser understands media queries
test: Modernizr.mq('only all'),
// if not load respond.js file
nope: 'js/vendor/respond.min.js'
}
);

@spirallab-org
Copy link

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

@alleyhector
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 http://bayareabikeshare.com/ in the

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

Thanks so much for your help.

@hgezim
Copy link

hgezim commented Jul 3, 2013

respond.js worked great for me as well.

@finbrit
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.

@tolusonaike
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.

@shaunw
Copy link

shaunw commented Jul 11, 2013

thanks!

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

@poeticninja
Copy link

Also something that has helped me target ie8 is using mixins with ie-8 being added. You can see my example here https://gist.github.com/poeticninja/6011133.

@JenITBarber
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 - https://gist.github.com/tmayr/5190565 and it helped me with my Top Bar problem after few minor changes. :)

@Celleb
Copy link

Celleb commented Sep 18, 2013

This fixes the grid problems for ie7 and 8

https://gist.github.com/Celleb/6605909

@helpse
Copy link

helpse commented Sep 22, 2013

Why don't you just use respond.js?

@redranger
Copy link

Why is support for IE8 not included by default? According to http://en.wikipedia.org/wiki/Usage_share_of_operating_systems, 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).

@martypenner
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.

@replete
Copy link

replete commented Oct 21, 2013

@Archie22is
Copy link

Awesome stuff - thanks!!!

@irynaO
Copy link

irynaO commented Oct 31, 2013

Thanks a lot. It works great!

@amberjune
Copy link

This is MAGIC. Thank you so much!

@brexis
Copy link

brexis commented Jan 5, 2014

thanks, this saves my life.

@Archie22is
Copy link

@melvinmt

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

@realph
Copy link

realph commented Feb 3, 2014

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

@HugoAverty
Copy link

Thanks a lot for your snipet ;)

@jokeyrhyme
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 http://caniuse.com or http://modernizr.com, 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