Question

I’m struggling to understand the top and left values in the below computed element style. I specify the top and left values as 59pt and 202pt respectively with domStyle.set (Dojo). The actual values will be however 78px and 269px. Looking at the padding and borders I can’t work out how these numbers are calculated.

Can someone help please? The below numbers are from FireBug. Many thanks.

BOX MODEL
width   422px
height  267px
top 78.6667px
    @element.style  59pt    
left    269.333px
    @element.style  202pt   
padding-top 8px
padding-right   8px
padding-bottom  8px
padding-left    8px
border-top-width    1px
border-right-width  1px
border-bottom-width 1px
border-left-width   1px
border-top-style    solid
border-right-style  solid
border-bottom-style solid
border-left-style   solid

LAYOUT
position    absolute
display block
z-index 102
overflow-x  hidden
overflow-y  hidden

Answer 1

1pt is 1/72in, while a pixel is a pixel (at least on most desktops/laptops). Units are converted based on what the browser thinks the DPI of the screen is (which is usually assumed to be 72dpi IIRC).

Don’t use physical units for use on screen.