This page provides some idea on how the browser reports object size and position.
The box to the left is a DIV that has a 400 x 300 px image as it's background. The yellow border is 15px and should
exactly match the box. The box also has a 10px border.
The body margins and padding have been set to 0.
This should make the box's margins the same as it's offset from the top and left of the document.
Click inside the box to see all number type properties in a popup window. Click in the paragraph to see its values in another popup.
Notice the position of this box. While its margins are 0, in Netscape this will not go higher than the box on the left.
That is it will not go above the first non-floated object. Test top margin: Add 50pxSubtract 50pxremove
The next set of nested boxes are provided for additional comparisons.
The gray box, center1 was centered using absolute positioning inside a box with position relative.
The cyan box in the upper-left of the page will move to the position calculated by summing the the values of
offsetTop and offsetLeft. To see this click a link with the word sum.
Note that IE fails to include the borders in its position calculation,
where as Mozilla and its cousins does include the borders.
For nested elements, like the paragraph in the box with a 10px black border,
IE measures from the inside of a border to the outside of the inner border. In this cast,
from the inside of the body to the outside of the black border and then from the inside of
the black border to the outside of the 1px paragraph border. It is 10px off. Your code will have to
include the borders in calculating positions.
Div tag settings
width: 370px;
height: 270px;
border: 10px solid black;
margin-top: 50px;
margin-left: 60px;
padding: 15px;
This page provides some idea on how the browser reports object size and position. The box to the left is a DIV that has a 400 x 300 px image as it's background. The yellow border is 15px and should exactly match the box. The box also has a 10px border.
The body margins and padding have been set to 0. This should make the box's margins the same as it's offset from the top and left of the document.
Click inside the box to see all number type properties in a popup window. Click in the paragraph to see its values in another popup.
Notice the position of this box. While its margins are 0, in Netscape this will not go higher than the box on the left. That is it will not go above the first non-floated object. Test top margin:
Add 50px Subtract 50px remove
Summed Offsets
The next set of nested boxes are provided for additional comparisons. The gray box, center1 was centered using absolute positioning inside a box with position relative.
The cyan box in the upper-left of the page will move to the position calculated by summing the the values of offsetTop and offsetLeft. To see this click a link with the word sum.
Note that IE fails to include the borders in its position calculation, where as Mozilla and its cousins does include the borders.
For nested elements, like the paragraph in the box with a 10px black border, IE measures from the inside of a border to the outside of the inner border. In this cast, from the inside of the body to the outside of the black border and then from the inside of the black border to the outside of the 1px paragraph border. It is 10px off. Your code will have to include the borders in calculating positions.