Извращение ли <hr> через CSS?

Автор VVVas, 07 апреля, 2005, 21:24:35

« назад - далее »

VVVas

.line { width: 75%; text-align: center; }
Такой вот класс для <hr>, чувствую что можно сделать более культурно, не подскажете как?
И как через задать толщину <hr>? наподобие <hr size="1">.

abram4

#1
Из статьи Кулинарные рецепты CSS :
ЦитироватьКак задать стиль для hr?
Internet Explorer и большая часть css-совместимых броузеров (например, на основе Gecko, Opera имеет одну странность, которую документировал Stefan M. Huber) работают с hr по-разному. Суть в том, что IE обрабатывает его как строчный элемент, а прочие - как блочный. Поэтому, для горизонтального разделителя красного цвета мы делаем:

Internet Explorer:
HR { color: #F00; }

Прочие CSS-совместимые броузеры: HR { background-color: #F00; }

Тоже самое верно и для выравнивания:

Internet Explorer:
HR { text-align: right; }

Прочие CSS-совместимые броузеры:
HR { margin-right: 0; }

Итак, достичь с помощью css того, что в html выглядит как

<hr align="right" width="30%" size="2" color="#000F00" noshade>

...вы можете следующим образом:

HR { text-align: right; width: 30%; height: 2px; color: #F00; border: none; } /* Для IE */

HTML>BODY HR { margin-right: 0; width: 30%; height: 2px; background-color: #F00; border: none; } /* Для броузеров на базе Gecko */

HTML>BODY HR { margin-right: 0; width: 30%; height: 2px; background-color: #F00; border: 0px solid #F00; } /* Для Оперы и броузеров на базе Gecko */

Для более подробной информации по этой теме читайте статью Marek Prokop "Styling <hr>"
З.Ы.
Вспомнив про кроссбраузерность, скажу не в тему - ГЫ !  :crazy:

VVVas

Спасибо, не для себя, но заюзал.