Обрезание картинки и тень от нее

[Tchorteg]

Картинка обрезается, но тень почему не видна.

margin-top:0px;
margin-left:-15px;
position: absolute;
clip: rect(5px 125px 100px 15px);
box-shadow: 0 0 5px black;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
padding: 10px;

Как можно исправить?

[Softlink]

Картинка обрезается, но тень почему не видна.

margin-top:0px;
margin-left:-15px;
position: absolute;
clip: rect(5px 125px 100px 15px);
box-shadow: 0 0 5px black;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
padding: 10px;

Как можно исправить?

А можно посмотреть как это выглядит? Страницу или код ее?

И еще. Почему бы не позиционировать блок абсолютом, и задать ему overflow:hidden вместо clip?

[Tchorteg]

<style type="text/css">
.photo_main td {
	position: relative;
	height: 120px;
	border: 0px;

}
.photo_main img {
	margin-top:0px;
	margin-left:-15px;
	position: absolute;
	clip: rect(5px 125px 100px 15px);
	    box-shadow: 0 0 5px black; /* Параметры тени */
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
    padding: 10px;
}
</style>

<table width="710px" cellpadding="0" cellspacing="0" border="0">
<tbody><tr class="photo_main">

<td style="vertical-align:top; padding-bottom:5px; float:left;" width="50%">
	<a href="?mail=1318"><img width="150px" src=""></a>
	<a href="?mail=1318" style="margin-left:120px;">
	Damir swint68	</a>
</td>


<td style="vertical-align:top; padding-bottom:5px; float:left;" width="50%">
	<a href="?mail=983"><img width="150px" src="/upload/main/a57/when_autumn_comes_by_smileysmurf-d31mt4w.jpg"></a>
	<a href="?mail=983" style="margin-left:120px;">
	Asketa Asketa	</a>
</td>


<td style="vertical-align:top; padding-bottom:5px; float:left;" width="50%">
	<a href="?mail=131"><img width="150px" src="/upload/main/64d/article-image-thumbnail.jpg"></a>
	<a href="?mail=131" style="margin-left:120px;">
	Furstja Furstja	</a>
</td>


<td style="vertical-align:top; padding-bottom:5px; float:left;" width="50%">
	<a href="?mail=768"><img width="150px" src="/upload/main/7e4/jdppckkubbnfarvnqhesqrmlvgivhaqqdgggqqbsspxtgtgxblpsccdxim.jpg"></a>
	<a href="?mail=768" style="margin-left:120px;">
	Mr.FAR Mr.FAR	</a>
</td>

</tr>
</tbody></table>

[Softlink]

вот нифига себе вы придумали А может можно как-то иначе все выполнить? Какой результат должен быть?

Вы тут все в кучу свалили свалили, и флоаты и позиционирование.

[Softlink]

насколько я понял, у вас должно получиться что-то подобное http://jsfiddle.net/HWqTP/ Верно?

Таблицу оставил вашу, хотя она тут не нужна.

upd. Здесь

.image {
display:block;

display:block; не нужен, остался от экспериментов

Edited August 1, 2011 by Softlink

[Tchorteg]

Спасибо огромное. Помогли.

[Tchorteg]

насколько я понял, у вас должно получиться что-то подобное http://jsfiddle.net/HWqTP/ Верно?

Таблицу оставил вашу, хотя она тут не нужна.

upd. Здесь

.image {
display:block;

display:block; не нужен, остался от экспериментов

А вот если делать такую же операцию, но без таблицы. не подскажите как?

А то не очень удобно со строками и столбцами.

[Softlink]

ну как-нибудь вот так можно http://jsfiddle.net/HWqTP/1/

Черт, я опять забыл этот display:block удалить

Edited August 1, 2011 by Softlink

[Tchorteg]

ну как-нибудь вот так можно http://jsfiddle.net/HWqTP/1/

Черт, я опять забыл этот display:block удалить

Вооо, спасибо огромное Спасли неуча