-
Возможно, где-то эту тему уже поднимали. Мне не удалось найти. Но все же, проблема в следующем. Довольно известный способ выравнивания по вертикали применен в следующем документе: [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 сразу пропадает эффект вертикального выравнивания по центру.
Как быть?
Спасибо заранее.
-
Во-первых, не могу не отметить, что Вы так и не разлюбили свойства 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'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Известный чем? Своей "корявостью"? [Only registered and activated users can see links. Click Here To Register...]
Есть гораздо более логичные и относительно безболезненные способы кроссбраузерного выравнивания по вертикали...
Код:
<!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) +'px');}
</style>
</head>
<body>
****<div><p id="outer">Проверка выравнивания по вертикали.</p></div>
****[Only registered and activated users can see links. Click Here To Register...]
</body>
</html>
Только стили в отдельный внешний файл вынесите, чтобы валидатор не поперхнулся символом "<" в экспрешшене... И будет все валидно...
-
Большое спасибо, сейчас буду пробывать! Позже отпишусь что вышло.
P.S. На данный момент мне пока из всех способов вертикального выравнивания приглянулся лишь тот, что я использовал, поэтому там и присутствует display: table-cell; [Only registered and activated users can see links. Click Here To Register...]
Видимо, это мой крест, никак не могу от них отделаться [Only registered and activated users can see links. Click Here To Register...]
Спасибо большое за ответ.
-
Цитата:
Originally posted by Kiosuki@Oct 9 2007, 11:26
На данный момент мне пока из всех способов вертикального выравнивания приглянулся лишь тот, что я использовал, поэтому там и присутствует display: table-cell; [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Да дело тут не в display: table-cell... Путь присутствует...)
Для нормальных браузеров в контексте вертикального выравнивания он нужен.
Другое дело – способы эмуляции этого display: table-cell для IE. О них речь...
-
Да, способ действительно, интересный. А главное - валидный и рабочий! Все получилось! Спасибо большое за информацию. [Only registered and activated users can see links. Click Here To Register...]
-
Хорошо, хорошо... Да ничего хорошего. Как ни срачка, извиняюсь, так болячка. В общем, при добавлении в начале дока:
Код:
<!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? '1000px':'auto' );
IE6 сразу впадает в состояние безумной эпилепсии, если его ширина менее 1000px, забирая 100% жизней у центрального камня! Как быть? [Only registered and activated users can see links. Click Here To Register...] Подскажите, пожалуйста!
-
Цитата:
Originally posted by Kiosuki@Oct 11 2007, 18:53
Как ни срачка, извиняюсь, так болячка.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Вы не горячитесь так. Эмоции, да паника – штуки неконструктивные...
Ведь сто раз уже здесь писал про это... А именно:
Использование expression в CSS для эмуляции min-width в IE6 в некоторых случаях приводит к ПОДВИСАНИЮ вышеназванного браузера... Особенно часто это проявляется с XHTML-доктайпами...
Поэтому данный способ категорически не рекомендуется. Есть для этого хорошие альтернативные способы, который подвисаний не вызывают. Это либо третий метод, описываемый вот [Only registered and activated users can see links. Click Here To Register...], либо лучше всего скачать и подключить [Only registered and activated users can see links. Click Here To Register...] (через условный комментарий для IE6). Этот скрипт заставляет IE6 понимать не только min-width для body, но и вообще любые min/max-width/height для любых элементов...
-
Вроде бы ПОКА все нормализовалось [Only registered and activated users can see links. Click Here To Register...] Кстати, при добавлении <?xml ... ?> в начало дока зависание IE6 прекратилось.
-
Цитата:
Originally posted by Kiosuki@Oct 12 2007, 10:44
Кстати, при добавлении <?xml ... ?> в начало дока зависание IE6 прекратилось.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
А quirks mode началось.
