0

Possible Duplicate:
Are the decimal places in a CSS width respected?

I have a navigation (li) which needs a pixel value to fit within an ul (has display:block). So I use width:163.4px for the li's. This does work fine in Firefox (v13.0.1) but in Safari, Chrome and Opera the width is too short. (The width is there like 163px... So I guess those browsers rounding down the value.)

Explain me why only Firefox does support floating point numbers for this case?

Community
  • 1
  • 1
Tomkay
  • 5,120
  • 21
  • 60
  • 92
  • 7
    Can you explain how you see that the width on screen is 163px and not the desired 163.4px ? – Denys Séguret Jul 04 '12 at 08:00
  • @dystroy I used Firebug for Firefox and I decreased & increased the Floating point number. In Firefox the LI's width decreased/increased slightly. I also tried this in Opera (w. Dragonfly), Safari (w. Firebug Lite).. changing the floating point number there does not increase or decrease the width. – Tomkay Jul 04 '12 at 08:25
  • A pixel is a pixel and there's no such thing as a part of a pixel. So I don't understand why the 163.4 pixels? – paddotk Jul 04 '12 at 08:47
  • There could be fractional pixels according to the [documentation](http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units) but I think it only makes sense for some mobile devices or future screens. In your case you probably just have rounding to 163 or 164 depending on the values. There also could be a problem if using many fractional values (as their sum isn't the same if you round before or after summation). – Denys Séguret Jul 04 '12 at 08:55
  • If I have 1200 divs in a 960px wide container. It will go onto two rows if each one is 1px wide. In Chrome, FF and IE8+, if I set it to 0.8px wide then they all fit on one row...whereas IE7 rounds it to 0px. Seems like something is going on. – jsims281 Nov 30 '12 at 12:44

1 Answers1

0

All browsers round fractional pixel widths, including Firefox: http://jsfiddle.net/fgD7H/1/

You can see in the fiddle that the visible width of the red div increases only once per second, even though the actual width is incremented by 0.1 pixel ten times per second. This happens both in Chrome and in Firefox (haven't tested others).

My guess is there is some difference in rounding strategy between the two browsers (e.g. Chrome might be rounding down while Firefox might be rounding up). If you can provide a demo in jsfiddle, perhaps your problem might be more apparent. In all cases, the actual width rendered will be an integer number of pixels, so you should be able to fix the problem by setting your width to either 163px or 164px.

lanzz
  • 42,060
  • 10
  • 89
  • 98