Inventis/slice-template — Issue #49: IE6 Columns (Bootstrap override)
Author: GertBangels
Created: 2011-10-26 07:17:34+00:00
State: open

The gridstructure within Bootstrap doesn't support IE6 because of the negative margins. This will cut off some text and floats all the .span[x] divs underneath eachother.

With the following override we can fix this:

// IE6 Columns (Bootstrap override)
.ie6 {
.container {
.row {
margin: 0 -20px;
*zoom: 1;
}

.row:after {
display: table;
clear: both;
content: "";
}

/* replace with .row .column */
.row .span1,
.row .span2,
.row .span3,
.row .span4,
.row .span5,
.row .span6,
.row .span7,
.row .span8,
.row .span9,
.row .span10,
.row .span11,
.row .span12,
.row .span13,
.row .span14,
.row .span15,
.row .span16 {
float: left;
margin-left: 20px;
display: inline; /* IE6 double margin bug fix. Harmless, but could be sandboxed with * or _ hack */
}

.row .span1 { width: 40px; }
.row .span2 { width: 100px; }
.row .span3 { width: 160px; }
.row .span4 { width: 220px; }
.row .span5 { width: 280px; }
.row .span6 { width: 340px; }
.row .span7 { width: 400px; }
.row .span8 { width: 460px; }
.row .span9 { width: 520px; }
.row .span10 { width: 580px; }
.row .span11 { width: 640px; }
.row .span12 { width: 700px; }
.row .span13 { width: 760px; }
.row .span14 { width: 820px; }
.row .span15 { width: 880px; }
.row .span16 { width: 940px; }

.row .offset1 { margin-left: 80px; }
.row .offset2 { margin-left: 140px; }
.row .offset3 { margin-left: 200px; }
.row .offset4 { margin-left: 260px; }
.row .offset5 { margin-left: 320px; }
.row .offset6 { margin-left: 380px; }
.row .offset7 { margin-left: 440px; }
.row .offset8 { margin-left: 500px; }
.row .offset9 { margin-left: 500px; }
.row .offset10 { margin-left: 620px; }
.row .offset11 { margin-left: 680px; }
.row .offset12 { margin-left: 740px; }
}

}