By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,447 Members | 1,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,447 IT Pros & Developers. It's quick & easy.

clipping an image

P: n/a
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
Share this Question
Share on Google+
8 Replies


P: n/a
*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

P: n/a
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

P: n/a
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

P: n/a
*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

P: n/a
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

P: n/a
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

P: n/a
*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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.