Firebug and Offset Calculations

Question

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.

Answer 1

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?

Answer 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