Create a gist now

Instantly share code, notes, and snippets.

@hatefulcrawdad /ie8-grid-foundation-4.css
Last active Apr 7, 2017

What would you like to do?
Download ZIP
Raw
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; }
@awshout

awshout commented Mar 2, 2013

This is great! Thank you
@ghost

ghost commented Mar 3, 2013

Awesome Chris. Just what I was looking for.
@les306

les306 commented Mar 4, 2013

Where is the Foundation 3 version of this?
@melvinmt

melvinmt commented Mar 5, 2013

If you were wondering (like me) why this doesn't work out of the box, it's because you need to add this to your html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]-->

More info: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
@soundslocke

soundslocke commented Mar 5, 2013

Or use the nicer snippet from HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/index.html
@stevehiley

stevehiley commented Mar 8, 2013

There is an inherent shortcoming in this piece of code. If you apply your column css selectors in the mobile-first fashion as prescribed by the makers of Foundation, this code will leave you in a lurch. For example, if you are decorating your column control div's strictly like "small-6 columns", assuming that they apply to all screen widths rather than spelling out the same definition for large like "small-6 large-6 columns", you will find that those columns will appear in 12-column form (no percentages applied) because the css did not find the "large-6" class.

To achieve the intended goal, one just needs to replicate the large grid width css for the small classes and place those before the large. That will prevent you from falling on another landmine, which is, not getting the right width on divs where you specified both large and small classes of varying widths. Attaching the small equivalents with the large css definition (in the comma-separated list) will yield that bug.

/* NOTE: We cloned the CSS definitions for the "large" column classes to "small" and placed them before the large
    ones in order to allow for each of the following use cases:
    - small classes by themselves (small-x)
    - combination of small and large (small-x large-y columns)
    - large only (large-x) 
 */
.small-1,.row .small-1 { width: 8.33333%; }
.small-2, .row .small-2 { width: 16.66667%; }
.small-3, .row .small-3 { width: 25%; }
.small-4, .row .small-4 { width: 33.33333%; }
.small-5, .row .small-5 { width: 41.66667%; }
.small-6, .row .small-6 { width: 50%; }
.small-7, .row .small-7 { width: 58.33333%; }
.small-8, .row .small-8 { width: 66.66667%; }
.small-9, .row .small-9 { width: 75%; }
.small-10, .row .small-10 { width: 83.33333%; }
.small-11, .row .small-11 { width: 91.66667%; }
.small-12, .row .small-12 { width: 100%; }

.large-1, .row .large-1 { width: 8.33333%; }
.large-2, .row .large-2 { width: 16.66667%; }
.large-3, .row .large-3 { width: 25%; }
.large-4, .row .large-4 { width: 33.33333%; }
.large-5, .row .large-5 { width: 41.66667%; }
.large-6, .row .large-6 { width: 50%; }
.large-7, .row .large-7 { width: 58.33333%; } 
.large-8, .row .large-8 { width: 66.66667%; }
.large-9, .row .large-9 { width: 75%; }
.large-10, .row .large-10 { width: 83.33333%; }
.large-11, .row .large-11 { width: 91.66667%; }
.large-12, .row .large-12 { width: 100%; }

.row .small-offset-1 { margin-left: 8.33333%; }
.row .small-offset-2 { margin-left: 16.66667%; }
.row .small-offset-3 { margin-left: 25%; }
.row .small-offset-4 { margin-left: 33.33333%; }
.row .small-offset-5 { margin-left: 41.66667%; }
.row .small-offset-6 { margin-left: 50%; }
.row .small-offset-7 { margin-left: 58.33333%; }
.row .small-offset-8 { margin-left: 66.66667%; }
.row .small-offset-9 { margin-left: 75%; }
.row .small-offset-10 { margin-left: 83.33333%; }

.row .large-offset-1 { margin-left: 8.33333%; }
.row .large-offset-2 { margin-left: 16.66667%; }
.row .large-offset-3 { margin-left: 25%; }
.row .large-offset-4 { margin-left: 33.33333%; }
.row .large-offset-5 { margin-left: 41.66667%; }
.row .large-offset-6 { margin-left: 50%; }
.row .large-offset-7 { margin-left: 58.33333%; }
.row .large-offset-8 { margin-left: 66.66667%; }
.row .large-offset-9 { margin-left: 75%; }
.row .large-offset-10 { margin-left: 83.33333%; }

As an aside, we intentionally removed the "lt-ie9" qualifier in the provided code because we found that conditional comment on the tag was not respected in the IE "browser mode" tool in the IE developer toolbar, making it difficult to test. Instead, we just include ie8-grid-foundation-4.css with the noted mofications in its own file with IE conditional comments. We still add the class in the tag as specified above, leaving that in for the sake of the Foundation js code keying off of that.
@stevehiley

stevehiley commented Mar 8, 2013

Additionally, we found we could clone and modify this a bit further to get this working for IE 7. The trick is to shrink down your percentages by a reasonable factor to offset the added width that IE introduces with their non-standard handling of the box-model there. For us, we found dropping all the column percentages by three was the right amount given our page width and gutter sizes. We also reduced our column padding slightly to help along these lines. You can find the right number by starting at the provided settings and reducing until your columns all fit. Take into account various widths and nested columns when sorting this out!

.row .column, .row .columns {padding: 0 8px;}

.large-1, .row .large-1{ width: 5.33333%; }
.large-2, .row .large-2 { width: 13.66667%; }
.large-3, .row .large-3 { width: 22%; }
.large-4, .row .large-4 { width: 30%; }
...

Then you just need to pull in the Foundation css from their "small" (read: medium screen size) media queries. You can extract that from their gem folder or associated compiled css. Just be aware of mixin and variable dependencies if grabbing the source scss! The Visibilty component is most critical. You may want others as well, depending on how much you care about IE 7.

This is all entirely unsupported and a pain, but you can get it working to a fair degree if you need to. And then not bother with it going forward.
@lewisjenkins

lewisjenkins commented Mar 10, 2013

This is all good stuff :)

Now, does anybody know how to get Foundation 4 Block Grids to display correctly in IE8?

<ul class="small-block-grid-2 large-block-grid-4">
  <li><img src="../img/demos/demo1.png"></li>
  <li><img src="../img/demos/demo2.png"></li>
  <li><img src="../img/demos/demo3.png"></li>
  <li><img src="../img/demos/demo4.png"></li>
</ul>
@willwashburn

willwashburn commented Mar 13, 2013

I would think you could fix the block grids in IE8 using something like this

.lt-ie9 .small-block-grid-4 {
    list-style: none;
}
lt-ie9 .small-block-grid-4 li {
    float:left;
    width: 25%;
        padding: 0 10px 10px;
}

.lt-ie9 .small-block-grid-4 li li:first-child + li +li +li {
        float:right;
}

.lt-ie9 .small-block-grid-4 li li:first-child +li +li +li + li {;
      clear: both;
  }

Obviously, that'd be for a 4 block grid. I have a fork of this here -> https://gist.github.com/willwashburn/5157451
@pietschy

pietschy commented Mar 14, 2013

@stevehiley
I had some success getting foundation 3 working in IE7 using https://github.com/Schepp/box-sizing-polyfill. I haven't tried it with foundation 4 yet.
@stevehiley

stevehiley commented Mar 16, 2013

@pietschy
Thanks for the tip. I tried it out on F4, but didn't have good results with it. It broke the Responsive handling of the page in IE8 (behaved like a fixed-width page), and was even worse in IE7. This was testing with Browser Mode tool in IE Developer Tools.

For my test, I applied this directly to lone box-sizing: border-box reference in the framework:

/* line 4, ../../../../../../../jruby-1.7.2/lib/ruby/gems/shared/gems/zurb-foundation-4.0.8/scss/foundation/components/_global.scss */
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/webassets/scripts/boxsizing.htc);
}

Let me know if you have better results with this polyfill in F4!
@snecz

snecz commented Mar 21, 2013

How can I implement this file?
@mannuelf

mannuelf commented Mar 29, 2013

Thank you very much this worked for me, some minor tweaking to do on my part. thank.
@ivandotv

ivandotv commented Apr 3, 2013

As far as I can tell, using respond.js solves the grid problem.
@ksherman

ksherman commented Apr 13, 2013

This is very helpful! @stevehiley, any chance of combining your ie8 and ie7 fixes into an .scss file we could import? I've gotten ie7 to mostly work, but I'd love to be able to just pull the styles into a compiled app.css file.
@bwallacejr

bwallacejr commented Apr 17, 2013

I'm trying to use this but having difficulty getting div's that are "hide-for-small" to show up in IE8

Here is my test page: http://mobile.tapeandmedia.com/basic-f4.asp I have a banner at the very top about Free Shipping that shows in Chrome and Firefox but not IE8.

How can I get this (and other elements) to show up on IE8?
@justinpincar

justinpincar commented Apr 22, 2013

@ikixxx, respond.js works for IE7/8 without any other modifications?

@ksherman, @stevehiley, any updates to your progress? If you've gotten somewhere close I'd rather begin my IE support from where you left off than to start from scratch.
@jenshedqvist

jenshedqvist commented Apr 23, 2013

I just tested the following grid templates from Foundation 4 page (http://foundation.zurb.com/templates.php) with respond.js and it works in IE8:

Grid
So Boxy
Orbit Home

It all seems to work. But IE7 fails me the behemoth. Not by to much though, it should be fixable with some minor tweaks (possibly changing percentage as suggested above)
@migo33

migo33 commented Apr 25, 2013

Great fix. One thing I noticed is that anywhere there is the class "hide-on-small" will hide the part in IE8.
@martianzero

martianzero commented May 12, 2013

HELP, @stevehiley or anyone else with the time and understanding to help.

I built a site for a client that wanted a responsive design. Used Foundation 4 and now they're pissed it doesn't look right in IE8. The grid is broken. I've tried pulling in the conditional CSS provided above in the index page, but not sure if I am understanding this solution here. Any help/insight would be greatly appreciated!

The attempt to fix is here.

http://martinjherbert.com/client_files/HS/test/index.html

The CSS is here

http://martinjherbert.com/client_files/HS/test/css/ie8-grid-foundation-4.css

Viewing this in any modern browser will show what it is supposed to look like.

Thanks. Eternally grateful for any help here...
@meghanb

meghanb commented May 13, 2013

For those having trouble getting "hide-for-small" to show up in IE8, just add:

.lt-ie9 .hide-for-small { display: block !important; }

to your ie8-grid-foundation-4.css file. Seemed to work for me, anyways!
@cranca

cranca commented May 21, 2013

@martianzero

I think your problem is that ie8 stylesheet is rendering before foundation stylesheet, try put IE8 css after foundation ones.
@pablopaul

pablopaul commented May 22, 2013

I guess line 12:

.lt-ie9 [class_="column"] + [class_="column"]:last-child { float: right; }

is senseless because Internet Explorer 8 does not support ":last-child" selection (https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child) ... mhm
@mlasell

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

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

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

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

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

djpthurso commented Jun 11, 2013

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

qwertypants commented Jun 11, 2013

@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

djpthurso commented Jun 11, 2013

Thanks @qwerypants
@pixelkai

pixelkai commented Jun 15, 2013

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

ghost commented Jun 18, 2013

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

alleyhector commented Jun 27, 2013

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

hgezim commented Jul 3, 2013

respond.js worked great for me as well.
@finbrit

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

tolusonaike commented Jul 6, 2013

@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

shaunw commented Jul 11, 2013

thanks!

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

poeticninja commented Jul 16, 2013

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

JenITBarber commented Jul 26, 2013

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

Celleb commented Sep 18, 2013

This fixes the grid problems for ie7 and 8

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

helpse commented Sep 22, 2013

Why don't you just use respond.js?
@redranger

redranger commented Oct 4, 2013

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

martypenner commented Oct 18, 2013

@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

replete commented Oct 21, 2013

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

Archie22is commented Oct 25, 2013

Awesome stuff - thanks!!!
@irynaO

irynaO commented Oct 31, 2013

Thanks a lot. It works great!
@AmberJune

AmberJune commented Dec 11, 2013

This is MAGIC. Thank you so much!
@brexis

brexis commented Jan 5, 2014

thanks, this saves my life.
@Archie22is

Archie22is commented Jan 14, 2014

@melvinmt

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

realph commented Feb 3, 2014

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

HugoAverty commented Jul 8, 2014

Thanks a lot for your snipet ;)
@jokeyrhyme

jokeyrhyme commented Jul 28, 2014

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