473,233 Members | 1,389 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,233 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 4662
*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: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

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.