0

I've been looking at the CSS behind Bootstrap's scaffolding system, and I want to know why the asterisks and the different percentages are necessary in the code below. I believe that the asterisks are an IE hack, but why do the percentages need to be different? Does IE render things slightly differently? And if so, and if I wanted to create a simple scaffold of my own, how would I work out what the asterisked widths should be (I know how to work out the plain widths)?

.row-fluid .span12 {
    width: 100%;
    *width: 99.94680851063829%;
}
.row-fluid .span11 {
    width: 91.43646408839778%;
    *width: 91.38327259903608%;
}
.row-fluid .span10 {
    width: 82.87292817679558%;
    *width: 82.81973668743387%;
}

Thank you for any help you can give. :)

EDIT: I see now that the IE7 width can be derived by minusing approx. 0.05319148936 from the normal width, but why is that so? And would that calculation be different if I, for example, wanted to create a scaffold with more or fewer columns?

Lefèvre
  • 32
  • 8
  • 1
    See http://stackoverflow.com/questions/4563651/what-does-an-asterisk-do-in-a-css-property-name and http://stackoverflow.com/questions/1690642/css-reset-purpose-of-asterik-within-a-style – j08691 Feb 17 '13 at 21:55
  • Many thanks for that, j08691, but I pretty much knew that, so I'm more interested in how to calculate the IE width percentages for the scaffold (and why they should need to be different for those browsers). – Lefèvre Feb 17 '13 at 21:57

2 Answers2

3

IE7 has problems with rounding up it's subpixels. Something that is exactly 100% in webkit or firefox can end up being a couple of pixels larger in IE7, the result of these extra couple of pixels can end up pushing columns below each other. The best explaination http://ejohn.org/blog/sub-pixel-problems-in-css/

It looks as though bootstrap remove 0.05319148936 for each column in IE7 to deal with this issue.

if you use sass you can make use of this mixin

@mixin x-percent-width($percentage) {
 width: $percentage;
 *width: $percentage - 0.05319148936;
}
scottmwilliams
  • 168
  • 1
  • 8
0

The question is quite old but I still want to add an explanation.

This value is derived from the bootstrap 2.0 grid width which is fixed to 940px. The rounding error cannot be higher than half of pixel, so it's the value that is being subtracted from every width for ie7.

Check the code: https://github.com/twbs/bootstrap/blob/v2.0.4/less/mixins.less#L601

.span (@columns) {
    width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
    *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}

@gridRowWidth = 940px

can3p
  • 59
  • 4