Списки и ссылки

[KorPaEv]

Доброго времени суток!

Вопрос в следующем.
Есть контейнер со списком, элементы списка - картинки и ссылки на них сразу.

Картинки имеют определенный размер например 123 на 123, оставляю 2 пикселя на рамку.
Есть бэкграунд для картинки и при наведении на картинку он должен появляться.
Как в css прописать так, чтобы при наведении на эту картинку появлялся бэкграунд но таким же размером как мое исходное изображение??

Вот мой код, но при наведении на картинку у меня появляется желаемый бэкграунт но как бы в подчеркивании этой ссылки.

ХТМЛ

<div id="content_pic">
<div id="content_pic_ul">
<ul>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
</ul>
</div>
</div>

ЦСС

div#content_pic

	{
	overflow:hidden;
	padding:0 15px;
 	}
	
div#content_pic_ul ul

	{
 	list-style:none;
	margin:0;
	padding:0;
	width:805px;
 	}
	
div#content_pic_ul ul li

	{
 	float:left;
	margin:0 34px 34px 0;
	border:#0033cc 2px inset;
 	}

div#content_pic_ul ul a

	{
 	text-decoration:none;
 	}

div#content_pic_ul ul a:hover

	{
 	background:url(../img/text_ahref.png) no-repeat;
 	}

Так вот у меня бэкграунд заменяется, но он прорисовывается в линии подчеркивания а мне нужно чтобы он применялся во всю ширину картинки и длинну соответственно.

[kettanaito]

Задавать background ссылке не вариант. Лучше сделай элементы <li> определенного размера (под твой background) и опиши событие при наведении на них. Должно получиться.

[TranceSmile]

Я допустим делаю так

<style>
#mainmenu {
width: 500px;
height:40px;
}
#mainmenu ul {
list-style:none;
display:inline;
}
#mainmenu a {
display:block;
width:100px;
height:40;
text-decoration:none;
background:silver;
}
#mainmenu a:hover{
background:yellow;
}
</style>
<div id=mainmenu>
<ul>
<li><a href="page1"></a></li>
<li><a href="page2"></a></li>
<li><a href="page3"></a></li>
<li><a href="page4"></a></li>
</ul>
</div>

[Naive]

div#content_pic_ul ul a:hover img

	{
 	background:url(../img/text_ahref.png) no-repeat;
 	}

[KorPaEv]

Всем спасибо, но сделал так

div#content_pic_ul ul a

        {
        text-decoration:none;
        display:block;
        width:123px;
        height:123px;
        }

Помогло..сразу вопрос, если у меня будет ситуация что я поменяю размеры картинок, нельзя ли поставить размеры 100% чтобы блок сам подстраивался по размер картинки??или же придется вручную менять??

[TranceSmile]

div#content_pic_ul ul a

        {
        text-decoration:none;
        display:block;
        min-width:123px;
        width:auto !impotrant;
        min-height:123px;
        height:auto !important;
        }

Должно помочь

[KorPaEv]

Сообщение от TranceSmile

div#content_pic_ul ul a

        {
        text-decoration:none;
        display:block;
        min-width:123px;
        width:auto !impotrant;
        min-height:123px;
        height:auto !important;
        }

Должно помочь

Спасибо! Как дела с кроссбраузерностью?

[TranceSmile]

Сообщение от KorPaEv

Спасибо! Как дела с кроссбраузерностью?

Должно быть нормально)

[navodri]

с кроссбраузерностью всё гуд!

[KorPaEv]

Ок, всем спасибо!