Сколько себя помню, во время верстки я не особо любил использовать тег <hr />, выводящий горизонтальную линию, по причине того, что в браузере Internet Explorer по сравнению с другими современными браузерами отступы (CSS-свойство margin) отличаются. Не знаю, почему я раньше не задавался целью найти ответ ...
Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems». Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью ...
Как вы уже могли заметить, страницы моего блога некоторое время назад стали «резиновыми». Довольно нетривиальная для меня, скажу я вам, ситуация, с которой, на мой взгляд, я справился лишь на четверку. Поэтому пишу данный пост с целью ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т. е. одна строка, к примеру, с белым фоном, вторая с серым, третья опять ...
Комментарии (26)
Фигасе…, сидел ведь еще вникал «в проблему», я лично этот hr уже очень давно не использую…, и без него можно прекрасно обойтись…
А что ты используешь для разделительных линий?
Да, достало постоянно модерировать отловленный спам. А с капчей этого не приходится делать.
Кстати говоря, я уж думал что hr давно упразднили.
c hr еще можно поиграться, например (http://www.sovavsiti.cz/css/hr.html)
в качестве разделительных линий либо пользовался border у контентных блоков, либо отдельный пустой div с css.
Александр, он все еще жив :)
Во-первых, если у нас имеются 2 одинаково оформленных блока и между ними нужно вставить разделительную линию, то для одного из них придется использовать дополнительный класс, чтобы прописать border.
Во-вторых, семантически верно использовать тег hr вместо пустого дива.
Конечно, более семантично использовать hr — специлизированный тег.и т. д. ) — это то же костыль и разведение программного мусора
Однако из-за разницы отображения в разных броузерах hr — не самый любимый мой тег (впрочем посмотрим).
css-ом можно поставить костыли и хаки (которые паталогически не люблю) или решить вопрос по-иному. Семантика при этом не страдает.
навскидку — такие варианты (для контентных блоков): использовать: first-child (доп. классы не нужны, а вот с ИЕ «как обычно»)
программно для первого элемента задать класс border и последнему не задавать (или прописать всем контентным блоком бордер и отбивку наверху, а первому noborder)
ps> программно — js или серверным языком (php, asp
pps> пустой разделительный див — это, конечно, ппц. такое я делал год-два назад. каюсь.
Зачем изобретать велосипед? Есть масса способов избавиться от этого тега методами css.
ElaSTiC какой здесь может быть велосипед, если hr — это стандартный хтмл-тег, предназначенный для вывода горизонтальной линии?
Интересно, Билл Гейтс пользуется своим IE?)))
Dimox, обычно обнуляю у всех элементов padding и margin, это ж обычная практика, и никаких проблем.
Еще как вариант использовать отрицательный маргины. Yuriy, в ie обнуление для hr не срабатывает.
Я не успел… lusever сказал то, что я хотел сказать про IE.
То есть проблема некорректного отображения в ИЕ решается таким образом? Вы мой спаситель!!!
Amiego, да, именно таким образом и решается.
А как зделать так что бы допустим от центра 50 пикселей отступить?
а то с помоощью етих кодов не получается у меня !
Саша, если имеете в виду горизонтальные отступы, то делается это следующим образом:
hr {margin: 0 50px;}
Добавил в избраное, очень полезная инмормация, потому как я один из немногих кто использоует повсемесно
ДИВАН, под инновационными технологиями вы что конкретно подразумеваете?
rss читатель, на здоровье ;)
Спасибо за советы! Сделать что-то кроссбраузерно — это не так просто!
а как на счет такого решения:
hr, .hr { background-color: red; height: 1px; overflow: hidden; }
hr { behavior: expression (this.outerHTML = ''); }
тогда можно задавать любой margin: 1em — например
Спасибо! Выручил, но в ИЕ я все-таки переделал на дивы