Background top left начинается с середины блока..

[gard]

Здравствуйте!

Подскажите, вот воюю уже час наверное с одной проблемой и никак не могу ее побороть (CSS изучаю с неделю, если что- простите). Картина такая:

Рамка - это границы блока при наведении, для этого блока производится заливка фоновым цветом, или я еще вставлял изображение, оно так же уезжает вниз. В качестве контента этого мелкого блока выводится прозрачное .png изображение 24*24px. Вот листинг всего большого блока, включающего блок tabs, в котором и творится непотребство:

<div id="feature_list">
			<ul id="tabs">
				<li>
					<a href="java script:;">
						<img src="/images/jq/click.png" width="24px" height="24px" />

					</a>
				</li>
				<li>
					<a href="java script:;">
						<img src="/images/jq/click.png" width="24px" height="24px" />

					</a>
				</li>
				<li>
					<a href="java script:;">
						<img src="/images/jq/click.png" width="24px" height="24px" />

					</a>
				</li>
				<li>
					<a href="java script:;">
						<img src="/images/jq/click.png" width="24px" height="24px" />

					</a>
				</li>
				<li>
					<a href="java script:;">
						<img src="/images/jq/click.png" width="24px" height="24px" />

					</a>
				</li>
				<li>
					<a href="java script:;">
						<img src="/images/jq/click.png" width="24px" height="24px" />

					</a>
				</li>
			</ul>
			<ul id="output">
				<li>
					<img src="/images/autos/focus/1.jpg" />
					<a href="#">Узнать больше</a>
				</li>
				<li>
					<img src="/images/autos/focus/2.jpg" />
					<a href="#">Узнать больше</a>
				</li>
				<li>
					<img src="/images/autos/focus/3.jpg" />
					<a href="#">Узнать больше</a>
				</li>
				<li>
					<img src="/images/autos/focus/4.jpg" />
					<a href="#">Узнать больше</a>
				</li>
				<li>
					<img src="/images/autos/focus/5.jpg" />
					<a href="#">Узнать больше</a>
				</li>
				<li>
					<img src="/images/autos/focus/6.jpg" />
					<a href="#">Узнать больше</a>
				</li>
			</ul>

Отсюда нас интересует повторяющаяся часть:

				<li>
					<a href="java script:;">
						<img src="/images/jq/click.png" width="24px" height="24px" />

					</a>
				</li>

click.png - то самое прозрачное изображение. Вот CSS (простите, много правок):

		/*Общие настройки доски*/
		div#feature_list {
			width: 780px;
			height: 439px;
			overflow: hidden;
			position: relative;
		}
		/*все начинается с ul*/
		div#feature_list ul {
			position: absolute;
			~top: 0;
			list-style: none;	
			padding: 0px;
			margin: 0px;
			bottom: 0px;
			left: 0px; 
		}

		/*"поле" выбранного таба, bgcolor можно сделать прозр, чтобы таб (png) "наезжал" на картинку*/
		ul#tabs {
			left: 0;
			z-index: 40;
		}

		ul#tabs li {
			font-size: 12px;
			font-family: Verdana;
			float: left;
			margin: 10px;
		}
		/*Мелкие иконки на табах*/
		ul#tabs li img {
			padding: 0px;
			border: none;
			margin: 0px;
		}
		/*области со ссылками*/
		ul#tabs li a {
			height: 24px;
			outline: none;
			background: #555/* url('../images/jq/click_bkg.png') no-repeat top left*/;
		}

		ul#tabs li a:hover {
			outline: 1px solid #666; /* Параметры рамки */
		}

		ul#tabs li a.current {
			background:  #fff /*url('../images/jq/click_bkg_active.png') no-repeat top left*/;
		}
		ul#tabs li a.current:hover {
			outline: none; /* Параметры рамки */
		}
		/*активный таб при наведении говорит, что он не ссылка*/
		ul#tabs li a.current:hover {
			text-decoration: none;
			cursor: default;
		}
		/*А вот это область нашей картинки*/
		ul#output {
			right: 0;
			width: 780px;
			height: 439px;
			position: relative;
		}

		ul#output li {
			position: absolute;
			width: 780px;
			height: 439px;
		}

		/*Кнопка "узнать больше"*/
		ul#output li a {
			position: absolute;
			bottom: 15px;
			right: 15px;
			padding: 8px 12px;
			text-decoration: none;
			font-size: 11px;
			color: #FFF;
			background: #000;
			-moz-border-radius: 5px;
		}


		ul#output li a:hover {
			background: #fff;
			color: #000;
		}

Буду очень признателен за помощь..

Edited June 23, 2010 by gard

[Searcher]

Ээээ, не пойму, так а как должно то быть?

И лучше ссылочку, а не листинг...

[gard]

Блин ссылочку дать не могу, могу дать архив, если у вас есть куда закинуть каталог со страничкой.. А должно быть (или нет? оО) так, чтобы область заливалась фоновым цветом полностью а не с (примерно) середины и до низу..

[WalkMan]

/*области со ссылками*/

ul#tabs li a {

height: 24px;

outline: none;

background: #555/* url('../images/jq/click_bkg.png') no-repeat top left*/;

}

а - инлайновый элемент

если ты ему вешаешь высоту и бэк то и display: block ставь

хз решит это траблу или нет

так как я тож не понял суть проблемы)

[gard]

Вот, сразу видно - профессионалы! Спасибо большущее! Лекарство помогло. Теперь заливается полностью.

Edited June 24, 2010 by gard