LINUX.ORG.RU

правильный рендеринг: ff&op vs ie&gc&sf


0

1

Есть код

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<ol id="steps">
		<li class="stepResultContainer">
			<span class="stepTitle">${stepObject.instructions.substr(0, 80) + '...'}</span>
			<input type="hidden" name="stepInstructions" value="${stepObject.instructions}" />
		</li>
		<li class="stepResultContainer">
			<span class="stepTitle">${stepObject.instructions.substr(0, 80) + '...'}</span>
			<input type="hidden" name="stepInstructions" value="${stepObject.instructions}" />
		</li>
		<li class="stepContainer">
			<input type='hidden' name='stepId' value='${stepObject.stepId}' />
			<table>
				<tr valign='top'>
					<td>
						<input type="button" class="remove" value-l="app.crudTest.step.remove" />
					</td>
				</tr>
			</table>
		</li>
	</ol>
</body>
</html>

В firefox & opera все ок. а в хроме, ие, и сафари в 3м li есть белая полоска свободного места. лечится отрицательным margin`ом для table.

я знаю что верстка не валидная, но хотелось бы узнать кто из браузеров не прав

ps: doctype не решает

★★★★★

Последнее исправление: ZuBB (всего исправлений: 1)
Ответ на: комментарий от devl547

я знаю что верстка не валидная

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

какие еще гениальные идеи имеются?

ZuBB ★★★★★
() автор топика

>doctype не решает

Но ты его всё-таки выставь. Плюс описания классов нет. Гадать? Или напомнить про дефолтные маргины/паддинги?

anonymous
()
Ответ на: комментарий от anonymous

Плюс описания классов нет. Гадать?

в данном коде *нет* никаких цсс классов. то что осталось из-за copy/paste.

Или напомнить про дефолтные маргины/паддинги?

с ними или без - результат один

Но ты его всё-таки выставь.

ставил 4 разных. результат 0

еще что?

ZuBB ★★★★★
() автор топика
Ответ на: комментарий от ZuBB

HTML Strict doctype. И не уберай, да, вне зависимости от.

Also, ты уверен, что это не из-за того, что input рядом с table лежит, а между ними пробелы/табы и прочие вайтспейсы? Попробуй обернуть input в div, например, и посмотреть, будет ли разница.

anonymous
()
Ответ на: комментарий от ZuBB

Вероятно. По крайней мере я такое поведение в 1ый раз вижу.

anonymous
()

Хм.

Если в списке убрать последний li, но таблице приписать style=«display: list-item», то поведение остается точно таким же.

Google находит несколько людей с той же проблемой, ответ им дают такой: «А зачем тебе таблица внутри списка?».

Вкуривать в спецификации W3C по HTML 4.01 и CSS 2.1 нужно долго и упорно, на это у меня времени нет.

Кстати, DOCTYPE имеет некоторый эффект: если поставить Transitional, то список становится ближе к верху страницы.

proud_anon ★★★★★
()
Ответ на: комментарий от proud_anon

И еще почему-то style=«list-style-position: inside» у того <li>, который вокруг таблицы, сдвигает номер по горизонтали, но не по вертикали.

proud_anon ★★★★★
()
Ответ на: комментарий от proud_anon

Спасибо за ответы

решили что попробуем заюзать div вместо table.

Кстати, DOCTYPE имеет некоторый эффект: если поставить Transitional, то список становится ближе к верху страницы.

не уверен что понял правильно. то есть с Transitional у ol margin меньший?

И еще почему-то style=«list-style-position: inside» у того <li>, который вокруг таблицы, сдвигает номер по горизонтали, но не по вертикали.

и да. не подскажете как выровнять его(номер) именно по вертикали? :)

ZuBB ★★★★★
() автор топика
Ответ на: комментарий от ZuBB

>и да. не подскажете как выровнять его(номер) именно по вертикали? :)

Если бы я знал, я бы сразу и подсказал. :)

proud_anon ★★★★★
()
Ответ на: комментарий от ZuBB

>не уверен что понял правильно. то есть с Transitional у ol margin меньший?

Возможно там quirks mode включается.

Deleted
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.