473,407 Members | 2,314 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,407 software developers and data experts.

clipping an image

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
8 4670
*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
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
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
*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
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
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
*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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: John Hunter | last post by:
Does gd lib or gdmodule support clipping? I would like to set a clip rectangle and when I issue drawing commands (like im.polygon) have only the part of the polygon inside the clip rectangle...
0
by: Pierre Jelenc | last post by:
I have a blog script that is a customized version of Word Press (wordpress.org) at http://www.web-ho.com/blog/ Because of the way it evolved, some of the CSS may not be the best, I have tended...
1
by: Tony Carnell | last post by:
Hi, Now here's an interesting (and highly annoying) thing! I'm working on a webpage, and am having a display 'glitch' when viewed in IE6 (oh no, not that non-standards compliant piece of...
14
by: Doug van Vianen | last post by:
Hi, I am trying to show a clipped part of a picture on a webpage and move it on the page and/or change the clipping to a different part of the picture. I show the picture in the body of the...
0
by: phil cunningham | last post by:
Does anyone know of a good library to handle Polygon clipping in C#. This would require clipping of shapes with FLOAT verteces and we need the capability of clipping one Polygon against another...
4
by: Dixon | last post by:
Hai Im a newbie I have a picture in a picture box I drag a portion of the picture with the mouse..... Here i get the area i dragged in and now i want that area to be a separate picture...
2
by: Pugi! | last post by:
I am currently experimenting a bit with clipping (with banners). 1. Is it possible to do more then one clipping on a image. For example: image of 400px x 80 px: var TELLER = 0; function...
9
by: Andy Baxter | last post by:
hello, I'm writing a panoramic image viewer in html / javascript. The idea is I have a div with two identical panoramic photographs embedded in it. The clipping on the div is set to make it a...
0
by: dongarbage | last post by:
Hi there, I have a panel that I'm trying to draw lines on based on mouse events. I'm using a Graphics object to do this. However, the region that the graphics object will draw lines in is...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.