ie8-grid-foundation-4.css

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

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?

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.

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?

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!

For nav I add this too:

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

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

@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/

Thanks @qwerypants

@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'
}
);

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

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.

respond.js worked great for me as well.

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

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

thanks!

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

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.

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. :)

This fixes the grid problems for ie7 and 8

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

Why don't you just use respond.js?

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).

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

Okay, all you moaners :), here's some stuff I've created for IE7/IE8 support:

• _lt-ie9-foundation-grid.scss - Zurb Foundation 4/5 Grid for IE7/8
• _lt-ie8-foundation-box-sizing.scss - Zurb Foundation 4/5 Grid (IE7 fixes)

Awesome stuff - thanks!!!

Thanks a lot. It works great!

This is MAGIC. Thank you so much!

thanks, this saves my life.

@melvinmt

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

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

Thanks a lot for your snipet ;)

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?