Question

I’m having an issue in IE only with a background image for an element in a flexible/fluid layout.

Basically, I need the background image (which is 1px by 1px) to tile vertically. When the layout is at full width, the background image sits at 676px from the left which when converted to percentages equals 70.56367% (676px divide by it's container of 958px).

This works fine in Firefox, Chrome and Safari however does not work in any of the IE‘s (6,7 and 8). The background position only seems to work when the percentage is a full number and not a fraction ie. Background position changes when set to 70% or 71% and so on.

Here is what I have and how it appears in the browsers:

background:url(link/to/image.gif) repeat-y 70.6680584551148% 0;/*676px/958px*/

I also tried setting the background position as separate X and Y values (same result though):

background-position-x:70.6680584551148%;/*676px/958px*/
background-position-y: 0;

Firefox (v3.6.3):

Chrome (12.0.742.100):

Safari (5.0.2):

Internet Explorer (6, 7 and 8 – all the same result):

So my question is, is this just an IE problem where the browser can not calculate a percentage that is not whole? Or, is there a fix or something I am missing?

Answer 1

I was recently fiddling around with making a scalable site design based on percentage widths using em. Luckily for me, it was only prototyping because as it turned out, it seems IE ignores anything after the second decimal place. You can see for yourself by loading IE8 and hitting F12 to pull up the development console. Find your CSS with the percentage and see what it says.

Just for the record, my em measurements would have been like this 0.7056367 instead of this 70.56367% which (in my tests) would have become 0.70. It seems very feasible to me, then, that IE is rounding to the nearest percentage point (70%) or the nearest hundredth of a percent (70.56%) at most.