Вертикальное выравнивание и IE7

**Kiosuki** · 08.10.2007, 12:17

Возможно, где-то эту тему уже поднимали. Мне не удалось найти. Но все же, проблема в следующем. Довольно известный способ выравнивания по вертикали применен в следующем документе: [attachment=6944:attachment]
Во всех браузерах, в том числе, и в IE7, все отображается нормально. Но документ не валиден из-за заголовка <html>.
Как только прописываем DOCTYPE [attachment=6945:attachment]

Код:

<?xml version="1.0" encoding="Windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

все становится отлично. Но в IE7 сразу пропадает эффект вертикального выравнивания по центру.
Как быть?

Спасибо заранее.

**Aykroyd** · 09.10.2007, 01:53

Во-первых, не могу не отметить, что Вы так и не разлюбили свойства display: table; и display: table-cell;. А ведь Вас неоднократно предупреждали, что не доведут они Вас до добра... ) Ну, да ладно...

Во-вторых, уберите Христа ради вот это:

Код:

<?xml version="1.0" encoding="Windows-1251"?>

От этой инструкции IE6 просто переколбашивает и он впадает в кому (переключается в quirks mode)...

В третьих, смею Вас разочаровать: седьмой эксплорер разработчики так и не научили понимать свойства display: table; и display: table-cell;. Но загвоздка тут в другом:

Если не указывать !DOCTYPE, IE7 начинает понимать (!) стилевые инструкции, предназначенные для IE6. Т.е. всё то, что экранировано через конструкцию * html.

Поэтому то "вертикальное выравнивание", которое Вы наблюдаете в седьмом без доктайпа – есть ни что иное, как выполненные инструкции для IE6. Не более того. А поскольку при наличии правильного доктайпа IE7 перестает понимать "* html" – вот и выравнивание по вертикали пропадает...

В четвертых:

Originally posted by Kiosuki@Oct 8 2007, 12:17
Довольно известный способ выравнивания по вертикали
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Известный чем? Своей "корявостью"?

Есть гораздо более логичные и относительно безболезненные способы кроссбраузерного выравнивания по вертикали...

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Проверка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {margin: 0px; padding: 0px;}
body {background: white;}
div {background: #CC0000; height: 100px;}
p#outer {display: table-cell; vertical-align: middle; height: 100px;}
p#outer span {display: block; margin-top: expression(((outer.offsetHeight/2)-parseInt(offsetHeight)/2) *<0 ? "0" : (outer.offsetHeight/2)-(parseInt(offsetHeight)/2) +&#39;px&#39;);}
</style>
</head>
<body>
****<div><p id="outer">Проверка выравнивания по вертикали.</p></div>
****[Только зарегистрированные пользователи могут видеть ссылки. ]
</body>
</html>

Только стили в отдельный внешний файл вынесите, чтобы валидатор не поперхнулся символом "<" в экспрешшене... И будет все валидно...

**Kiosuki** · 09.10.2007, 11:26

Большое спасибо, сейчас буду пробывать! Позже отпишусь что вышло.

P.S. На данный момент мне пока из всех способов вертикального выравнивания приглянулся лишь тот, что я использовал, поэтому там и присутствует display: table-cell;

Видимо, это мой крест, никак не могу от них отделаться

Спасибо большое за ответ.

**Aykroyd** · 09.10.2007, 15:00

Originally posted by Kiosuki@Oct 9 2007, 11:26
На данный момент мне пока из всех способов вертикального выравнивания приглянулся лишь тот, что я использовал, поэтому там и присутствует display: table-cell;
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Да дело тут не в display: table-cell... Путь присутствует...)
Для нормальных браузеров в контексте вертикального выравнивания он нужен.
Другое дело – способы эмуляции этого display: table-cell для IE. О них речь...

**Kiosuki** · 09.10.2007, 18:27

Да, способ действительно, интересный. А главное - валидный и рабочий! Все получилось! Спасибо большое за информацию.

**Kiosuki** · 11.10.2007, 18:53

Хорошо, хорошо... Да ничего хорошего. Как ни срачка, извиняюсь, так болячка. В общем, при добавлении в начале дока:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

При виде этого:

Код:

width: expression( document.body.clientWidth < 1000? &#39;1000px&#39;:&#39;auto&#39; );

IE6 сразу впадает в состояние безумной эпилепсии, если его ширина менее 1000px, забирая 100% жизней у центрального камня! Как быть?

Подскажите, пожалуйста!

**Aykroyd** · 11.10.2007, 19:08

Originally posted by Kiosuki@Oct 11 2007, 18:53
Как ни срачка, извиняюсь, так болячка.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Вы не горячитесь так. Эмоции, да паника – штуки неконструктивные...

Ведь сто раз уже здесь писал про это... А именно:

Использование expression в CSS для эмуляции min-width в IE6 в некоторых случаях приводит к ПОДВИСАНИЮ вышеназванного браузера... Особенно часто это проявляется с XHTML-доктайпами...

Поэтому данный способ категорически не рекомендуется. Есть для этого хорошие альтернативные способы, который подвисаний не вызывают. Это либо третий метод, описываемый вот [Только зарегистрированные пользователи могут видеть ссылки. ], либо лучше всего скачать и подключить [Только зарегистрированные пользователи могут видеть ссылки. ] (через условный комментарий для IE6). Этот скрипт заставляет IE6 понимать не только min-width для body, но и вообще любые min/max-width/height для любых элементов...

**Kiosuki** · 12.10.2007, 10:44

Вроде бы ПОКА все нормализовалось

Кстати, при добавлении <?xml ... ?> в начало дока зависание IE6 прекратилось.

**Aykroyd** · 12.10.2007, 12:52

Originally posted by Kiosuki@Oct 12 2007, 10:44
Кстати, при добавлении <?xml ... ?> в начало дока зависание IE6 прекратилось.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
А quirks mode началось.

Тема: Вертикальное выравнивание и IE7

Опции темы

Поиск по теме

Отображение

Похожие темы

Вертикальное выравнивание

Вертикальное меню

Вертикальное дропдаун меню vs. Flash баннер

Вертикальное выравнивание в div с разделителями

ВЕРТИКАЛЬНОЕ ВЫРАВНИВАНИЕ ТЕКСТА ВНУТРИ DIVа

Ваши права