Где ошибка?

Kenshi45 · February 18, 2009

Есть страничка, в ней есть таблица, внутри этой таблицы рисунок и еще одна таблица, по идее оба объекта прижаты к верхней границе, но почему-то рисунок получается расположен ниже уровня вложенной таблицы (баг виден в FF), как это исправить?

Вот страничка:

http://aionzone.ru/themes/aionzone/spells.htm

Исходник:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Таблица способностей</title>
<style type="text/css">
body{
		color: #000;
		background-color: #fff;
	font: 12px Tahoma, Arial, Courier New;
}
table.item-show{
	padding: 0;
	margin: 10px 0 50px 0;
}
table.item-show td{
	padding: 0 5px 0 0;
	vertical-align: top;
	text-align: left;
}

table.item-show-display{
	border-collapse: collapse;
	padding: 0;
	margin: 0;
	height: 40px;
	width: 400px;
	border: 1px solid #A6AFBA;
}
table.item-show-display td{

	background-color: #eee;
	padding: 5px;
}
table.item-show-display td.name{
	text-align: left;
	font-weight: bold;
	background: #eee url(/themes/aionzone/images/forms/table-gradient-odd.png) 0 0 repeat-x;
}
table.item-show-display td.level{
	text-align: right;
	background: #eee url(/themes/aionzone/images/forms/table-gradient-odd.png) 0 0 repeat-x;
}
table.item-show-display td.comment{
	padding-top: 0;
	text-align: left;
}
</style>
</head>
<body>

<table class="item-show" cellpadding="0" cellspacing="0">
<tr>
	<td>
	<img height="40" width="40" src="http://aionzone.ru/themes/aionzone/images/database/sample1.png" alt="" />
	</td>
	<td>

		<table class="item-show-display" cellpadding="0" cellspacing="0">
			<tr>
				<td class="name">
				Munyak Explosion	
				</td>
				<td class="level">
				Уровень	5
				</td>
			</tr>
			<tr>
				<td class="comment" colspan="2">
				<p>Step 5 on the line to delete the symbols of the bomb damage. If there are any patterns in 3 or more steps to further stunned state.</p>	
				</td>
			</tr>
		</table>

	</td>
<tr>
</table>

</body>
</html>

Edited February 18, 2009 by Kenshi45

s0rr0w · February 18, 2009

Есть страничка, в ней есть таблица, внутри этой таблицы рисунок и еще одна таблица, по идее оба объекта прижаты к верхней границе, но почему-то рисунок получается расположен ниже уровня вложенной таблицы (баг виден в FF), как это исправить?

Это не баг, это правильно все.

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

Всем, кому интересно, почему все правильно:

http://www.w3.org/TR/CSS21/tables.html#collapsing-borders

Обращаем внимание, чему равна ширина таблицы. Бордюр толщиной в 1 пиксель невозможно разделить надвое так, чтобы он был посреди линии сетки, которая указывает на границы между ячейками. Поэтому для верхней и правой границы ячейки бордюр рисуют за пределами таблицы, а для нижней и левой - внутри.

Вот тесткейз для понимания

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Border collapsing</title>
 <style type="text/css">
	.container
		{
			width: 100px;
			height: 100px;
			background: #fc3;
		}
	table 
		{
			border-collapse: collapse;
			width: 100px;
			height: 100px;
			border: 10px solid #000;
			padding: 10px;
		}
 </style>

 </head>
 <body>

 	<div class="container">
 		<table>
 			<tbody>
 				<tr>
 					<td>Cell</td>
 				</tr>
 			</tbody>
		</table>
 	</div>
 	<div class="container">
 		Real 100x100
	</div>
 </body>
 </html>

Опера, ИЕ, Сафари, Хром, ФФ2 показывают данный код неправильно.

Kenshi45 · February 18, 2009

А как быть если я не могу реализовать это через слои, а могу только через таблицы?

s0rr0w · February 18, 2009

А как быть если я не могу реализовать это через слои, а могу только через таблицы?

Лично я забиваю на такое. Никому не интересно лазить по сайту с линейкой и вымерять несовпадение пикселей.

Kenshi45 · February 18, 2009

Лично я забиваю на такое. Никому не интересно лазить по сайту с линейкой и вымерять несовпадение пикселей.

А я не могу на такое забить, если браузер без очевидной логики делает такие смещения, кто знает что он там еще может "неправильно" сделать.

s0rr0w · February 18, 2009

А я не могу на такое забить, если браузер без очевидной логики делает такие смещения, кто знает что он там еще может "неправильно" сделать.

Вы внимательно читали то, что я написал?

Еще рез повторю, FF3.0 абсолютно корректно, с точки зрения спецификации, рендерит данную таблицу, так как он не может разделить бордюр толщиной в 1 пиксель надвое.

Все остальные браузеры обрабатывают данный код НЕКОРРЕКТНО.

Ваши мысли по поводу того, что по вашему мнению правильно, а что - нет, отсылайте напрямую в www.w3c.org, может они к вам и прислушаются, и изменят спецификацию, чтобы браузеры рендерили так как вам хочется, по вашей личной логике.

Kenshi45 · February 19, 2009

Вы внимательно читали то, что я написал?
Еще рез повторю, FF3.0 абсолютно корректно, с точки зрения спецификации, рендерит данную таблицу, так как он не может разделить бордюр толщиной в 1 пиксель надвое.
Все остальные браузеры обрабатывают данный код НЕКОРРЕКТНО.
Ваши мысли по поводу того, что по вашему мнению правильно, а что - нет, отсылайте напрямую в www.w3c.org, может они к вам и прислушаются, и изменят спецификацию, чтобы браузеры рендерили так как вам хочется, по вашей личной логике.

Поэтому слово неправильно я взял в кавычки)

Sign In

Где ошибка?

Question

Kenshi45

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

Kenshi45

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Kenshi45

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Kenshi45

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information