Помогите с версткой

Great Rash · February 9, 2009

Есть такой код:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>



<body>

	<div style="position: absolute; left: 10%; top: 10%; width: 200px; height: 200px; border: #f00 1px solid;">
		<div style="border: #000 1px solid; height: 25px;"></div>
		<table style="width: 100%; margin: 10px; border: #0f0 1px solid;">
			<tr>
				<td style="height: 100px;">
					111
				</td>
			</tr>
		</table>
	</div>

</body>
</html>

Если его посмотреть в IE и Firefox'е, то будет видно, что ни там ни там код не отображается как надо. А надо сделать так:

1. Есть див (перетаскиваемый) у которого стоит position: absolute; и заданная ширина, которая будет меняться динамически.

2. Внутри этого дива есть заголовок со своим бекграундом, который должен быть 100% по ширине и не иметь отступов от краев перетаскиваемого дива.

3. Под дивом-заголовком должна располагаться таблица, тоже резиновая но с отступами по 10 пикселей с каждой стороны.

Собственно, что я делаю не так? Пробовал взять таблицу еще в один контейнер и поставить padding: 10px; ему, но IE не хочет это корректно отображать. Кто сталкивался с такой проблемой или может знает решение помогите пожалуйста.

Vlad · February 9, 2009

О какой версии IE речь? В некоторых версиях есть такой баг - перед доктайпом не должно быть никаких строк, иначе браузер переходит в квирк моде.

xaero · February 9, 2009

<?xml version="1.0" encoding="utf-8"?>

а зачем это надо?

Great Rash · February 9, 2009

О какой версии IE речь?

О шестой, не знаю есть ли там пустые строки, не смотрел, но по идее быть не должно.

Тем более в том примере, который я тут запостил, никаких пустых строк, пробелов и т.п. нет.

UPD: Невнимательно прочитал ваш пост... попробовал убрать строку <?xml version="1.0" encoding="utf-8"?>, ничего не изменилось.

<?xml version="1.0" encoding="utf-8"?>

Таковы рекомендации W3C http://www.w3.org/QA/2002/04/valid-dtd-list.html

UPD2: Извиняюсь, плохо смотрел (просто уже задолбался с этой проблемой и не заметил), оказывается вы были правы - действительно, если убрать строку перед доктайпом, то в IE все становится нормально. И даже валидацию проходит

Edited February 9, 2009 by Great Rash

rash · February 9, 2009

Забейте вы на эту рекомендацию.

Никакой пользы от этой декларации нет, а вот переключить режим рендеринга IE мешает.

Таблица у вас смещается, потому что у нее ширина не 100% а 100%+20px.

Отступ слева срабатывает, а справа таблица не помещается в контейнер.

Вы этого хотели добиться?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>
<div style="position: absolute; left: 10%; top: 10%; width: 200px; height: 200px; border: #f00 1px solid;">
<div style="border: #0f0 1px solid; height: 25px;"></div>
	<div style="margin: 10px;"><table style="width: 100%; margin: 0px; border: #0ff 1px solid;">
	<tr>
	<td style="height: 100px;">
	111
	</td>
	</tr>
	</table></div>
</div>

</body>
</html>

Great Rash · February 9, 2009

Да я про контейнер стазу и подумал, просто смущало то, что в IE нифига не работало как надо.

В общем всем спасибо за помощь! Запишу себе на корочку еще один баг IE.

rash · February 9, 2009

У меня сработало в IE 6/7

Sign In

Помогите с версткой

Question

Great Rash

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

xaero

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information