Box Dimensions by George Hernandez

Box dimensions in CSS and DHTML such as padding, border, and margin. IE 6 gave IE the option to render items as CSS compliant. See CSS Enhancements in Internet Explorer 6 [§].

Box Dimension Attributes
Read-Write Dimension Attributes
Read-Only Dimension Attributes
Miscellany

Box Dimension Attributes

These are the usual CSS attributes that specify the dimensions of an object/element/content. These CSS Attributes have string values. These attributes can be scripted and can be used inline with HTML. There is a distinction between the size of the just the element and the size of the "box" (which includes the borders and margins).

The basic box dimensions of padding, border, and margin

object.style.padding. Transparent distance between the object and the inner edge of the border.
object.style.border. Thickness of the border surrounding the padding and the object.
object.style.margin. Transparent distance between the nearest object and the outer edge of the border. The margin attribute doesn't apply to the <body> tag (but IE still "applies" it to the left side) or to objects with the position attribute set to absolute.

Image illustrating the relationship between content, padding, borders, and margins.

In Internet Explorer, all elements have "layout" unless the element is inline and is neither absolutely positioned or has its height or width specified.

In non-compliant IE:

body was tied to the window and could not be resized.
body borders were rendered inside the window but outside the scroll bars since body could not have its own scrollbars.
body margins only apply to the left side while actually it was inside of the border.
Positioned items without a positioned parent took body as the parent.

In compliant IE:

body is within html and can be resized.
body borders are rendered inside the window and scroll bars but body could also have its own scrollbars.
body margins can be apply to all sides, outside of the border.
Positioned items without a positioned parent take html as the parent. The html tag cannot be referenced as document.all.html, you will have to reference the html tag by id. EG: Set <html id="oHtml">, and then use oHtml.clientHeight to get the height of the usable area of the browser window.

Read-Write Dimension Attributes

These are read-write attributes available when the position attribute is not set to the default of static.

These attributes can be scripted and can be used inline with HTML. These attributes have string values.
- Position of the specified edge of the object's box relative to the same box edge of the parent positioned object in the document hierarchy. The position style attribute must be set.
  - object.style.left. Distance of the object's left from the left of the next positioned object in the document hierarchy.
  - object.style.top. Distance of the object from the top of the next positioned object in the document hierarchy.
  - object.style.right. Distance of the object's right from the right of the next positioned object in the document hierarchy.
  - object.style.bottom. Distance of the object's bottom the bottom of the next positioned object in the document hierarchy.
- Size of the object (and not the box). Note for IE < 6 or for IE 6+ set to non-standards compliant, then these values included the padding and border.
  - object.style.height. Distance of the object's bottom from the object's top.
  - object.style.width. Distance of the object's right from the object's left.
These attributes are simply variations of the above. The difference is that although they can be scripted, they CANNOT be used inline with with HTML (since they are NOT CSS attributes), and they do NOT have string values.
- These attributes have integer values.
  - Position
    - object.style.pixelLeft.
    - object.style.pixelTop.
    - object.style.pixelRight.
    - object.style.pixelBottom.
  - Size
    - object.style.pixelHeight.
    - object.style.pixelWidth.
- These attributes have floating point values.
  - Position
    - object.style.posLeft.
    - object.style.posTop.
    - object.style.posRight.
    - object.style.posBottom.
  - Size
    - object.style.posHeight.
    - object.style.posWidth.

Read-Only Dimension Attributes

These are read-only attributes that can be scripted but cannot be used inline with HTML (since they are NOT CSS). These attributes are actually properties of the DHTML OM, i.e. the OM applied to Internet Explorer's HTML documents.

"offset" indicates relative to the offsetParent while including scrollbars.
- object.offsetParent. Reference to the positioning parent of the object.
  - Non-compliant IE:
    - For objects without out a specific positioning parent, this is body.
    - For a td, this is tr.
  - Compliant IE:
    - For objects without out a specific positioning parent, this is html.
    - For a td, this is table.
- Position
  - object.offsetLeft. Distance between the left most of an object/box and the left of its parent object.
  - object.offsetTop. Distance between the top most of an object/box and the top of its parent object.
- Size. object + padding + border + scroll bar.
  - object.offsetHeight.
  - object.offsetWidth.
client.
- Position
  - object.clientLeft. Distance between the offsetLeft and the practical left of the object/box (object + padding). This is equal to border-left if there is one.
  - object.clientTop. Distance between the offsetTop and the practical top of the object/box (object + padding). This is equal to border-top if there is one.
- Size. offset - scrollbar = object + padding + border. EG: document.body.clientHeight.
  - object.clientHeight.
  - object.clientWidth.

Here is an image borrowed directly from MSDN. Personally I think it's all screwed up.

Box dimensions from a DHTML perspective

This image, also borrowed from MSDN, clearly shows how the old IE was not CSS compliant before and how IE 6+ (with the !DOCTYPE switch thrown) correctly follows CSS.

Box dimensions in before and after IE 6

Miscellany

Scrolling
- object.style.overflow. Read/Write. CSS for how an object utilizes scroll bars. For compliant IE, this also applies to html. The possible values are:
  - visible. The default. Content is not clipped and no scroll bars are allowed. This usually enlarges the object as needed.
  - scroll. Content can be clipped and scroll bars are always added.
  - hidden. Content can be clipped and no scroll bars are allowed.
  - auto. Content can be clipped and scroll bars are added as needed.
- object.style.overflowX and object.style.overflowY. Read/Write. Just like overflow except that it pertains to a single axis.
- object.scroll. Read/Write. Sets or retrieves how an object utilizes scroll bars. For non-compliant IE, this applied to body. For compliant IE, this applies to body and html. The possible values are:
  - yes (default)
  - no
  - auto
- object.scrollHeight and object.scrollWidth. Read only. The size of the content plus padding, esp. when the content is only partially shown because of scrolling.
- object.scrollLeft and object.scrollTop. Read/Write. Sets or retrieves the distance between the edge of the object and the corresponding shown edge. EG: If a div has scroll bars, and you scroll to the right, then how many pixels has content of the div moved to the left?
Mouse position. Most of these are integers indicating pixels.
- event.offsetX and event.offsetY. Read/Write. Sets or retrieves the coordinate of the mouse pointer's position relative to the object firing the event.
- event.clientX and event.clientY. Read/Write. Sets or retrieves the coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
- event.screenX and event.screenY. Read/Write. Retrieves the coordinate of the mouse pointer's position relative to the user's screen.
- window.screenLeft and window.screenTop. Read only. Retrieves the coordinate of the upper left-hand corner of the browser's client area, relative to the upper left-hand corner of the screen. The client area consists of the browser window, exclusive of the caption bar, the window-sizing border, the menu bar, the toolbars, the scroll bars, and the status bars.
- event.x and event.y. Read/Write. Sets or retrieves the x-coordinate, in pixels, of the mouse pointer's position relative to a relatively positioned parent element.
screen. The screen object provides some nice members.
- screen.height and screen.width. The resolution of the physical screen in pixels.
- screen.availHeight and screen.availWidth. The resolution of the physical screen excluding the MS Windows taskbar.
Miscellany
- object.style.zIndex. Read/Write. Sets or retrieves the stacking order of positioned objects. auto by default. Greater integers mean indicate more on top.

Page Modified: (Hand noted: 2007-08-14 20:27:14Z) (Auto noted: 2007-11-17 06:48:20Z)