HighDots Forums  

clipping an image

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss clipping an image in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Jeff Thies
 
Posts: n/a

Default clipping an image - 10-28-2003 , 10:39 PM






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



Reply With Quote
  #2  
Old   
Christoph Paeper
 
Posts: n/a

Default Re: clipping an image - 10-29-2003 , 07:35 AM






*Jeff Thies* <nospam (AT) nospam (DOT) net>:
Quote:
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


Reply With Quote
  #3  
Old   
Jukka K. Korpela
 
Posts: n/a

Default Re: clipping an image - 10-29-2003 , 06:27 PM



Christoph Paeper <crissov2003Q4 (AT) gmx (DOT) net> wrote:

Quote:
*Jeff Thies* <nospam (AT) nospam (DOT) 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/


Reply With Quote
  #4  
Old   
Stephen Poley
 
Posts: n/a

Default Re: clipping an image - 10-30-2003 , 03:54 AM



On Wed, 29 Oct 2003 14:35:01 +0100, Christoph Paeper
<crissov2003Q4 (AT) gmx (DOT) net> wrote:

Quote:
P.S.: Inline styles are evil.
Why?

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

--
Stephen Poley

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


Reply With Quote
  #5  
Old   
Christoph Paeper
 
Posts: n/a

Default Re: clipping an image - 10-30-2003 , 06:47 PM



*Stephen Poley* <sbpoley (AT) xs4all (DOT) nl>:
Quote:
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.


Reply With Quote
  #6  
Old   
Spartanicus
 
Posts: n/a

Default Re: clipping an image - 11-01-2003 , 11:36 AM



Christoph Paeper wrote:

Quote:
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


Reply With Quote
  #7  
Old   
Stephen Poley
 
Posts: n/a

Default Re: clipping an image - 11-03-2003 , 03:21 AM



On Fri, 31 Oct 2003 01:47:33 +0100, Christoph Paeper
<crissov2003Q4 (AT) gmx (DOT) net> wrote:

Quote:
*Stephen Poley* <sbpoley (AT) xs4all (DOT) 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.


Quote:
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/


Reply With Quote
  #8  
Old   
Christoph Paeper
 
Posts: n/a

Default Re: clipping an image - 11-03-2003 , 05:38 AM



*Stephen Poley* <sbpoley (AT) xs4all (DOT) nl>:
Quote:
On Fri, 31 Oct 2003 01:47:33 +0100, Christoph Paeper
*Stephen Poley* <sbpoley (AT) xs4all (DOT) 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.

Quote:
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.

Quote:
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.

Quote:
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


Reply With Quote
  #9  
Old   
Stephen Poley
 
Posts: n/a

Default Re: clipping an image - 11-03-2003 , 10:07 AM



On Mon, 3 Nov 2003 12:38:16 +0100, Christoph Paeper
<crissov2003Q4 (AT) gmx (DOT) net> wrote:

Quote:
*Stephen Poley* <sbpoley (AT) xs4all (DOT) nl>:
On Fri, 31 Oct 2003 01:47:33 +0100, Christoph Paeper
*Stephen Poley* <sbpoley (AT) xs4all (DOT) 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

Quote:
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/


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.