верстка « CSS Guru

Архив рубрики ‘верстка’

ИЕ7 и пробелы в CSS

Четверг, 24 декабря 2009

Использовал на корпоративном сайте краткую запись правила для шрифта:


body {
    font: 81.25%/1.5 Arial, Helvetica, sans-serif;
}

На работе LINUX (не умею готовить, и потому дико не люблю), потому работаю в Хроме (быстрее) и Файрфоксе (полезнее). VMWare умерла, а восстанавливать лень, потому проверяю в ИЕ (благо основные посетители нашего сайта не ИЕ-пользователи, хотя 25% немало, но можно смотреть иногда сквозь пальцы на мелкие баги в ИЕ) от случая к случаю.
И вот тут смотрю и вижу в ИЕ7 дефолтные шрифты. Это был ИЕ8 в режиме ИЕ7. Причем встроенный тулбар показывает, что шрифт применяется какой-надо. Но на странице ни фига не Arial. Оказалось все просто.
В Eclipse есть возможность отформатировать код (хоть и не совсем удачная реализация). И в какой-то момент случайно я отформатировал CSS. И это форматирование добавило кучу пробелов и переносов строк, в том числе и перед значением LINE-HEIGHT. Получилось вот так:


body {
    font: 81.25%/ 1.5 Arial, Helvetica, sans-serif;
}

И ИЕ7 перестал понимать это правило. А мне уже стали проедать мозг из других отделов: «Что за жуткий шрифт на сайте стал?»

Так что вот. Мораль обычная: аккуратность, аккуратность и еще раз аккуратность. Как обычно, диавол прятался в мелочах.

Метки: азы css, азы верстки
Написано в CSS, верстка | Нет комментариев »

Еще раз про inline-block (коротко)

Среда, 19 августа 2009

Сегодня в очередной раз задали вопрос: как кроссбраузерно реализовать свойство inline-block. Для этого воспользуюсь хаком для ИЕ 6 и 7 версий. Это необходимо, так как ИЕ этих версий не понимает inline-block для блочных элементов, таких как DIV, LI, UL, а только для строчных (например:A, SPAN). Буду предельно краток.

.someclass{
    display: inline-block;
}

.someclass{
    //display: inline;/*магия ИЕ*/
}

Именно вот так: в таблице стилей должны присутствовать обе записи. Если же вы предпочитаете условные комментарии, то вторая запись должна быть вынесена в стили для ИЕ.
Работает в ИЕ6+, ФФ3+, Опера (даже не знаю с какой версии), Хром, Сафари, далее – везде).
Для ФФ2 нужен костыль

Метки: CSS-рецепты, CSS-хаки, inline-block, верстка, ИЕ6, ИЕ7, азы css, азы верстки
Написано в CSS, верстка | 2 комментариев »

Равномерно расположить картинки по ширине страницы

Суббота, 25 июля 2009

Бывает, возникает вопрос (по «вине» дизайнеров или заказчиков), что картинки надо расположить по ширине страницы (ну или родительского контейнера) равномерно, то есть первая (для читающих слева направо) картинка должна быть выровнена по левому краю, последняя – по правому, а остальные – находится друг от друга и от крайних на одинаковом расстоянии. Вот как-то так:

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

Создадим табличку на пять ячеек и в каждую поместим по картинке. Выровняем картинки по центру ячеек (td {text-align: center}), а таблицу растянем на всю ширину (table {width: 100%})

Сейчас между картинками одинаковое расстояние, что и требуется. И это нам необходимо сохранить. И при этом крайние картинки должны быть прижаты к краям. Для этого добавим в таблицу пустые ячейки между ячейками, в которых находятся картинки.

Как и следовало ожидать, и как и должно было произойти (такова природа таблиц: для ячеек, содержащих больше отводится большее место), пустые ячейки сжались до минимальной ширины. Поэтому для ячеек с картинками создадим класс, которому зададим свойство width:1%. Опять воспользуемся свойством таблиц: несмотря на указание ширины ячейкам, эти ячейки будут растянуты по ширине содержимого, если только таблице на задано свойство table-layout:fixed.

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

Метки: верстка, азы верстки
Написано в CSS, верстка | 2 комментариев »

Условные комментарии (conditional comments)

Воскресенье, 5 июля 2009

Вы используете условные комменарии? Конечно, вы их используете. Чтобы отделить стили для ИЕ от других и при этом сохранить валидность своего CSS. Тем самым добавляя лишние http-запросы для все еще многочисленных несчастных пользователей ИЕ. И еще в некоторой степени затрудняя себе правки стилей, если какое-либо свойство различается и для нормальных браузеров, и для ИЕ7, и для ИЕ6. Приходится править три файла, а не один. Можно забыть, запутаться, ну в общем неудобно.

Можно ли этого избежать (этого – это неудобства, лишние http-запросы и т.п.)? Да, и при этом с помощью все тех же условных комментариев! Кажется в начале года встретил на каком-то сайте (честно, не помню) подобный рецепт. Достаточно в вашем HTML с помощью условных комментариев разделить вывод в браузер BODY с различными классами. Вот как-то так:

<!--[if (!IE) | (gt IE 7)]><!-->

    <body>

<!--><![endif]-->

<!--[if IE 7]>

    <body class="ie7">

<![endif]-->

<!--[if IE 6]>

    <body class="ie6">

<![endif]-->

Пример (соответственно приведенному примеру нормальные браузеры покажут красный экран, ИЕ7 — зеленый, а ИЕ6 — синий ).

Теперь у вас есть возможность, не используя хаки и не плодя лишние файлы, править все стили в одном файле. Достаточно в стилях перед нуждающимся в корректировке для ИЕ7 или ИЕ6 свойством писать соответсвующий класс.

для нормальных браузеров:

.selector {attr: value }

для ИЕ7:

.ie7 .selector {attr: new value} - это свойство увидит только ИЕ7

ну и соотвественно для ИЕ6:

.ie6 .selector {attr: new value} - а это только ИЕ6

Вы скажете, что стили будут сильно много весить. Да, немного потяжелеют, но если у вас правильно все сверстано, то много правок не понадобится. Это раз. Второе, несколько лишних строк все-таки лучше, чем пара лишних запросов к серверу.

P.S. Единственно, что если вам приходится использовать фильтры или expression для ИЕ, то валидность CSS сохранить не удастся. Но, по-моему, важнее валидность HTML, чем CSS. Потому как валидность CSS никак не влияет на доступность сайта, а только лишь на его отображение.

Метки: CSS-рецепты, ИЕ6, ИЕ7, азы css, азы верстки
Написано в CSS, верстка | 2 комментариев »

Отступы в кнопках в ИЕ и других

Четверг, 18 июня 2009

Небольшое предисловие. Так случилось, что я подписался на сайте WSG на мейл-лист для обсуждения различных вопросов, связанных с применением веб-стандартов в ежедневной практике. Да, в этой подписке случаются интересные обсуждения, но зачастую там появляются вопросы настолько простые, что даже становится как-то неловко за авторитет уважаемой WSG. Вот и в этот раз вопрос был просто потрясающим: можно ли использовать картинку-бекграунд для кнопки с нефиксированной шириной. Но не это меня побудило меня черкануть пару строк. В одном из ответов, как лучше все сделать проскользнул совет:

Something like this (как-то так):
button {padding:2px 5px;background: #FAF9F5 url(../images/bgimg.png) repeat;line-height: 1.5;
}
then use smaller padding left/right value for IE, e.g. (и потом уменьшите отступы для ИЕ)
button {padding: 2px 1px !important}

Вот последняя строчка и вызвала мое изумление. Уважаемый подписчик WSG не знает как можно избавиться от лишних отступов по бокам в кнопках в Интернет Експлорере.

Поясню в чем дело. Интернет Експлорер в версиях до 7 включительно добавлял в кнопках (будь то input, илиbutton) справа и слева непонятные отступы, причем, чем длиннее была надпись на кнопке, тем больше отступы. Вот как-то так:

лишние отступы в кнопках в браузерах Интернет Експлорер 5-7

Тогда как в остальных браузерах (для меня это Файрфокс, Опера и Хром) все выглядит так:

отступы в кнопках в файрфоксе

Никаких непонятных отступов, все одинаково, независимо от количества знаков в надписи.

И что же делать? Как привести в чувство этот загадочный ИЕ? (далее…)

Метки: верстка, ИЕ6, ИЕ7, азы css, азы верстки
Написано в CSS, верстка | 6 комментариев »

Как расположить блок посередине?

Понедельник, 23 марта 2009

Простой вопрос, но который регулярно задают: как выровнять блочный элемент (div или table, в зависимости от того, что вы используете в качестве контейнера) посередине экрана?
Ответ как всегда прост донельзя:

Если вы работаете в режиме поддержки стандартов и не рассматриваете браузеры, старше ИЕ6, то достаточно написать блоку свойство margin: 0 auto.
Если же вы верстаете в quirks mode или в требованиях в верстке есть поддержке ИЕ 5, то вам придется для родительского, относительно вашего искомого контейнера добавить свойство text-align: center

(далее…)

Метки: азы css
Написано в CSS, верстка | Нет комментариев »

CSS Guru