Section 2.2. About client- and offset- Properties

2.2. About client- and offset- Properties

In Internet Explorer 4, Microsoft introduced a set of size and position properties for elements that render as part of the regular body content (i.e., not positioned via CSS). These properties had the potential to assist scripts in their tasks of determining locations and dimensions of body content so that positioned elements could be moved in relation to these fixed elements. The properties are:

clientHeight

clientLeft

clientTop

clientWidth

offsetHeight

offsetLeft

offsetTop

offsetWidth

The sad news is that between buggy behavior under fairly common circumstances in IE/Windows, and a different philosophy behind their implementation in IE/Mac, these properties can be difficult to work with. Add to this mix the fact that Microsoft tried to mend the errors for IE 6 by altering the playing field when the DOCTYPE element puts the browser into "standards-compliant" mode (and fixing the genuine measurement bugs while in that mode). If that weren't enough, early Mozilla versions implemented some of these non-W3C properties for the convenience of DHTML authors, but in a way that comes closer to the old IE/Windows mode (minus the measurement bugs) than to the IE 6 standards-compliant mode. Confusing? You bet!

The primary measurement discrepancies among browsers and compatibility modes have to do with element padding (if any is applied) and the positioning context for the element (even for nonpositioned elements). The number of permutations of oddities introduced by element and style sheet combinations boggles the mind, so I'll take one example of a common taskusing a script to place the content of a CSS-positioned element directly atop the content of an inline elementto demonstrate the range of possible problem areas with a variety of browsers and compatibility modes. Because the properties described in this section are not part of the W3C DOM (as of Level 2), it is difficult to say which approach is "correct." It's more a question of how to use these properties to accomplish your desired tasks on your target browsers.

For this scenario, the following tag was inserted into an arbitrary place within a document so that its precise location would vary with browser, window size, and other environmental conditions:

 <img  src="/books/2/570/1/html/2/bkgnd.jpg" alt="Locator box" height="90"      width="120" style="padding:2px; border:3px solid green; margin:5px"> 

I use an image here because its content is the same size regardless of browser, and will let us see how the various size properties report the element's overall or content size (i.e., we're not at the mercy of font rendering vaguaries). Including padding, border, and margin settings for this fixed element will illustrate that some of these style attributes can impact topographical information about the element in the document. Table 2-1 shows the values for relevant size and position properties for several browsers and compatibility modes.

Table 2-1. Comparative property values (pixels) for a 120-by-90 pixel inline element

Property name	IE 7 (Quirks mode)	IE 7 (CSS mode)	FF 1.5 (CSS mode)	Saf 2	Op 9 (CSS mode)
clientLeft	3	3	n/a	n/a	3
clientTop	3	3	n/a	n/a	3
offsetLeft	15	5	13	5	13
offsetTop	243	228	251	215	229
clientWidth	120	124	124	124	124
clientHeight	90	94	94	94	94
offsetWidth	126	130	130	130	130
offsetHeight	96	100	100	100	100
naturalWidth	n/a	n/a	120	n/a	n/a
naturalHeight	n/a	n/a	90	n/a	n/a
width	120	124	120	120	120
height	90	94	90	90	90
offsetParent.clientLeft	2	0	n/a	n/a	0
offsetParent.clientTop	2	0	n/a	n/a	0
offsetParent.offsetLeft	0	10	0	8	0
offsetParent.offsetTop	0	15	0	8	0

Table 2-1 reveals a great deal about how various browsers report the location and size of an inline element. Some of the precise numbers, such as the location coordinates, are not critical measures because each browser renders surrounding content slightly differently, and any scripts that rely on the position will read the live values in each case. But several very important details are worth noting for this particular element insertion:

• IE 6 and 7 in backward-compatible ("quirks") mode calculates the heights and widths the same as IE for Windows all the way back to Version 4. This is good for backward compatibility.

• In IE 6 and 7 in quirks mode, the offset sizes include the border thicknesses on both sides of the content.

• In standards mode, IE 6 and 7 calculate the offsetLeft and offsetTop properties in relation to the offsetParent element; the offsetParent element has its own offset values. The actual position must take into account the offsetParent's offset values.

• In standards mode, IE 6 and 7 report width and height properties influenced by the padding thickness. This is wrong, because these properties should reflect the height and width attribute values of the element (even getAttribute( ) returns the incorrect values).

• IE 6 and 7 in standards mode, Mozilla, Safari, and Opera report identical offsetWidth and offsetHeight values, all of which include the padding and border thicknesses, but not the margins.

The main point to understand here is that when you attempt to mix absolute-positioned elements with elements rendered as part of the main document, the client and offset properties of the fixed items can be both helpful and tricky, depending on the level of standards compatibility dictated by your DOCTYPE, and whether the elements have borders, margins, and padding associated with them. In standards-compatible mode, you will likely have to take offsetParent coordinates of fixed elements into account. Almost any task is possible, but it may require much trial, error, and cross-browser testing to achieve the desired results with your combination of elements. Don't be surprised if a complex element design and precision positioning task across the domains of fixed elements, positioned elements, and event coordinates takes hard work to accomplish.