<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">clip</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">4</span> IE <span class="emphasis">4</span> CSS <span class="emphasis">2</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>Defines a clipping region of a positionable element. The clipping
region is the area of the element layer in which content is visible.
For the best results in clipping content, wrap the content-holding
element inside a <span class="literal">div</span> element with its
<span class="literal">clip</span> attribute set to the desired region. Clipping
may not work properly in Internet Explorer 4 for the Macintosh, but
it is fine in Version 5. Also, when a clipped element is displayed at
the very bottom of a page in Navigator 4, the browser window may not
allow you to scroll to view the very bottom of the clipping region.
</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>clip: rect(<span class="replaceable">lengthTop</span> <span class="replaceable">lengthRight</span> <span class="replaceable">lengthBottom</span> <span class="replaceable">lengthLeft</span>) | auto</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>Extending to CSS2, the only shape recognized for the clip attribute
is <span class="literal">rect</span>. Other shapes may be admitted in the
future.
</p><p>When specifying lengths for each side of the clipping rectangle,
observe the clockwise order of values: top, right, bottom, left. See
the discussion about length values at the beginning of this chapter.
A value of <span class="literal">auto</span> sets the clipping region to the
block that contains the content (a block that may extend in IE 4 to
the width of the next outermost container, like the
<span class="literal">body</span> element).
</p>
					</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><span class="literal">auto</span></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>&lt;span style="position: absolute; clip: rect(10px 110px 80px 10px)"&gt;
&lt;img src="desk1.gif" height="90" width="120"&gt;
&lt;/span&gt;</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>Block-level, replaced, and positioned 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.clip</pre>
						</span></td>
				</tr>
			</table>
		</div>
</body>
</html>