CODEWITHSUNDEEP
cssinternet-explorerbackground-position
Dan
Dan

Reputation: 10351

IE (bug) percentages with background-position

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):

enter image description here

Chrome (12.0.742.100):

enter image description here

Safari (5.0.2):

enter image description here

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

enter image description here

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?

Upvotes: 2

Views: 2862

Answers (3)

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13302

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.

Upvotes: 3

MohamedAlaa
MohamedAlaa

Reputation: 33

The background image should fit the width of the container DIV, so your code should look like this:

background:url(link/to/image.gif) scroll repeat-y 0 0;

Upvotes: 0

zia
zia

Reputation: 57

IE always make us doing more works. maybe using different css style is the answer

<!--[if gte IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

Upvotes: 0

Related Questions