0

I have a situation where i'm giving width to a div dynamically using jQuery. Everything is working good with moz and ff since they are taking 100/7+"%" as 14.2857% where as IE is taking it as 14.28% which is screwing up my UI as 14.28*7 is only 99.96.

is there a solution to make my ie take three or four decimals?? I've tried rounding my output to three, also tried using toFixed(3) which are not working.

Thanks in advance.

Green Wizard
  • 3,507
  • 4
  • 18
  • 29
  • what about `Math.round()` – Pavlo Mar 04 '14 at 08:55
  • no use.. i've tried the same @Pavlo even if i try rounding to three ie is taking two decimals – Green Wizard Mar 04 '14 at 08:56
  • What version of IE are you using? Mine returns: `"14.285714285714286%"` for `100/7+"%"` (IE 11) – Cerbrus Mar 04 '14 at 08:56
  • pls try giving this value as width to a div using jquery. in general if you are calculating, it is returning a good value. – Green Wizard Mar 04 '14 at 08:57
  • 1
    `Math.round(14.28*7)` the result will be `100`. Also, read [JavaScript round() method](http://www.w3schools.com/jsref/jsref_round.asp) – Pavlo Mar 04 '14 at 08:58
  • well i will try now and tell @pavlo – Green Wizard Mar 04 '14 at 08:59
  • How you are giving the width? Can you show your code? – Rahul Tripathi Mar 04 '14 at 08:59
  • 1
    Probably you do have your own reasons to do it through JS / jQuery, but normally controlling the layout through pure CSS is... more elegant. – aleation Mar 04 '14 at 09:03
  • As each browser on each device type will eventually do the rendering, it will matter less what your end result will be, decimal wise. This post shows that: http://ejohn.org/blog/sub-pixel-problems-in-css/ – Asons Mar 04 '14 at 09:03
  • Use "user2728841" suggestion and you will always get "same" values. – Asons Mar 04 '14 at 09:06
  • 1
    Some more reading why you should do your own "rounding" to make sure it looks how you want: http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected – Asons Mar 04 '14 at 09:15
  • @GreenWizard - Did you try using `width: calc(14.2857% - 1px)` - that should sort out rounding bugs - see also [this post](http://stackoverflow.com/q/16658482/703717) – Danield Jun 18 '14 at 22:45

1 Answers1

3

I would recommend that you work in pixels instead. Since you are using jQuery anyway, you have access to $(window).width() and $(screen).width(), or $(parentelement).width() so there's your 100%. Then all pixel measurements are guaranteed to be integer by definition.

then

$("#mydiv").width($(window).width() / 7);

Maybe not the solution you wanted but we have all our developers work in pixels as a standard. We find that works well in practice.

user2728841
  • 1,333
  • 17
  • 32