5

Does anyone know if Firebug rounds the offset top and left when they give us the below panel?

The reason I ask is because I am having trouble with using offsets that have decimal places and I am wondering whether Firebug rounds or floors these values.

I tried to have a look at the source code but couldn't pinpoint where offset calculations were being made.

Any help appreciated.

enter image description here

Abs
  • 56,052
  • 101
  • 275
  • 409

2 Answers2

5

According to the firebug source on SVN, the offset values are parsed as integers. Also have a look at this.

I'm not 100% what Firebug does but when I deal with decimal values for pixels I always floor because rounding up may break the layout.

This question may also help: Are the decimal places in a CSS width respected?

Community
  • 1
  • 1
T. Junghans
  • 11,385
  • 7
  • 52
  • 75
  • are they? `parseInt` is only used on border widths, which can't be smaller than a pixel. The offsets apparently are left alone. – Ricardo Tomasi Mar 25 '12 at 06:08
  • @TJ - thank you very much for the help and insight. We've decided to floor. We were basically working out if certain elements overlap. – Abs Mar 26 '12 at 09:32
2

I'm not sure about this though. But I think when you set a style that has a decimal point. It is the browser which determines if that decimal should be rounded or floored. For practical reasons, rounded decimal is the best choice. It is the best choice because floated elements have a higher probability of changing layout dramatically. For instance if you have a a wrapper with three rectangles on it. The wrapper is 60 pixels long and you set the rectangles width to 20.5px. If the browser rounds the decimal point the last rectangle would jump to the next row.

Here is a JS fiddle where you can test various decimal points for various browsers. And if I'm correct the offset left and top always have the same value as the native JS methods offsetLeft and offsetTop. At least in my testings.

  • Firefox rounds
  • Google Chrome & Safari floors
einstein
  • 13,389
  • 27
  • 80
  • 110
  • Nice example! However my testings reveal the opposite outcome. I'm using Mac OS X and get these results: - Firefox 11: rounds, so 20.4 ==> 20 and 20.5 => 21. - Safari 5.1.2 & Chrome 17: floor, although 20.99 is rounded to 21, while 20.90 is floored to 20. I don't understand how [flooring](http://en.wikipedia.org/wiki/Floor_and_ceiling_functions) three elements of width 20.5px wouldn't fit next to each other in a 60px container. The floored width would be 20px and fit perfectly. Rounding up to 21px would require three extra pixels forcing the last element to move down. – T. Junghans Mar 25 '12 at 19:13
  • Sorry TJ my wrong. I'm from Sweden so I mixed them up. I will change my answer. – einstein Mar 25 '12 at 21:03
  • Woho87, are you asking me or the author of the question? – T. Junghans Mar 25 '12 at 21:44