This is related to <!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=5251">http://forums.webdeveloper.com/showthre ... eadid=5251</a><!-- m --> regarding positioning a Javascript animated image.
I'm TRYING to place a 'clipped' image RELATIVE to a table cell. The only way to get the clipping to work is to use 'position:absolute', but the positioning is no longer controlled by the table. In fact I have no idea what controls it. The clipped image drops down about 100px and moves right about 10px. Strange!
I am aware of all the fancy tricks to get the table cell position and then use absolute position control. That's NOT what I want!
Are there some magical CSS tricks that will solve the problem?
<html><head><title>Untitled</title>
<style type="text/css">
#pict { position:absolute; clip:rect(0 20 200 0) }
</style>
</head>
<body bgcolor="#ffffff">
<center>
<table width=260 border=1><tr><td height=240 align="center">
<div id="frame">
<span id="pict"><img src=http://www.webdeveloper.com/forum/archive/index.php/"sample1.jpg" width=220 height=200></span>
</div>
</td></tr></table>
</center>
</body></html>
I'm TRYING to place a 'clipped' image RELATIVE to a table cell. The only way to get the clipping to work is to use 'position:absolute', but the positioning is no longer controlled by the table. In fact I have no idea what controls it. The clipped image drops down about 100px and moves right about 10px. Strange!
I am aware of all the fancy tricks to get the table cell position and then use absolute position control. That's NOT what I want!
Are there some magical CSS tricks that will solve the problem?
<html><head><title>Untitled</title>
<style type="text/css">
#pict { position:absolute; clip:rect(0 20 200 0) }
</style>
</head>
<body bgcolor="#ffffff">
<center>
<table width=260 border=1><tr><td height=240 align="center">
<div id="frame">
<span id="pict"><img src=http://www.webdeveloper.com/forum/archive/index.php/"sample1.jpg" width=220 height=200></span>
</div>
</td></tr></table>
</center>
</body></html>