Снова перекрытие, но уже ячейками таблицы

[d0ublezer0]

Ссылка

Посмотрите на надписи под колесами - в IE они обрезаются слева

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

Тут фигня в том, что подписи тоже относительно картинок выравнивать. вот из-за отрицательных маргинов и обрезается

Как избежать?

[psywalker]

Внутри спанам поставь паддинг левый.

А вообще я бы такое сделал на списках не задумываясь.

[d0ublezer0]

А по низу как равнять? Списки-то?

[psywalker]

  d0ublezer0 said:

А по низу как равнять? Списки-то?

1) Картинки сделать однинаковой высоты. Т.е. даже если вверху будет пусто.

2) Задать высоту ЛИ, внутри всё позиционировать

3) Ещё один вариант только что из головы вылетил)))

[Mal4ishnik]

попробуй так :

.tyres_container td {
	overflow: visible;
	vertical-align: bottom;
}

[Mal4ishnik]

предыдущее решение не пашет, нашел такое, но оно не совсем изящное).

Сразу осле </head> поставь:

<style type="text/css">
.spisok li {
	float:left;
	   margin: 0 0 0 -30px;
}
.spisok td {
	height:164px;
	vertical-align:bottom;
}
.tyres_container .tyre {
	margin:0;
}
</style>

А таблицу замени на:

<ul class="spisok">
				<li>
					<table>
						<tr>
							<td><a class="tyre t01" href="#"><img src="images/tyre_01.png" width="127" height="140" alt="Крупногабаритные шины" /><span>Крупногабаритные<br />
								шины</span></a></td>
						</tr>
					</table>
				</li>
				<li>
					<table>
						<tr>
							<td><a class="tyre t02" href="#"><img src="images/tyre_02.png" width="104" height="126" alt="Сельхоз шины" /><span>Сельхоз<br />
								шины</span></a></td>
						</tr>
					</table>
				</li>
				<li>
					<table>
						<tr>
							<td><a class="tyre t03" href="#"><img src="images/tyre_03.png" width="106" height="113" alt="Шины для погрузчика" /><span>Шины для<br />
								погрузчика</span></a></td>
						</tr>
					</table>
				</li>
				<li>
					<table>
						<tr>
							<td><a class="tyre t04" href="#"><img src="images/tyre_04.png" width="111" height="128" alt="Грузовые шины" /><span>Грузовые<br />
								шины</span></a></td>
						</tr>
					</table>
				</li>
				<li>
					<table>
						<tr>
							<td><a class="tyre t05" href="#"><img src="images/tyre_05.png" width="94" height="115" alt="Легкогрузовые шины" /><span>Легкогрузовые<br />
								шины</span></a></td>
						</tr>
					</table>
				</li>
			</ul>