Горизонтальный разделитель <hr />
Существует элемент <hr />. Существует он для логического разделения блоков текста. Используется в том случае, если нужно разделить некоторый текст, а подзаголовок неуместен или необязателен. Именно поэтому следует использовать именно этот элемент, а не заменители, на подобие <div class=”hr”></div>
Всемирно известная проблема (я говорю об MS IE) отображает горизонтальный разделитель с дополнительными отступами, причём, такое ощущение, что эти отступы прописаны ему на более низком уровне, не поддаваемом изменению с помощью css. Поэтому, чтобы сделать кроссбраузерные отступы у этого элемента, приходится идти на всяческие ухищрения.
Прочитав пару материалов по этому поводу (Тег <hr /> и кроссбраузерный отступ, A HaRd challenge – Styling An HR Element) и проанализировав, выяснил, что можно решить проблему кроссбраузерно.
Дмитрий Лялин, предлагал не лишать разделитель отступов, а наоборот, оставить, но везде сделать одинаковые. В теме A HaRd Challenge – Styling An HR Element предлагают убрать их вообще.
Собственно, получаем первое решение — без отступов:
hr {
border: 0;
color: red;
height: 5px;
background-color: red;
display: block;
margin: 0 !important;
margin: -4px 0 -10px 0;
}
Заметьте, для исправления представления в IE6, я предлагаю вместо хакков и Conditional Comments использовать !important. Для всех браузеров кроме IE6 эта строчка будет приоритетной. А на следующей строчке можем написать исправление для IE6, который будет игнорировать !important.
margin: -4px 0 -10px 0;
эта строчка произвольная. Нет лекарства в виде какого-то точного значения. При изменении высоты строки, меняются и отступы в IE. И предлагаемый комментаторами в теме A HaRd Challenge – Styling An HR Element вариант -7px годится лишь для того, чтобы можно было использовать border для верхнего и нижнего элемента без залезания на разделитель. Мой вариант был для меня самым оптимальным для высоты строки 36px, с которой я экспериментировал.
display: block — предназначен для того, чтобы в IE6 сработал верхний отрицательный margin.
color: red — чтобы границы в IE стали красными, а то они какие-то серенькие.
Но всё-таки осталась проблема — IE7. Он как и IE6 устанавливает для <hr /> отступ в 7px, но в отличае от IE6, он понимает свойства с флагом !important (правда только в standart mode. Если убрать doctype, то IE7 резко тупеет). Придётся использовать хакки или Conditional Comments. Последние предпочтительнее, например, потому что известный хакк для IE7:
*+html hr { ... }
работает и для IE8 для которого исправления не требуются.
Ещё одна проблема безотступного <hr /> — налезание тех самых 7 пикселов на следующий за ним блок в IE6 и IE7, что не позволяет использовать для этого блока border иначе граница выглядит слегка порубленной.
Вот что в итоге получилось:
Borders я добавил для наглядности, если их отключить — выглядит на порядок красивше.
В общем, если вам не нужны отступы или нужны, но менее 7px — используйте вышеприведённый пример, а если вы не против отступов у горизонтального разделителя от 7px и более, то используйте следующий вариант:
hr {
border: 0;
color: red;
height: 5px;
background-color: red;
margin: 7px 0;
*margin: 0;
}
*margin: 0 — хак для IE6 и IE7 который будет игнорироваться браузером IE8. Но лучше так не делать. Лучше все исправления записывать в отдельный файл и подключать с помощью Conditional Comments. Мало ли что…
]]>Dimox]]>Неприятная для меня новость
Я его частенько использую. Эх… этот гребаный ИЕ. С каждой версией добавляет новых проблем…
»]]>pepelsbey]]>Мне больше нравится такой вариант исправления:
<div class=”hr”><hr/></div>
»…
.hr HR { display:none }
]]>Никита]]>Dimox, парадокс — соблюдение стандартов улучшилось, а проблем прибавилось
»pepelsbey, весьма удивлён, особенно учитывая тот факт, что ты пишешь о семантически правильной разметке. Вот как оправдать такой вариант? Ведь это в десять раз больше кода, нежели использовать просто <hr /> и смысла в этом блоке нет никакого. Разве это блок? Это же разделитель.
]]>Dimox]]>Я, кстати, тоже практикую вариант, который указал pepelsbey. С ним проще.
»]]>pepelsbey]]>Как сказано выше, этот вариант действительно в разы проще, чем «если отступы такие, то вот так, а если другие, то вот так…», хоть он и не слишком удобно вписывается в светлую идею семантической вёрстки.
Кстати, можно попробовать вариант с генерируемым содержимым/expression’ами, чтобы прятать наш HR, а уже после дописывать элементы, которые проще оформить.
»]]>Никита]]>Проще не значит лучше. В любом случае, я преложил вариант. Ваше дело, что использовать. Но вставить код один раз в свой reset.css и забыть, что может быть проще?
»]]>pepelsbey]]>> В любом случае, я преложил вариант
Ну почему же, инициатива очень хорошая, мне просто кажется, что это чересчур сложное и перегруженное хаками решение не слишком существенной проблемы. Но если столкнусь с чем-нибудь подобным в практике — обязательно попробую.
»]]>Repka]]>Кстати, использовали данный вопрос на собеседовании, если человек знает, как сделать <hr> однопиксельной полоской красного цвета, уже говорит о многом.
А этот вариант меня улыбнул:
<div class=”hr”><hr/></div>
.hr HR { display:none }
почему бы не сделать просто:
»<div class=”hr”><!– –></div>
]]>Seleckis.lv :: журнал Никиты Селецкого » » Reset CSS]]>[...] этом я писал в предыдущей статье. ol li, ul li{ vertical-align: bottom; [...]
»]]>pepelsbey]]>> почему бы не сделать просто: <div class=”hr”><!– –></div>
Потому, что мы тут вроде как пытаемся использовать логичную разметку. А комментарий внутри пустого элемента нужен только для HTML Tidy (на основе него построен плагин для FF), официальный валидатор благосклонен к абсолютно пустым элементам.
»]]>webmolot]]>Однозначто согласен с Никитой.
»Контент-менеджер забивает инфу в сайт и ему нужно разделить текст. Он очень обрадуется, когда после вставки простого семантического тега hr текст разделится красивой стилизованной линией.
]]>Octane]]>2 webmolot: для таких случаев применяют bb-коды.
»Вариант, предложенный pepelsbey по моему лучший, конечно больше кода, но CSS в этом случае останется “чистым”. Да и например ситуация с <code><pre></pre></code> на всех форумах из-за невозможности кросбраузерно задать через CSS preformated текст, контент менеджер тоже не будет вводить <code><pre></pre></code>… здесь обсуждается как сделать, и как сделать рациональнее
]]>Никита]]>Octane, bb коды? Вы в каком веке живёте?
»CSS останется чистым, зато HTML будет замусорен. А чистота HTML важнее чистоты CSS, поскольку это в большей степени влияет на трафик.
Насчёт code и pre не понял, можно выразиться яснее?
]]>Octane]]>причом тут время и bb-коды?) просто так выразился, думал идея будет ясна, имел ввиду, что нужно использовать обработку введенного текста по средством форматирования его при помощи bb-кодов или как в вордпрессе, например, обрабатывать разрешенные хтмл теги, чтобы всякие контент-менеджеры не ужасались от мысли о том, что им придеццо вводить страшную конструкцию <div><hr /></div>.
»А про <code><pre></pre></code>…, ну обычно используют такую конструкцию <code>Language:<pre class="language"></pre></code> для подсветки синтаксиса, такую штуку уж точно никакой контент-менеджер не осилит
]]>Никита]]>Octane, с контент-менеджерами это другой вопрос. Они вообще не должны видеть тэги.
»]]>Vladimir]]>> *+html hr { … } работает и для IE8
*+html/*/* /**/ body hr {}, если нужен только 7-й Ишак.
Будет желание – читайте
> Кстати, можно попробовать вариант с генерируемым содержимым/expression’ами
Честно говоря, это извращение – использовать скриптинг в CSS, да еще и для вставки всякого мусора
Тем более, что ИЕ вправе так поступать с отступами, ибо Sola Scriptura гласит, что “The amount of vertical space inserted between a rule and the content that surrounds it depends on the user agent.”
Лично по мне, если у IE проблема с нормальным отображением, то это лично проблема IE, и она не стоит того, чтобы с ней бороться тяжелой артиллерией. Если отступ не критичен – фиг с ним, если он рушит пресловутый pixel perfection – тогда другое дело (и решение Никиты мне здесь ближе)
> <code><pre></pre></code>
»Не прокатит, code строчный, а pre блочный. Нужно наоборот.
]]>Никита]]>Vladimir, спасибо за хаки, хотя я не люблю это дело.
> The amount of vertical space inserted between a rule and the content that surrounds it depends on the user agent
»В который раз разочаровываюсь в W3C.
]]>Archik]]>Ктонить скажет – вместо него картинку запихал… (CMS)
»В css шаблоне написал:
hr {
display:none;
height: 5px;
width:156px;
height:22px;
background: url(line.jpg);
border: 0px !important;
}
но в Ишаке – 7 граница всеровно показывается, перепробывал почти все…
но бордер все ровно вокруг картинки, как исправить?
Заранее спасибо!
]]>алмазик]]>Извините, если скажу чушь, но по-моему display: block просто таки заставляет прописать для ие font: 0/0 tahoma. Или нет?
»]]>Никита]]>Archik, border: none;
»алмазик, нет.
]]>plx]]>Полезно знать про пресловутые 7px в ie. Так что вот вам стили для HR.
{width: 100%; display: block; margin: 0; height: 1px; color: red; background-color: red; border: none; //margin: -7px 0}
На мой взгляд, лучшее средство для сброса float-ов разделить плавающие блоки таким hr. (и добавить ему clear:both)
»]]>Никита]]>plx, а чем это особо отличается от моего кода? Те же яйца, только в профиль.
Для сброса float-ов, это не лучший способ.
»