Export (0) Print
Expand All

Controlling Presentation with Measurement and Location Properties in Strict Mode

Dynamic HTML (DHTML) exposes measurement and location properties that can be used to change the size and position of HTML elements on your web pages. An understanding of these properties and their impact on the elements in a page can help you achieve greater control over the layout of your websites. This article explains how you can use measurement and location properties to control the appearance of a web page that is rendered using the Windows Internet Explorer 7 strict mode.

Note  The descriptions and examples on this page are presented using the Internet Explorer 7 strict mode. The examples on this page require Internet Explorer 7. The strict !DOCTYPE must be added to activate a standards-compliant rendering mode.

Information regarding the layout and positioning properties in the compatible rendering mode, also called quirks mode, can be found in Controlling Presentation with Measurement and Location Properties In Quirks Mode.

Requirements

This documentation assumes that you are familiar with a client-side scripting language, such as Microsoft JScript or Microsoft Visual Basic Scripting Edition (VBScript). You should also be familiar with the DHTML Document Object Model (DOM) and Cascading Style Sheets (CSS).

Strict Versus Quirks Mode

Microsoft Internet Explorer 6 and later versions support two page-rendering modes: quirks mode and strict mode. The default mode, called quirks mode, emphasizes compatibility and displays web pages as they were displayed in earlier versions of the browser. The legacy engine is loosely based on the World Wide Web Consortium (W3C) Cascading Style Sheets, Level 1 (CSS1) recommendation.

Windows Internet Explorer also supports strict mode, which emphasizes standards compliance over compatibility. While pages might display differently in earlier versions of Internet Explorer, CSS-based designs are displayed more consistently between recent versions of most web browsers, including Internet Explorer 7. Strict mode is activated when a standards compliant !DOCTYPE directive is defined prior to the html element of a page.

This document describes layout properties that exist in strict mode.

Layout Fundamentals

Measurement and location properties are available through the DHTML Document Object Model (DOM) and as CSS attributes. You can use DHTML DOM properties to programmatically set CSS attributes. Properties exposed through the DHTML DOM return values based on how an element renders in the document. CSS attributes return values based on the preset values of other CSS attributes.

All CSS properties are exposed through the style and the runtimeStyle objects. You can use the currentStyle object to query the current value of a property.

The Element Rectangle

Every visible element on a Web page occupies an absolute amount of space in the document. The amount of space occupied by an element is defined by the element rectangle, or content box. There is a strong distinction between the way the element rectangle is handled in strict mode compared to quirks mode.

In quirks mode, the height and width of an element rectangle includes the sum of the height, the width, padding, and border. In strict mode, the content box is defined by the height and width properties only; without the addition of padding or border.

Block Versus Inline Elements

All visible HTML Elements are either displayed in blocks or inline. A block element, such as a div, typically starts a new line and is sized according to the width of the parent container. An inline element, such as a span, typically does not start a new line and is sized according to the height and width of its own content.

Size, Layout, and Location of Elements

An element has layout when one of the following conditions is true:

  • It is a block-level element with a specified height and width.
  • It is a block-level element with overflow parameters that are not set as visible.

A positioned element has specific measurements and can be set to a location using the CSS layout attributes: top, right, left, bottom. The location of a non-positioned element is relative to its nearest ancestor with layout (offsetParent). Location is useful when moving one or more elements to relative or absolute coordinates within the document. It can also be useful for creating specific document styles.

Measurement Fundamentals

Height and width are the measurements used most frequently. Use the offsetHeight and offsetWidth properties to retrieve these measurements from any rendered inline or block element. To set these measurements, use the height and width attributes (or related properties). For a CSS measurement attribute to be useful, you must set the attribute's value before retrieving it.

Inline elements gain layout when the height or width is set. Inline elements with layout expose the same layout properties, such as border, margin, and padding, as block elements.

Absolute and Relative Length Units

When setting or retrieving an element's measurement and location values, you can use different length units to achieve a particular style. Using length units consistently simplifies measurement and location values. The mixing of length units requires you to determine the value of an absolute length unit programmatically, based on a relative unit for every system. For example, you would have to convert inches to pixels on every machine that renders your document.

In strict mode, layout properties contribute to the visual attributes of an element but do not directly reflect the dimensions of the content box. Since margin, border, and padding no longer share a part in the overall size of a content box, the contents of an element can be specifically expressed by defining its height and or width. This is dramatically different from the space assessment in quirks mode; where border and padding must be subtracted from the content box in order to suggest its width.

Location Fundamentals

The portion of Internet Explorer that displays the document is called by many names from different sources, including the initial containment block, root level, client area, viewport, and content area. This document uses the term "content area." Beginning in the upper-left corner with x and y coordinates set at 0, the content area has no inherent margin or padding. The HTML element is the first container in the document and is relative to the content area.

The distance between the element and its positioned or offsetParent defines the element location. Internet Explorer exposes the element location when a document renders or when a change to the content forces a document to redraw. Understanding how elements are located within the document is key to determining and changing the location of an element.

The general layout of elements is primarily based on document flow. Document flow is analogous to the writingMode attribute. In Western languages, flow indicates the layout of content from left to right, top to bottom. Inline and block elements that do not have absolute or fixed positioning flow in this manner by default; unless otherwise specified. Elements having absolute or fixed positioning render outside of the document flow. The document flow is the order of the elements after their measurements are calculated. Changing the measurements or location of positioned elements does not affect adjacent elements in the document flow, but it might affect child elements.

Non-positioned inline and block elements render together and are part of the document flow. An element's location can change when the measurement of another element appearing earlier in the document flow changes. The measurement of an element changes when the content, layout, or font style of another element is updated after the document renders. Changing the measurements of a non-positioned element alters the location of adjacent elements in the document flow.

Top and Left Locations

The following example shows how to retrieve the location of an inline element and how the measurement of another element affects the location of that inline element.



<head>
<script>
function getLocation(){
   alert("Left: " + oSpan.offsetLeft);
   oSpan1.innerHTML="Changed content.";
   alert("Left: " + oSpan.offsetLeft);
   oSpan1.innerHTML="This is some dynamic content.";
}
</script>
</head>
<body>
<span id="oSpan1">This is some dynamic content.</span>
<span style="background-color:#CFCFCF;" id="oSpan">
This content won't change, but this element's location will change.
</span>
<input type="button" VALUE="Locate Second Element" onclick="getLocation()">
</body>


Offset Parents

Although you can retrieve the top or left location of any element that renders, the values of these locations are relative to the positioned or offsetParent. The offsetParent property retrieves a reference to the container object that defines the offsetLeft and offsetTop properties for the element. The offset properties return values in pixels relative to the parent. You cannot always rely on a single value when determining the distance between two elements.

The following image depicts the offsetLeft values of a span element and a table element. The offset value for both elements is 50 pixels. However, if you query the offset value of a table cell, the offsetLeft property returns only 3 pixels, because table is the offsetParent of the td element (Cell 1). To determine the distance from the table cell to the edge of the screen, add the two values together.

Offset left values of a span element and a table element

Special Cases

Certain elements, such as the table element, expose their own object model and a specific set of properties, such as the cellPadding property and the cellSpacing property. From the currentStyle object, you can retrieve the current value of the cellPadding property through the padding property. You must retrieve the cellSpacing property directly from the table element.

Nested Elements

Determining the distance between any nested element and its offsetParent, such as the BODY element, might require you to include the location of the offsetParent. For example, the top and left locations of a td element return the distance between the cell and the offsetParent, which is the table element. To determine the distance between a nested element and the BODY element, you must walk up the document hierarchy and add the left location values of all the offsetParents between the two elements.

Positioned Elements

The measurements of an element with absolute or fixed positioning are defined only by a specified height or width. This is not true for block or inline elements where the size of the content plays a more active role in their dimensions. As such, a relatively positioned element will retain its block or inline measurements, unless otherwise specified.

In earlier versions, Windows Internet Explorer automatically resized elements to accommodate content, regardless of the assigned dimensions. The Internet Explorer 7 strict mode accepts specified height and width properties. Given the implications of this change, it is important to consider content overflow. If left undefined, excess content may spill out of its content box. You can learn more about regulating overflowing data from the overflow reference page.

The following example shows that the measurements of a block element and an inline element are the same when the position attribute is set to absolute.


<div style="background-color:#CFCFCF; position:relative; top:10px;">
   Text
</div>
<span style="background-color:#CFCFCF; position:absolute; top:30px;">
   Text
</span>

You can use the same procedure to set or retrieve the measurements of positioned elements and non-positioned elements.

How to Use Measurement and Location Properties

Measurement and location values do not have to be static integers. They can be scripted values based on distances and dimensions of other elements, expressed lengths (as in more traditional media), equations, or percentages. When working with several elements, you can use the measurement of one element to set the location of another.

You can use the measurement and location properties discussed in this overview to construct more complex elements. For example, to center an element within its container, set the left coordinate to the sum of one-half the width of its container minus one-half the width of the element. The syntax is demonstrated in the following example.



<script>
function center(oNode){
   var oParent=oNode.parentElement;
   oNode.style.left=oParent.offsetWidth/2 - oNode.offsetWidth/2;
}
</script>
<div
   id="oDiv"
   onclick="center(this)"
   style="position:absolute;">
   Click Here To Center
</div>

Expressions are formula-derived values. You can use expressions to continually update property values. In the preceding example, the element is centered once, but does not remain centered if the browser window is resized. To preserve a particular layout, use a formula instead of a static value.

Use the setExpression method to add expressions to CSS attributes and DHTML properties. The following example shows how to center an element using an expression instead of a static value.



<script>
function center(oNode){
   oNode.style.setExpression("left","getCenter(this)");
}
function getCenter(oNode){
   var oParent=oNode.parentElement;
   return (oParent.offsetWidth/2 - oNode.offsetWidth/2);
}
</script>
<div
   id="oDiv"
   onclick="center(this)"
   style="position:absolute;">
   Click Here To Center
</div>

While the DHTML DOM provides an easy way to obtain the current dimensions and location of an element, you should use CSS to set these values in most cases. Except for elements that expose height and width properties, such as img and table, you can use various CSS attributes to set the size of an element. While many properties return values in pixels, you can use some CSS properties with specific length units, such as inches or centimeters.

For example, if an h1 element has top and left positions of 2 inches, the offsetTop and offsetLeft properties return approximately 190 pixels, depending on the screen resolution. Since the top and left properties return a string value of 1in, you can use the posTop and posLeft properties to increment or decrement the location in inches instead of pixels. The posTop and posLeft properties use the same length units as their counterpart CSS properties, top and left.

The following example moves the h1 element 1 inch down and 1 inch to the right, every time the user clicks the element.



<script>
function moveMe(){
   // Move the object by one inch in each direction.
   oHeader.style.posLeft+=1;
   oHeader.style.posTop+=1;
}
</script>
<h1 id="oHeader"
   style="position:absolute; top:1in; left:1in;"
   onclick="moveMe()">
   Header
</h1>

When moving elements to specific locations in a document, it is sometimes necessary to account for the different properties of the box element. Moving one element to the visible corner of another element is relatively easy using the offset properties and techniques described in the preceding example. You can also use a TextRectangle to establish a location.

The following example shows three different ways to position an element within the content of another element. First, CSS pixel, border, and padding properties are used to move an element to the content within a positioned element. Next, DHTML offset and client properties are used to move an element within the content of a positioned element. Finally, a TextRectangle is used to establish the position of the element.



<script>
function fnMove1(){
   // Method 1: Use only CSS properties
   var iTop1=oDiv.style.pixelTop +
      parseInt(oDiv.style.borderTopWidth) + 
      parseInt(oDiv.style.paddingTop);
   var iLeft1=oDiv.style.pixelLeft + 
      parseInt(oDiv.style.borderLeftWidth) + 
      parseInt(oDiv.style.paddingLeft);
   oMarker.style.top=iTop1;
   oMarker.style.left=iLeft1;
}
function fnMove2(){
   // Method 2: Use DHTML properties.
   var iTop2=oDiv.offsetTop + oDiv.clientTop;
   var iLeft2=oDiv.offsetLeft + oDiv.clientLeft;
   oMarker.style.top=iTop2;
   oMarker.style.left=iLeft2;
}
function fnMove3(){
   // Method 3: Use DHTML, CSS, and a TextRectangle.
   var aRects=oDiv.getClientRects();
   var oRect=aRects[0];
   var oBnd=oDiv.getBoundingClientRect();
   oMarker.style.top=oBnd.top + 
      parseInt(oDiv.style.paddingTop) + 
      parseInt(oDiv.style.borderTop);
   oMarker.style.left=oBnd.left + 
      parseInt(oDiv.style.paddingLeft) + 
      parseInt(oDiv.style.borderLeft);;   
}
</script>


<div id="oDiv"
   style="position:absolute; top:150px; left:50px; border:10px outset; 
      padding:10px; width:250px; height:250px; background-color:#EFEFEF;">

Move marker here.
</div>


<span id="oMarker"
   style="top:200px; left:200px; position:absolute;
      border: 2px outset; background-color:#CFCFCF;">
      
Marker
</span>


<input type="button" value="CSS" onclick="fnMove1()">
<input type="button" value="DHTML" onclick="fnMove2()">
<input type="button" value="TextRectangle" onclick="fnMove3()">


Internet Explorer 7 provides a new way to preserve layout, by using percentages to regulate element dimensions. The following example depicts a conventional layout that is made extensible by the use of percentages and braced with the aid of fixed positioning.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
 <html><head><title>Fixed Positioning Example</title><style type="text/css">     
    body{height=640px; width=480px;} 
      #logoBar  {position:fixed;width:99.15%;height:15%;top:0;right:0;bottom:auto;left:0;border:solid;}
      #leftSide {position:fixed;width:10em;height:auto;top:15%;right:auto;bottom:50px;left:0;border:solid}
      #main     {position:fixed;width:auto;height:auto;top:15%;right:0;bottom:50px;left:10em;border:solid}
      #footer   {position:fixed;width:99.15%;height:50px;top:auto;right:0;bottom:0;left:0;border:solid;} 
    </style></head><body>
    <div id="logoBar">...logobar...</div>
    <div id="leftSide">...leftside...</div>
    <div id="main">...main...</div>
    <div id="footer">...footer...</div> 
    </body></html>

Click to view sample.

Using percentages enables the elements to be actively resized depending on the dimensions of the content area. In the preceding example, the fixed positioning attributes keep their relative positions intact. By including percentages in your page layout, you reduce the need to express nested elements as programmatic scripts.

Advanced Techniques

You can use DHTML expressions and the runtimeStyle and currentStyle objects to create more advanced measurement and location formulas. Expressions use formulas to return a possible value for any DHTML or CSS read/write property. To query the current value of a property, use the currentStyle object instead of the style object. To temporarily set a property value, use the runtimeStyle object instead of the style object. When a property value is cleared from the runtimeStyle object, the value reverts to the original property value set on the style object.

Expressions, DHTML, and CSS provide a robust model for delivering information to your audience. The following example uses these technologies to animate a list when the document loads. The marginLeft attribute includes an expression that returns a value based on a variable.

After the document loads, the setInterval method is called to increment the variable until it reaches a target value. The amount is determined by the marginLeft property of a particular list item's sibling, available from the previousSibling property. When the variable increments, the recalc method is called with the true parameter, because the marginLeft attribute is not implicitly dependent on the variable. Adding the marginLeft value of the sibling list item causes the entire list to cascade.



<style>
li {margin: expression(fnTabIt(this));}
</style>
<script>
window.onload=fnInit;
// Starting marginLeft increment.
var iDML=0;
// Target marginLeft increment.
var iDMLTarg=30;
// Increment modifier.
var iDMLMod=.25;
// Animation speed in milliseconds.
var iDMLSpeed=50;
var oInterval;
function fnTabIt(oNode){
   var oPSib=oNode.previousSibling;
   if(oPSib!=null){
      var iML=0;
      if(oPSib.style.marginLeft!=""){
         iML=parseInt(oPSib.style.marginLeft);
      }
      return ((iDML*iDMLMod) + iML);
   }
   else{
      return 0;
   }
}
function fnAdjustTab(){
   if(iDML<iDMLTarg){
      iDML++;
      document.recalc(true);
   }
   else{
      iDML=iDMLTarg;
      window.clearInterval(oInterval);
   }
}
function fnInit(){
   oInterval=window.setInterval("fnAdjustTab()",iDMLSpeed);      
}
</script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>

Click the following Show Me button for an interactive demonstration of the measurement and location properties. When you select a pair of properties, the dimensions and distances are displayed using indicators created with the same techniques discussed in this overview.

Click to view sample.

Related topics

About Dynamic Properties
About Element Positioning
About the DHTML Object Model
About the W3C Document Object Model
CSS Attributes: Index
CSS Overviews and Tutorials
Controlling Presentation with Measurement and Location Properties In Quirks Mode
DHTML Reference
hasLayout

 

 

Show:
© 2014 Microsoft