DIV, CSS, vertical-align @ DeForum.ru

Народ, как заставить в dive работать vertical align?
чего не так, то?

Код:

#tst {
   border: 1px solid #FF0000;
   background-color: #CCCCCC;
   height: 100px;
   width: 100px;
   vertical-align: bottom;
   text-align: center;
   display: table-cell;
}

0 Сообщения: 19 Зарегистрирован: 16.03.05

Хм, ну это часто бывает. Можно выкрутиться, если задать для дива padding-top и таким образом опустить текст или изображение.

не, вот именно без паддингов. нормальный такой valign чтоб работал.

17 Сообщения: 7419 Зарегистрирован: 15.11.04

bE(o0L, а он и работает отлично. В нормальных браузерах. Что делать, ИЕ не понимает многого в CSS.

ат чёрт. вот видишь! а потом ты настаиваешь на безтабличной вёрстке. :laugh:

17 Сообщения: 7419 Зарегистрирован: 15.11.04

bE(o0L, настаиваю! А причём тут одно с другим? Тебе именно табличные данные нужно прибить книзу? Тогда и давай их в таблицах! Безтабличные? Тогда извращайся с вёрсткой для убогого ИЕ отдельно, пока он не научится понимать CSS.

да в том то и дело, хочется универсальности, запарило уже из%быватсья над стилями.

17 Сообщения: 7419 Зарегистрирован: 15.11.04

bE(o0L, не! Я таки не понял, тебе туда табличную информацию нужно или нетабличную? Всё таки CSS это только визуализация и управление воспроизводящими устройствами, первична логическая разметка и табличное в таблицы, меню это список и т. д. А над стилями придётся из*бываться, пока либо ИЕ не исчезнет как факт, либо мелкомягкие не научат его работать в соответствии со стандартами, которые сами же в составе w3c разрабатывают. Может на ИЕ7 полегчает, да вот только для общей массы пользователей замена всё равно произойдёт нескоро.

bE(o0L, "vertical-align" прекрасно работает в IE. В IE нет свойства "table-cell". Вообще-то vertical-align предназначен для строчных элементов: выравнивание по вертикали по высоте строки. В твоем случае высота строки равна высоте ячейки.

Цитата:

Тогда извращайся с вёрсткой для убогого ИЕ отдельно, пока он не научится понимать CSS.

АААААААААА!!!! :laugh:

arlekino, это я вкурсе. мне бы так, чтобы в моём примере работало. есть идеи? или поверим Акеле?.

Акела, я не совсем принимаю понятия табличная и не табличная информация, имхо всё можно сделать и так и так. В этот блок нужно загнать чуть текста и чтобы он стоял ровно по центру. можно кнешна сделать padding`и, но если текста меньше то с низу растояние больше.
а писать что то типа:

Код:

<table непомерная требуха либо цсс>
<tr><td алигны>
Мой текст (разный)
</td></tr></table>

Ломает.
В принципе ответ я получил, дальнейшее помоему оффтоп :cool:

P.s.
ээ сорри, в первом посте align bottom, это опечатка, нужно middle

be(o0L да пожалуйста:

Код:

<style type="text/css">
#tst {
border: 1px solid #FF0000;
background-color: #CCCCCC;
height: 100px;
width: 100px;
text-align: center;
vertical-align: bottom;
display: table-cell;
} 

.lineheight {display: none;}
* html .lineheight {
display: inline-block;
line-height: 100px;
overflow: hidden;
width: 0;
height: 0;
}
span 
{
display: inline-block;
vertical-align: bottom;
}
</style>
</head>
<body>
<div id="tst">
<span class="lineheight">неразрывный пробел</span>
<span>Text is here</span>
</div>
</body>

Хрен редьки не слаще.

Гы, у меня проще получилось. вот так:

#

Код:

Tst{
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-bottom-style: solid;
   border-left-style: solid;
   border-bottom-color: ECECEF;
   border-left-color: ECECEF;
   height: 30px;
   width: 81px;
   text-align: center;
   float: left;
   font-size: 20px; /* Visota - fontsize kotorij ispolzuetsja v span */
   vertical-align: middle;
}

Ну и в хтмл'е, соответственно:

<div id='tst'>
<span class='mytext'>aaaa</span>
</div>

17 Сообщения: 7419 Зарегистрирован: 15.11.04

arlekino,

arlekino писал(а):

vertical-align предназначен для строчных элементов

- ага!

спецификация CSS2 писал(а):

arlekino писал(а):

В IE нет свойства "table-cell".

Что я и сказал:

Акела писал(а):

извращайся с вёрсткой для убогого ИЕ отдельно, пока он не научится понимать CSS.

bE(o0L, ессно, провставлять одно в другое можно, но ты же хотел "в чистую", я потому ничего подобного предлагать и не стал. А "табличная" информация это (совсем условно) та, где устанавливается соответствие "столбец-строка-значение". Ну с массивами сравни, если тебе так легче.

Акела, про vertical-align действительно ляпнул не подумав.
bE(o0L, чой-то пример не работает. Куда это вставлять и как оно работает?

DeДверь
Логин:
Пароль:
	Автологин