Границы и рамки

Спецификация CSS описывает несколько свойств, с помощью которых можно создавать границу вокруг различных элементов и управлять ее видом. Границы – одна из наиболее слабых сторон CSS, т.к. браузеры содержат большое количество ошибок и по разному интерпретируют параметры. Старшие версии браузеров отображают рамки вокруг элементов более корректно.

NC – Netscape Communicator, IE – Microsoft Internet Explorer, Op – Opera; 4+ означает, что свойство поддерживается в браузере 4 версии и выше.

Типы рамок

Для управления видом рамки предоставляется восемь значений параметра border-style. Результат их действия представлен на рисунке 1.

Рис.1. Стили рамок

Первые две – dotted и dashed стали поддерживаться браузерами Netscape и Internet Explorer только со старших версий.

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

Чтобы установить границу определенной толщины и цвета, удобней использовать параметр border, который задает сразу несколько значений через пробел.

В примере используется двойная рамка, толщина которой складывается из толщины линий и расстояния между ними. Чтобы рамка не соприкасалась с текстом, задан отступ от рамки до содержимого параметром padding.

Грог по-рыбацки
1 рыбу залить кипятком, через 5 минут процедить и добавить грога. Подавать в чашках.

Особенности браузеров

1. Netscape 4 плохо работает с рамками таблиц. На рис. 2 представлена рамка, которая получается в других браузерах, а на рис.3 рамка (точнее ее отсутствие) в Netscape 4.x.

Рис.2. Рамка в Internet Explorer и Opera	Рис. 3. Рамка в Netscape 4.x

При этом для параграфа, тега DIV и других элементов рамки показываются. Возникает соблазн использовать тег DIV (или SPAN) совместно с ячейками таблицы. Однако и тут нас ожидает разочарование, поскольку рамка будет рисоваться строго по содержимому элемента. Так, если указать ширину ячеек, поместить внутри них тег DIV, в стиле которого задать рисование рамки, то ширина ячеек изменится так, словно этот параметр и не задавался (рис. 4).

Рис. 4. Итоги использования тега DIV внутри ячеек таблицы

Это не таблица получается, а калькулятор какой-то!
Также Netscape 4.x не может устанавливать цвета границ индивидуальных сторон элемента.

2. Internet Explorer 4/5 корректно работает с блочными элементами, такими, как параграф и таблица, но не умеет устанавливать отступы и рамки для встроенных элементов, например, тега SPAN.

Хвангур
Сварить на медленном огне воду. Добавить в нее хлива и хрольва. Довести до кипения.