/* 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; } |
This comment has been minimized.
This comment has been minimized.
Awesome Chris. Just what I was looking for. |
This comment has been minimized.
This comment has been minimized.
Where is the Foundation 3 version of this? |
This comment has been minimized.
This comment has been minimized.
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/ |
This comment has been minimized.
This comment has been minimized.
Or use the nicer snippet from HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/index.html |
This comment has been minimized.
This comment has been minimized.
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.
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. |
This comment has been minimized.
This comment has been minimized.
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!
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. |
This comment has been minimized.
This comment has been minimized.
This is all good stuff :) Now, does anybody know how to get Foundation 4 Block Grids to display correctly in IE8?
|
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
@stevehiley |
This comment has been minimized.
This comment has been minimized.
@pietschy 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 */ Let me know if you have better results with this polyfill in F4! |
This comment has been minimized.
This comment has been minimized.
How can I implement this file? |
This comment has been minimized.
This comment has been minimized.
Thank you very much this worked for me, some minor tweaking to do on my part. thank. |
This comment has been minimized.
This comment has been minimized.
As far as I can tell, using respond.js solves the grid problem. |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
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 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) |
This comment has been minimized.
This comment has been minimized.
Great fix. One thing I noticed is that anywhere there is the class "hide-on-small" will hide the part in IE8. |
This comment has been minimized.
This comment has been minimized.
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... |
This comment has been minimized.
This comment has been minimized.
For those having trouble getting "hide-for-small" to show up in IE8, just add:
to your ie8-grid-foundation-4.css file. Seemed to work for me, anyways! |
This comment has been minimized.
This comment has been minimized.
I think your problem is that ie8 stylesheet is rendering before foundation stylesheet, try put IE8 css after foundation ones. |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
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 comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
An update of the .scss file to add support for IE in Foundation is very welcome. Why? Any updates suggestions are welcome! Thank you very much! |
This comment has been minimized.
This comment has been minimized.
For nav I add this too: .lt-ie9 .top-bar .top-bar-section ul {
li {
float: left;
display: inline;
}
} |
This comment has been minimized.
This comment has been minimized.
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 ;-) |
This comment has been minimized.
This comment has been minimized.
@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/ |
This comment has been minimized.
This comment has been minimized.
Thanks @qwerypants |
This comment has been minimized.
This comment has been minimized.
@djpthurso You also can use modernizr for loading the stylesheet as it comes loaded with F4 already.... // test for media querie support 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 |
This comment has been minimized.
This comment has been minimized.
respond.min.js did the trick, without using any special CSS, thanks for the tip @pixelkai !!! |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
respond.js worked great for me as well. |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
thanks! this (and working in stevehiley's comment) was abetter solution for me then respond.js |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
Does anybody know how to get Foundation 4 Top Bar to display correctly in IE8? I've found this - https://gist.github.com/tmayr/5190565 and it helped me with my Top Bar problem after few minor changes. :) |
This comment has been minimized.
This comment has been minimized.
This fixes the grid problems for ie7 and 8 |
This comment has been minimized.
This comment has been minimized.
Why don't you just use respond.js? |
This comment has been minimized.
This comment has been minimized.
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). |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
Okay, all you moaners :), here's some stuff I've created for IE7/IE8 support: |
This comment has been minimized.
This comment has been minimized.
Awesome stuff - thanks!!! |
This comment has been minimized.
This comment has been minimized.
Thanks a lot. It works great! |
This comment has been minimized.
This comment has been minimized.
This is MAGIC. Thank you so much! |
This comment has been minimized.
This comment has been minimized.
thanks, this saves my life. |
This comment has been minimized.
This comment has been minimized.
You snippet invalidates the html all together. Is there a way around the problem? |
This comment has been minimized.
This comment has been minimized.
Dude! You deserve a medal. This has helped me greatly. Thanks for the great work! |
This comment has been minimized.
This comment has been minimized.
Thanks a lot for your snipet ;) |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This is great! Thank you