HTML - Долой тег hr из html разметки

Статьи > HTML - Долой тег hr из html разметки

Все наверно знают про тег hr (кто не знает тем сюда http://htmlbook.ru/html/hr.html)
Он используется для смыслового разделения контента, но плохо вписывается в дизайн.
Дело в том, что на данный момент даже самые последние браузеры по-разному воспринимают задание цвета hr через CSS, также он ставит margin который тоже зачастую бывает не нужен.

С приходом CSS тег font стал бесполезен, т.к все можно задать через css. А почему же мы тогда все еще пользуемся “кривым” hr?

К сожалению совсем без тега обойтись не получится :) Поэтому как контейнер мы берем тег DIV

будем создавать разделитель высотой в 2х состоящий из 2-х цветов (для красоты), поэтому прописываем для класса separator вот такой стиль:

.separator {
  background:#0033CC;
  border-top:1px solid #FFCC00;
  font-size:1px;
  height:1px;
  overflow:hidden;
  width:200px;
}

Но тут есть один момент. Все нормальные браузеры уже показывают 2-х пиксельную полоску, а IE все еще нет. Проблему может решить установка DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Либо написание выражения, которое понятно только IE:

.separator {
  background:#0033CC;
  border-top:1px solid #FFCC00;
  font-size:1px;
  height:1px;
  height:expression(‘2px’);
  overflow:hidden;
  width:200px;
}

Все таки советую всегда устанавливать DOCTYPE, потому как

Если же вы хотите сделать разделитель высотой в 1 пиксель, то можно использовать такой стиль (без border):

.separator {
   background:#0033CC;
   font-size:1px;
   height:1px;
   overflow:hidden;
   width:200px;
}

Автор: Петров Е.В (phpcode.ru)

Статьи Статьи

При копировании информации,

ссылка на источник (phpcode.ru) желательна