[Проблема] Борьба с IE. Центрирование содержимого по вертикали [Архив]

Просмотр полной версии : [Проблема] Борьба с IE. Центрирование содержимого по вертикали

Maxim Kopytov

27.04.2010, 00:46

Кому удавалось победить IE?
Строю горизонтальную менюшку при помощи элементов текстового списка.

Сейчас она такая:

https://img.uforum.uz/images/feiiqcg7694980.png

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Vertical align MIDDLE</title>
<style type="text/css">
body {font: 11px Arial, Helvetica, sans-serif;}
ul, li { list-style: none outside none;}
ul {padding: 0;}
li {float: left; background-color:#FFCC99; margin: 0 10px 0 0; width:130px;}
a {display: block; background-color:#FF9900; height: 46px; text-align:center;}
.left {padding-left: 10px;}
.right {padding-right: 10px;}
</style>
</head>
<body>
<ul>
<li><div class="left"><div class="right"><a href="#">Main page</a></div></div></li>
<li><div class="left"><div class="right"><a href="#">Products</a></div></div></li>
<li><div class="left"><div class="right"><a href="#">Interesting article about Mr. Brown</a></div></div></li>
<li><div class="left"><div class="right"><a href="#">Hallo! How are You?</a></div></div></li>
<li><div class="left"><div class="right"><a href="#">Feedback</a></div></div></li>
</ul>
</body>
</html>

Dolphin

27.04.2010, 01:13

display: table-cell; vertical-align: middle;

Maxim Kopytov

27.04.2010, 09:03

display: table-cell; vertical-align: middle;

Internet Explorer 6,7 об этом не знает.
Если бы все было так просто.

Timur Naimov

27.04.2010, 09:34

А вот как сделать центрирование по вертикали?
Сверстайте меню таблицей, у td есть valign.

Maxim Kopytov

27.04.2010, 09:56

А вот как сделать центрирование по вертикали?
Сверстайте меню таблицей, у td есть valign.

Требование - блочная верстка.
Таблицы только для контента.

Использование условных комментариев допускается.

Aziz Madetov

27.04.2010, 10:01

Задайте блокам фиксированную высоту и подгоните padding под размер шрифта в пикселах.

Evgeniy Sklyarevskiy

27.04.2010, 10:04

Требование - блочная верстка. Чье требование? Неужели заказчика? Не стоит упираться в блочную верстку ради нее самой, часто проще таблицами сделать.

Maxim Kopytov

27.04.2010, 10:09

Задайте блокам фиксированную высоту и подгоните padding под размер шрифта в пикселах.

А если текст в 2 или 3 строки?
Смотрите иллюстрацию выше, в 1-ом сообщении.

Aziz Madetov

27.04.2010, 10:14

Чье требование? Неужели заказчика? Не стоит упираться в блочную верстку ради нее самой, часто проще таблицами сделать.
Согласен. Блочная верстка была бы уместна при выпадающем меню.

Aziz Madetov

27.04.2010, 10:17

А если текст в 2 или 3 строки?
Смотрите иллюстрацию выше, в 1-ом сообщении.
К сожалению, мобильная версия форума не отображает картинки. См. предыдущее мое сообщение.

Maxim Kopytov

27.04.2010, 11:14

https://img.uforum.uz/images/amkzauf1183497.png

Решение при помощи expression

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Vertical align MIDDLE</title>

<style type="text/css">
body {font: 11px Arial, Helvetica, sans-serif;}
ul, li { list-style: none outside none;}
ul {padding: 0;}
li {float: left; background-color:#FFCC99; margin: 0 10px 0 0; width:130px; height: 46px; border:1px solid; overflow:hidden;}

a {
display: block;
cursor: pointer;

}

.box {
display: table-cell;
vertical-align: middle;
height: 46px;
background-color: #FF9900;

}
p{
margin-top:expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
background-color:#FFFFCC;
text-align: center;
margin: 0 auto;
width: 110px;
}

.left {padding-left: 10px;}
.right {padding-right: 10px;}

</style>

</head>
<body>
<ul>
<li>
<div class="left">
<div class="right">
<a href="#">
<div class="box">
<p>Main page</p>
</div>
</a>
</div>
</div>
</li>
<li>
<div class="left">
<div class="right"><a href="#">
<div class="box">
<p>Products</p>
</div>
</a></div>
</div>
</li>
<li>
<div class="left">
<div class="right"><a href="#">
<div class="box">
<p>Interesting article about Mr. Brown</p>
</div>
</a></div>
</div>
</li>
<li>
<div class="left">
<div class="right"><a href="#">
<div class="box">
<p>Hallo! How are You?</p>
</div>
</a></div>
</div>
</li>
<li>
<div class="left">
<div class="right"><a href="#">
<div class="box">
<p>Feedback</p>
</div>
</a></div>
</div>
</li>
</ul>
</body>
</html>
.left, .right - нужны мне для дополнительного оформления.

PS. Думаю код можно будет еще упростить.

Aziz Madetov

27.04.2010, 13:42

Код точно работает во всех браузерах?

Dolphin

27.04.2010, 15:07

Internet Explorer 6,7 об этом не знает.
Так от IE6 же все вроде отказались уже. Делайте таблицами.

Maxim Kopytov

27.04.2010, 16:47

Maxim Kopytov

27.04.2010, 22:38

Internet Explorer 6,7 об этом не знает.
Так от IE6 же все вроде отказались уже. Делайте таблицами.

:) Вот какой настырный. Ну не 6-ка, так 7-ка не понимает table-cell.

Код вроде бы работает во всех актуальных браузерах. Позже протестирую и уточню.
Opera, Mozilla, Chrome - понимают table-cell и middle.
А expression для IE (будь он неладен)

Проверил. Код работает IE5.5, IE6, IE7
Mozilla FF 3.5.2, естественно Safari, Opera.
Всю историю браузеров не проверял конечно :) Но и этого уже думаю достаточно.
Короче меня устраивает это решение.

Maxim Kopytov

17.05.2010, 12:46

https://img.uforum.uz/images/sdfnswk8847362.png

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dinamic height</title>
</head>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
#box {
background-color:#FFFFCC;
padding:10px;
border:1px solid #FFCC99;
display: table-cell;
vertical-align: middle;
}
#left_block {
background-color:#00CCFF;
float:left;
width: 70%;
}
#right_block {
background-color:#FF9999;
float:right;
width: 30%;
height: auto;
}
</style>
<body>
<div id="box">
<div id="left_block">
<h1>left_block</h1>
<p>The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</p>
<p>This license, the Lesser General Public License, applies to some specially designated software packages--typically libraries--of the Free Software Foundation and other authors who decide to use it. You can use it too, but we suggest you first think carefully about whether this license or the ordinary General Public License is the better strategy to use in any particular case, based on the explanations below.</p>
<p>When we speak of free software, we are referring to freedom of use, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for this service if you wish); that you receive source code or can get it if you want it; that you can change the software and use pieces of it in new free programs; and that you are informed that you can do these things. </p>
</div>
<div id="right_block">
<h1>right_block</h1>
<p>The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</p>
</div>
</div>
<strong>Задача:</strong> Выровнять красный правый блок относительно голубого левого, вертикально по центру
</body>
</html>

Maxim Kopytov

18.05.2010, 09:59

Сложность блочной верстки вынуждает воспользоваться стандартными таблицами.

Блочная верстка получилась такой:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dinamic height</title>
</head>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
h1 {
margin:0;
padding:0;
font-size: 12px;
}
#box {
background-color:#FFFFCC;
padding: 10px;
border:1px solid #FFCC99;
}
#left_block {
width: 70%;
display: table-cell;
vertical-align: middle;
}
#right_block {
width: 30%;
display: table-cell;
vertical-align: middle;
}
#left_block #center {
background-color:#00CCFF;
height:100%;
}
#right_block #center {
background-color:#FF9999;
height:100%;
}
.clear {
clear: both;
}
</style>

<body>
<div id="box">
<div id="left_block">
<div id="center">
<h1>left_block</h1>
The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</br>
This license, the Lesser General Public License, applies to some specially designated software packages--typically libraries--of the Free Software Foundation and other authors who decide to use it. You can use it too, but we suggest you first think carefully about whether this license or the ordinary General Public License is the better strategy to use in any particular case, based on the explanations below.</br>
When we speak of free software, we are referring to freedom of use, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for this service if you wish); that you receive source code or can get it if you want it; that you can change the software and use pieces of it in new free programs; and that you are informed that you can do these things. </br>
</div>
</div>
<div id="right_block">
<div id="center">
<h1>right_block</h1>
The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</br>
</div>
</div>
</div>
</body>
</html>
https://img.uforum.uz/images/dtxtmax2932473.png

условные комментарии + expression