Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fixes grid layout problems for zurb foundation 4 for internet explorer 8 and 7
/* zurb foundation 4 grid column fix for ie8 and below */
@mixin columnFix($columns: 12){
$i: 1;
@while $i < $columns + 1 {
$colWidth: ($i/$columns)*100%;
$colWidth7: ($i/$columns)*98%;
& .large-#{$i}, & .small-#{$i} {
width: $colWidth;
*width: $colWidth7; //sets the width for ie7
}
/* thanks to pinder */
& .large-offset-#{$i} {
margin-left: ($i/$columns)*100%;
*margin-left: ($i/$columns)*98%;;
}
/* allows centering block elements */
& .centered-#{$i}{
margin-left: (100% - $colWidth)/2;
*margin-left: (98% - $colWidth7)/2;
}
$i: $i + 1;
}
& .columns {
//*padding-left: 1%;
//*padding-right: 1%;
}
& .row .row {
*margin-left: 0; /* fix ie7 margins */
}
}
@import "columnfix";
.lt-ie9 {
@include columnFix;
}
<!DOCTYPE html>
<!--[if lte IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<title> Fix </title>
<link rel="stylesheet" href="css/app.css" />
<script type="text/javascript" src="js/vendor/jquery.js"></script>
<script src="js/vendor/custom.modernizr.js"></script>
<script type="text/javascript" src="js/vendor/jquery.cycle.all.js">
</head>
<body>
<div id='content' class="row">
<div id='leftPanel' class="large-8 columns left">
<p> 8 columns </p>
</div>
<div id='rightPanel' class='large-4 columns'>
4 columns
</div>
</div>
<div class='row'>
<div class='large-8 large-centered centered-8 columns'>
<p> This division is centered </p>
</div>
</div>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
@chriskobar

This comment has been minimized.

Copy link

chriskobar commented Sep 25, 2013

Does this replace the IE8 CSS grid stuff that Zurb provided and others added-to?

@Celleb

This comment has been minimized.

Copy link
Owner Author

Celleb commented Sep 30, 2013

@chriskobar, I might not have understood your question, but IE8 and below does not support the grid layout, and the mixin above allows them to support the grid system

@Celleb

This comment has been minimized.

Copy link
Owner Author

Celleb commented Sep 30, 2013

New update for column centering support in ie8 and below
syntax: centered-{column number} i.e:

@yhugi

This comment has been minimized.

Copy link

yhugi commented Oct 2, 2013

I have no experience with Mixins or SASS/LESS, and unfortunately, I have had no luck getting the IE8 CSS grid that Zurb and others provided that @chriskobar mentioned above, therefore, how would I go about making this work? Any help would be greatly appreciated.

@Celleb

This comment has been minimized.

Copy link
Owner Author

Celleb commented Oct 3, 2013

if you want the css version then try this https://gist.github.com/hatefulcrawdad/5068210

@pinder

This comment has been minimized.

Copy link

pinder commented Oct 11, 2013

Add the following to support offsets:

// Offsets
.large-offset-#{$i} { margin-left: ($i/$columns)*100%; }

@Celleb

This comment has been minimized.

Copy link
Owner Author

Celleb commented Nov 1, 2013

Thanx

@PeterEmil

This comment has been minimized.

Copy link

PeterEmil commented Dec 6, 2013

Can I create a 24-column layout with this mixin simply by changing the value of 12 into 24 in line 2?

@PeterEmil

This comment has been minimized.

Copy link

PeterEmil commented Dec 6, 2013

push & pulls doesn't seem to work for now.

@Celleb

This comment has been minimized.

Copy link
Owner Author

Celleb commented Jan 13, 2014

Yes you can do that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.