LINUX.ORG.RU

[HTML][CSS] Вертикальные строки


0

2

Заголовок таблицы надо сделать вертикальным. Хуже того, это должно быть в IE. Включил в стиль writing-mode: bt-rl, но внезапно проявилась особенность. Если включить строгий режим отображения, ширина вертикальной строки остаётся настоящей, как если бы она оставалась горизонтальной. Не схлопывается до 1em. Высота же просто устаналивается в размер всего viewport. Погуглил, понял что это как бы фича. Вопрос - можно ли эту фичу перебороть? Поставить фиксированную ширину, и запретить раздвигать границы?

Линукс тут почти ни при чём, разве что IE можно запустить в вайне.

А строгий режим отображения нужен, потому что дальше я буду бороться с position: fixed, а в режиме совместимости это уж точно не работает.

★★★★★

А вручную ширину указать никак? Ты б хоть пример кода то выложил куда…

Deleted ()
Ответ на: комментарий от Deleted

Ширину нельзя задать меньше минимальной.
Код сейчас резать не буду, делая маленький пример, просто надо сделать класс
.vertical {
writing-mode: tb-rl;
}
И собственно для td-элементов в заголовке таблицы прописать этот класс. Да, в начале документа написать
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd«>

В IE8 выглядит... в общем, выглядит.

Xellos ★★★★★ ()

То ли я туплю, то ли в Опере это свойство работает только в SVG. В Fx5… тоже не видно.

Deleted ()
Ответ на: комментарий от Deleted

Это свойство из css3. В опере и фоксе личные костыли обеспечивают аналогичный результат, кажется o-transform и moz-transform.
А вот IE ещё с версии 5.5 оказывается умел менять направление.

Увы, мне нужен именно IE. Я подумал - можно развернуть не блок, а только текст (нет под рукой, как это делается в IE, это опять же его личный костыль, я с его помощью разворачиваю текст «снизу вверх»). Только вручную придётся выставить размеры блока, иначе текст с чистой совестью лезет куда ему вздумается.

Xellos ★★★★★ ()

В проектах используется так:

div.vertical
{
    /*
     *  IE 5.5 и выше
     *    http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx
     */
    writing-mode: tb-rl;
    filter: flipH() flipV();

    /*
     *  Safari/Chrome function
     *  Safari 3.1 и выше; iPhone OS 2.0 и выше  
     *    http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
     */
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: top left;

    /*
     *  Gecko 1.9.1 и выше (Firefox 3.5 / Thunderbird 3 / SeaMonkey 2)
     *    https://developer.mozilla.org/en/CSS/-moz-transform
     */
    -moz-transform: rotate(270deg);
    -moz-transform-origin: top left;
    
    /*
     *  Opera-10.50 и выше
     *    http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
     */
    -o-transform: rotate(270deg);
    -o-transform-origin: top left;
}
Что там по поводу ширина<->высота в IE было - не помню.

Ja-Ja-Hey-Ho ★★★ ()

>Поставить фиксированную ширину, и запретить раздвигать границы?

table-layout: fixed;

Tigger ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.