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?

Improve this question
5
  • 7
    Can you explain how you see that the width on screen is 163px and not the desired 163.4px ? Commented Jul 4, 2012 at 8: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. Commented Jul 4, 2012 at 8: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? Commented Jul 4, 2012 at 8:47
  • There could be fractional pixels according to the documentation 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). Commented Jul 4, 2012 at 8: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. Commented Nov 30, 2012 at 12:44

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.