Старый добрый hr (horizontal rule) нередко используется для смыслового разделения контента. Но он зачастую плохо вписывается в дизайн конкретного сайта, поэтому уже давно у него существуют атрибуты noshade, size, align, color (детище Miscrosoft, нет в спецификации HTML 4) и width. Все перечисленные атрибуты являются deprecated, вместо них предпочтительно использовать CSS.

Старый добрый hr (horizontal rule) нередко используется для смыслового разделения контента. Но он зачастую плохо вписывается в дизайн конкретного сайта, поэтому уже давно у него существуют атрибуты noshade, size, align, color (детище Miscrosoft, нет в спецификации HTML 4) и width. Все перечисленные атрибуты являются deprecated, вместо них предпочтительно использовать CSS.

Тут возникают проблемы. Дело в том, что на данный момент даже самые последние браузеры по-разному, скажем, воспринимают задание цвета hr через CSS. Согласно докам на сайте Opera, цвет hr якобы определяется не свойством color (как в Internet Explorer 4+ и Netscape Navigator 6+), а свойством background. Ха, как бы не так! На практике оказалось, что Opera 5.x ни в какую не хочет окрашивать горизонтальный разделитель ни через свойство color, ни через background:

hr {
background:#CCCCCC;
color:#CCCCCC;
height:1px
}

Из всего вышеприведённого Opera правильно понимает только height:1px.

Но недавно мне подсказали, как заставить Opera 5.12 и выше окрасить-таки hr в нужный цвет. Делается это добавлением свойства border-top:

hr {
background:#CCCCCC;
border-top:1px solid #CCCCCC;
color:#CCCCCC;
height:1px
}

Полученный стиль правильно работает в Internet Explorer 4+, Netscape Navigator 6+, Opera 5.12 и выше. Netscape Navigator 4.x, разумеется, плевать на стилевое определение hr.

Ну ладно, с CSS похоже разобрались. Поскольку же эта заметка помещена в раздел «HTML», то я хочу привести несколько альтернативных вариантов задания разделителей. Работают они в более широком диапазоне браузеров.

Условие задачи: с помощью одного только HTML смастерить горизонтальный разделитель, который бы занимал 100% ширины окна, высота разделителя должна быть 1 пиксель, цвет — серый (#CCCCCC).

1й вариант решения:

2й вариант решения (в NN6 высота разделителя получается 2 px, а не 1):

3й вариант решения:

Автор: Шуркаев Александр Владимирович
Источник: Заметки HTML кодера

Источник: http://ice-studio.com.ua/articles.php?news_id=149