<html>
<link rel="stylesheet" href="josh.css">
<body bgcolor="#FFFFFF">
		<div id="Description">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">display</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">4</span> IE <span class="emphasis">4</span> CSS <span class="emphasis">1</span></td>
				</tr>
				<tr>
					<td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">Inherited: No</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description"><p>This is a multipurpose attribute that determines how a browser treats
invisible boxes that surround every element and text node. For
example, a block-level item exhibits specific characteristics that
are quite distinct from an inline item (at least with respect to how
the element renders in relation to surrounding content). The CSS
specification provides numerous types of such boxes, because the
space they occupy can be influenced differently by such things as
borders or even outright rendering rules (e.g., the way a compact
style controls definition list items). In practice, you may not see
much, if any, difference between some display types because the
browser's built-in style sheet
doesn't specify anything different for the
variations (e.g., a <span class="literal">table</span> element may render the
same way if its <span class="literal">display</span> style attribute is set to
<span class="literal">block</span> or <span class="literal">table</span>). At the same
time, the <span class="literal">display</span> style lets you override the
default rendering behavior of elements, such as making a block table
render as an inline table.
</p><p>Perhaps the most frequently used aspect of the
<span class="literal">display</span> style attribute in DHTML is setting the
scripts to toggle between showing and completely hiding the element
and its space. When the attribute is set to <span class="literal">none</span>,
the element is hidden from view, and all surrounding content cinches
up to occupy whatever space the element would normally occupy. This
is different from the <span class="literal">visibility</span> attribute, which
reserves space for the element while hiding it from view. But to
redisplay the item to its default display mode, you can assign one of
the common display types (<span class="literal">block</span> and
<span class="literal">inline</span>) or the more specific type associated with
the element (such as <span class="literal">list-item</span> for an
<span class="literal">li</span> element), if supported by your target browsers.
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="csssyntax"><span class="title">CSS Syntax</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>display: <span class="replaceable">displayType</span></pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="value"><span class="title">Value</span></td>
				</tr>
				<tr>
					<td><p>The CSS specification identifies many display types, but browser
support is more limited. The following table shows the supported
types.
</p>
						<table border="1"><tbody><tr><th>Display type</th><th>IE/Windows</th><th>IE/Mac</th><th>NN</th><th>CSS</th></tr>
								<tr><td><span class="literal">block</span></td><td>5</td><td>4</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">compact</span></td><td>n/a</td><td>n/a</td><td>n/a</td><td>2</td>
								</tr>
								<tr><td><span class="literal">inline</span></td><td>5</td><td>4</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">inline-block</span></td><td>5.5</td><td>n/a</td><td>n/a</td><td>n/a</td>
								</tr>
								<tr><td><span class="literal">inline-table</span></td><td>n/a</td><td>5</td><td>n/a</td><td>2</td>
								</tr>
								<tr><td><span class="literal">list-item</span></td><td>5</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">marker</span></td><td>n/a</td><td>n/a</td><td>n/a</td><td>2</td>
								</tr>
								<tr><td><span class="literal">none</span></td><td>4</td><td>4</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">run-in</span></td><td>n/a</td><td>5</td><td>n/a</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table</span></td><td>n/a</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-caption</span></td><td>n/a</td><td>5</td><td>n/a</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-cell</span></td><td>n/a</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-column-group</span></td><td>n/a</td><td>5</td><td>n/a</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-footer-group</span></td><td>5.5</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-header-group</span></td><td>5</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-row</span></td><td>n/a</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-row-group</span></td><td>n/a</td><td>5</td><td>6</td><td>2</td>
								</tr>
							</tbody></table>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="initvalue"><span class="title">Initial Value</span></td>
				</tr>
				<tr>
					<td><p>Element-dependent.</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="example"><span class="title">Example</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>.hidden {display: none}</pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="appliesto"><span class="title">Applies To</span></td>
				</tr>
				<tr>
					<td><p>All elements (but some display types are applicable to specific
elements).
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="objectmodelreference"><span class="title">Object Model Reference</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>[window.]document.getElementById("<span class="replaceable">elementID</span>").style.display</pre>
						</span></td>
				</tr>
			</table>
		</div>
</body>
</html>