Все наверно знают про тег hr (кто не знает тем сюда http://htmlbook.ru/html/hr.html)
Он используется для смыслового разделения контента, но плохо вписывается в дизайн.
Дело в том, что на данный момент даже самые последние браузеры по-разному воспринимают задание цвета hr через CSS, также он ставит margin который тоже зачастую бывает не нужен.
С приходом CSS тег font стал бесполезен, т.к все можно задать через css. А почему же мы тогда все еще пользуемся “кривым” hr?
К сожалению совсем без тега обойтись не получится 🙂 Поэтому как контейнер мы берем тег DIV
будем создавать разделитель высотой в 2х состоящий из 2-х цветов (для красоты), поэтому прописываем для класса separator вот такой стиль:
background:#0033CC;
border-top:1px solid #FFCC00;
font-size:1px;
height:1px;
overflow:hidden;
width:200px;
}
Но тут есть один момент. Все нормальные браузеры уже показывают 2-х пиксельную полоску, а IE все еще нет. Проблему может решить установка DOCTYPE:
Либо написание выражения, которое понятно только IE:
background:#0033CC;
border-top:1px solid #FFCC00;
font-size:1px;
height:1px;
height:expression(‘2px’);
overflow:hidden;
width:200px;
}
Все таки советую всегда устанавливать DOCTYPE, потому как
Если же вы хотите сделать разделитель высотой в 1 пиксель, то можно использовать такой стиль (без border):
background:#0033CC;
font-size:1px;
height:1px;
overflow:hidden;
width:200px;
}
Автор: Петров Е.В (phpcode.ru)
