/ie8-grid-foundation-4.css
Last active Aug 6, 2018
| /* 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.
Show comment
Hide comment
This comment has been minimized.
awshout
commented
Mar 2, 2013
|
This is great! Thank you |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
ghost
commented
Mar 3, 2013
|
Awesome Chris. Just what I was looking for. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
les306
commented
Mar 4, 2013
|
Where is the Foundation 3 version of this? |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
melvinmt
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/
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/ |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
soundslocke
Mar 5, 2013
Or use the nicer snippet from HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/index.html
soundslocke
commented
Mar 5, 2013
|
Or use the nicer snippet from HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/index.html |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
stevehiley
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
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. 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.
Show comment
Hide comment
This comment has been minimized.
stevehiley
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.
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! 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.
Show comment
Hide comment
This comment has been minimized.
lewisjenkins
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>
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? |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
willwashburn
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
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 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
pietschy
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.
pietschy
commented
Mar 14, 2013
|
@stevehiley |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
stevehiley
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!
stevehiley
commented
Mar 16, 2013
|
@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.
Show comment
Hide comment
This comment has been minimized.
snecz
commented
Mar 21, 2013
|
How can I implement this file? |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
mannuelf
Mar 29, 2013
Thank you very much this worked for me, some minor tweaking to do on my part. thank.
mannuelf
commented
Mar 29, 2013
|
Thank you very much this worked for me, some minor tweaking to do on my part. thank. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
ivandotv
commented
Apr 3, 2013
|
As far as I can tell, using respond.js solves the grid problem. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
ksherman
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.
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. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
bwallacejr
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?
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? |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
justinpincar
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.
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. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
jenshedqvist
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)
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 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.
Show comment
Hide comment
This comment has been minimized.
migo33
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.
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. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
martianzero
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...
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... |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
meghanb
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!
meghanb
commented
May 13, 2013
|
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.
Show comment
Hide comment
This comment has been minimized.
cranca
May 21, 2013
I think your problem is that ie8 stylesheet is rendering before foundation stylesheet, try put IE8 css after foundation ones.
cranca
commented
May 21, 2013
|
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.
Show comment
Hide comment
This comment has been minimized.
pablopaul
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
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 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
mlasell
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?
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? |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
conchan
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.
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. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
boah123
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
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? |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
boah123
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!
boah123
commented
Jun 2, 2013
|
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.
Show comment
Hide comment
This comment has been minimized.
lonchbox
Jun 5, 2013
For nav I add this too:
.lt-ie9 .top-bar .top-bar-section ul {
li {
float: left;
display: inline;
}
}
lonchbox
commented
Jun 5, 2013
|
For nav I add this too: .lt-ie9 .top-bar .top-bar-section ul {
li {
float: left;
display: inline;
}
} |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
djpthurso
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 ;-)
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 ;-) |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
qwertypants
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/
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/ |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
djpthurso
commented
Jun 11, 2013
|
Thanks @qwerypants |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
pixelkai
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'
}
);
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 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.
Show comment
Hide comment
This comment has been minimized.
ghost
Jun 18, 2013
respond.min.js did the trick, without using any special CSS, thanks for the tip @pixelkai !!!
ghost
commented
Jun 18, 2013
|
respond.min.js did the trick, without using any special CSS, thanks for the tip @pixelkai !!! |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
alleyhector
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.
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. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
hgezim
commented
Jul 3, 2013
|
respond.js worked great for me as well. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
finbrit
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.
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. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
tolusonaike
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.
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. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
shaunw
Jul 11, 2013
thanks!
this (and working in stevehiley's comment) was abetter solution for me then respond.js
shaunw
commented
Jul 11, 2013
|
thanks! this (and working in stevehiley's comment) was abetter solution for me then respond.js |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
poeticninja
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.
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. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
JenITBarber
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. :)
JenITBarber
commented
Jul 26, 2013
|
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.
Show comment
Hide comment
This comment has been minimized.
Celleb
commented
Sep 18, 2013
|
This fixes the grid problems for ie7 and 8 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
helpse
commented
Sep 22, 2013
|
Why don't you just use respond.js? |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
redranger
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).
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). |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
martypenner
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.
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. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
replete
commented
Oct 21, 2013
|
Okay, all you moaners :), here's some stuff I've created for IE7/IE8 support: |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Archie22is
commented
Oct 25, 2013
|
Awesome stuff - thanks!!! |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
irynaO
commented
Oct 31, 2013
|
Thanks a lot. It works great! |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
AmberJune
commented
Dec 11, 2013
|
This is MAGIC. Thank you so much! |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
brexis
commented
Jan 5, 2014
|
thanks, this saves my life. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Archie22is
Jan 14, 2014
You snippet invalidates the html all together. Is there a way around the problem?
Archie22is
commented
Jan 14, 2014
|
You snippet invalidates the html all together. Is there a way around the problem? |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
realph
Feb 3, 2014
Dude! You deserve a medal. This has helped me greatly. Thanks for the great work!
realph
commented
Feb 3, 2014
|
Dude! You deserve a medal. This has helped me greatly. Thanks for the great work! |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
HugoAverty
commented
Jul 8, 2014
|
Thanks a lot for your snipet ;) |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
jokeyrhyme
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?
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? |
This is great! Thank you