Dynamic HTML: The Definitive Reference

Name

clip — NN 4 IE 4 CSS 2

Synopsis

Inherited: No

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 DIV element whose clip attribute is set to the desired region. Clipping may not work properly in Internet Explorer 4 for the Macintosh. 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.

CSS Syntax

clip: rect(lengthTop 
                     lengthRight 
                     lengthBottom 
                     lengthLeft) | auto

JavaScript Equivalent

clip.bottom
clip.left
clip.right
clip.top

Value

Extending to CSS2, the only shape recognized for the clip attribute is rect. Other shapes may be admitted in the future.

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 auto sets the clipping region to the block that contains the content. In Navigator, this block cinches up to the width and height of the available content; in Internet Explorer, the width may extend to the width of the next outermost container (such as the BODY element).

Initial Value

auto

Example

<SPAN STYLE="position: absolute; clip: rect(10px 110px 80px 10px)">
<IMG SRC="desk1.gif" HEIGHT=90 WIDTH=120>
</SPAN>

Applies To

Any element with ...