Rafael Holt wrote:
> Hi all,
>
> I've been playing with clip recently and it seems to me the spec is a bit
> counter-intuitive. It is particularly irritating if you are clipping
> non-fixed width elements because if you don't want it to be clipped on
> the
> right, you have to specify its width for that value. Surely it would
> be more
> logical for each value to represent how much is clipped from that edge of
> the rectangle? For example:
>
> clip:rect(10px 100px 80px 20px);
>
> If the element to be clipped is 100px x 80px, this will cause it to be
> clipped to an area 70px x 80px, where it is clipped 10px at the top
> and 20px
> on the left. This is fine, but why should it be necessary to specify
> 100px
> for the right and 80px for the bottom? It seems to me it would be more
> sensible for these values to be 0 to achieve this effect. It's easier
> to get
> your head around.
>
> Also, why is it that it applies only to absolutely positioned
> elements? Why
> not relatively positioned ones?
>
> Cheers,
> Rafael
>
Hi Raphael,
According to the css2.1 specs
<http://www.w3.org/TR/CSS21/visufx.html#propdef-clip>
... a clipped element is *not* removing certain parts of the element by
shrinking the margins, but is a porthole to a *defined area* of the
element (mostly: image) which has to be shown. It is a bit confusing
because it is a completely other way of thinking! :-)
* See examples over here
<http://home.tiscali.nl/developerscorner/imaging/clipping-images-with-css-a.htm>
I guess it is done this way because of if shrinking of a margin is
needed, it can be done by placing the element in a container of a given
width and height (determining the visual area) and a given negative
margin-top and margin-left to shift the inside image to the right place.
- This can be done with relative positioned containers too.For IE I
think it will be needed to set the overflow to hidden, because of the IE
exaggerating habits.
Second way to accomplish the same, is to put the img as background image
in a container (giving the needed area), with background positioning to
get it in place.
Third way could be to make an iframe, and put the (shifted) image in a
separate html file.
And maybe the easiest way: make a new image just in the right
proportions by cutting what is not needed. ;-)
The absolute positioning will be a condition to define the starting
point (0,0) from which the area is computed. Maybe a surrounding
container with relative position can help to place the clipped thing on
the right place in the layout.
If in a clipped element there is no clip wanted in a certain direction,
the specs say a value of "auto" can be used (not: zero).
To make a clipped element in relative units, I discovered that this is
not cross browser consistent. IE doesn't recognize a % unit (showing the
complete image). If you do it with em's, the position is shifting (and
the area is getting bigger or smaller)(try for the effect!) in IE and
FF. On the contrary, Opera has it's own zoom mechanism, and does show no
shift and no enlarged or smaller area, but just a scaled image inclusive
the scaled clipped area.
And notice that IE(6) doesn't react on the "modern" way of writing:
rect(50px, 300px, 350px, 100px)
only on:
rect(50px 300px 350px 100px)
while the specs say that both ways are allowed.
Greetings,
francky
PS:
If you have a more specific question, we can see what we can do.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
