clipping an image

Jeff Thies

I'm having trouble clipping an image. My understanding is that this is all
I should need:

<img src="test_img.jpg" style="clip: rect(10px 10px 10px 10px)" alt="alt">

Although I've seen this as a comma seperated list.

This has no effect whatesoever. What am I doing wrong?

Jeff

Jul 20 '05 #1

Christoph Paeper

*Jeff Thies* <no****@nospam.net>:

<img src="test_img.jpg" style="clip: rect(10px 10px 10px 10px)" alt="alt">

| The 'clip' property applies to elements that have a 'overflow' property
| with a value other than 'visible'.

| 'overflow'
| Value: visible | hidden | scroll | auto | inherit
| Initial: visible

Did you observe that?

P.S.: Inline styles are evil.

--
"Some people say I am a terrible person,
I'm not, I have the heart of a young boy,
in a jar, on my desk."
Stephen King

Jul 20 '05 #2

Jukka K. Korpela

Christoph Paeper <cr***********@gmx.net> wrote:

*Jeff Thies* <no****@nospam.net>:

<img src="test_img.jpg" style="clip: rect(10px 10px 10px 10px)"
alt="alt">

| The 'clip' property applies to elements that have a 'overflow' property
| with a value other than 'visible'.

That's what the CSS 2 specification says, but what the CSS 2.1 draft says,
and what IE 6 has implemented, is this:
"The 'clip' property applies only to absolutely positioned elements."
http://www.w3.org/TR/CSS21/visufx.html#propdef-clip

If you add position:absolute, and maybe some coordinates, you will notice
that the image disappears in a puff of magic. The reason is the odd way in
which the arguments of rect(...) are interpreted: top, right, bottom, left
(the normal CSS order), but so that
- top and bottom are both expressed as displacements from the top of the
element
- right and left are both expressed as displacements from the left of the
element.
To add to the confusion, the CSS 2.1 draft says that "Authors should
separate offset values with commas", but the CSS 2 specification says that
spaces are to be used, and this is what IE expects.

So if you try e.g.
style="position: absolute; clip: rect(10px 50px 50px 10px)"
you should see a clipped image, on supporting browsers.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Jul 20 '05 #3

Stephen Poley

On Wed, 29 Oct 2003 14:35:01 +0100, Christoph Paeper
<cr***********@gmx.net> wrote:

P.S.: Inline styles are evil.

Why?

"Not often appropriate", I'd grant you, but evil?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Jul 20 '05 #4

Christoph Paeper

*Stephen Poley* <sb*****@xs4all.nl>:

On Wed, 29 Oct 2003 14:35:01 +0100, Christoph Paeper

P.S.: Inline styles are evil.

"Not often appropriate", I'd grant you, but evil?

Show me _one_ valid use case that isn't quick'n'dirty CSS testing.

One practical con is that Opera keeps inline styles even in user mode.
Although that is (or was?) a browser bug, it's one more reason not to use
the 'style' attribute.

--
Useless Fact #12:
The national anthem of Greece has 158 verses. No one in Greece has memorized all
158 verses.

Jul 20 '05 #5

Spartanicus

Christoph Paeper wrote:

One practical con is that Opera keeps inline styles even in user mode.
Although that is (or was?) a browser bug

Was, it no longer does that in recent versions.

--
Spartanicus

Jul 20 '05 #6

Stephen Poley

On Fri, 31 Oct 2003 01:47:33 +0100, Christoph Paeper
<cr***********@gmx.net> wrote:

*Stephen Poley* <sb*****@xs4all.nl>:

On Wed, 29 Oct 2003 14:35:01 +0100, Christoph Paeper

P.S.: Inline styles are evil.
"Not often appropriate", I'd grant you, but evil?

Show me _one_ valid use case that isn't quick'n'dirty CSS testing.

Any style which is appropriate to one particular place on one particular
page. For example where an em of bottom margin on one particular element
makes the page look more attractive, and which you don't want to
disappear because someone was adjusting the layout of another page. Or a
page discussing colour combinations, which gives a few examples.

Obviously one could define classes special_case_1, special_case_2 etc
(or whatever name you want) in a central stylesheet, but that only seems
to make maintenance slightly harder.

One practical con is that Opera keeps inline styles even in user mode.
Although that is (or was?) a browser bug, it's one more reason not to use
the 'style' attribute.

That hardly qualifies as a justification for describing inline styles as
evil though, does it? On the same basis child selectors are evil (and
everything else that IE doesn't support).

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Jul 20 '05 #7

Christoph Paeper

*Stephen Poley* <sb*****@xs4all.nl>:

On Fri, 31 Oct 2003 01:47:33 +0100, Christoph Paeper

*Stephen Poley* <sb*****@xs4all.nl>:

On Wed, 29 Oct 2003 14:35:01 +0100, Christoph Paeper

P.S.: Inline styles are evil.

"Not often appropriate", I'd grant you, but evil?

Now the educational worth of my initial comment is diminishing due to this
discussion. :(
"Evil" may be exaggregating, but "considered harmful" is considered harmful
and "I don't like them" very subjective.
Show me _one_ valid use case that isn't quick'n'dirty CSS testing.
Any style which is appropriate to one particular place on one particular
page.

That's a *very* rare case that many authors won't encounter ever.
Of course the 'id' attribute could always be used instead and not
necessarily in an external file, but inside (one of) the page's 'style'
element(s). Note that the 'style' attribute is not media dependable -- I
believe there's a draft which allows for this and pseudo-classes, but isn't
implemented anywhere.
For example where an em of bottom margin on one particular element
makes the page look more attractive,
Sorry, I can't think of such a situation that couldn't be formulated better
with a more general rule in a CSS file or the 'style' element. Maybe there's
one and my fantasy is just not good enough.
Or a page discussing colour combinations, which gives a few examples.

That's actually the only place I use it myself. Thinking of it, 'id'
attributes would have been better on that pages, too.

--
"We know it's summer when the rain's a wee bit warmer."
cab driver in Glasgow

Jul 20 '05 #8

Stephen Poley

On Mon, 3 Nov 2003 12:38:16 +0100, Christoph Paeper
<cr***********@gmx.net> wrote:

*Stephen Poley* <sb*****@xs4all.nl>:

On Fri, 31 Oct 2003 01:47:33 +0100, Christoph Paeper

*Stephen Poley* <sb*****@xs4all.nl>:
On Wed, 29 Oct 2003 14:35:01 +0100, Christoph Paeper

> P.S.: Inline styles are evil.

"Not often appropriate", I'd grant you, but evil?

Now the educational worth of my initial comment is diminishing due to this
discussion. :(
"Evil" may be exaggregating, but "considered harmful" is considered harmful

OK
and "I don't like them" very subjective.

Ah, but probably true nonetheless. ;-) I think I'll stick to
"not often appropriate".

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Jul 20 '05 #9