HR - отступы, цвет

Ladoga · June 13, 2007

Подскажите, плиз, как сделать, чтобы у тэга

не было отступов - нужно чтобы линия плотно прилегала к верхнему бордеру div-а, в котором находится.

Margin и padding помогают, но только не для IE :/

SkyLight · June 13, 2007

А почему нельзя просто у DIV'а верхнюю рамку изобразить?

Ladoga · June 13, 2007

У div-а есть верхний бордер (например, красный). А под ним должна быть еще полоска - потолще и другого цвета и должна плотно примыкать к красной.

yopopt · June 13, 2007

У тега

нет цвета! Вернее есть только в представлении ie. Так что лучше создайте вложенный див с border нужной толщины, нужного цвета и в нужном месте.

strix · June 13, 2007

В зависимости от дизайна - можете создать фоновую картинку с двумя полосками и не нужно будет делать дополнительный div.

Ladoga · June 13, 2007

У тега
нет цвета! Вернее есть только в представлении ie. Так что лучше создайте вложенный див с border нужной толщины, нужного цвета и в нужном месте.

Ну почему же.. Его легко задать с помощью color (для IE) и background-color (для FF и др.). На этом же сайте прочла

В принципе конечно можно создать еще один div - не проблема, но меня интересовал вопрос именно касательно

.

coldman · June 13, 2007

смотрим пример

http://tapazukk.net/coding/hr-in-ie/

Ladoga · June 13, 2007

Все равно не получается Отступ сверху никуда не делся.

yopopt · June 13, 2007

Ну почему же.. Его легко задать с помощью color (для IE) и background-color (для FF и др.). На этом же сайте прочла

В доках (http://www.w3.org/TR/html401/present/graphics.html#h-15.3) ничего такого не наблюдаю, но работает. Спасибо, буду знать.

Tokolist · June 13, 2007

2 Ladoga

Ну если сильно хочется, то...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title></title>
<style type="text/css">
* {
 padding: 0;
 margin: 0;
}

div {
 border-bottom: 1px solid green;
}

hr {
 clear: both;
 border: none;
 color: red;
 background-color: red;
 height: 2px;
}


</style>

<!--[if IE]>
<style type="text/css">
hr {
 margin-top: -7px;
}
</style>
<![endif]-->

<body>
<div>
test
</div>
<hr>
</body>
</html>

Ladoga · June 15, 2007

test

Tokolist · June 15, 2007

Да, так получается. Только вот снизу добавляется совсем ненужный и довольно большой отступ...

Хочу Вас только предупредить, что такая верстка - извращение

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title></title>
<style type="text/css">
* {
 padding: 0;
 margin: 0;
}

div {
 border-bottom: 1px solid green;
 border-top: 1px solid green;
}

hr {
 height: 2px;
 border: none;
 color: red;
 background-color:red;
}
</style>

<!--[if IE]>
<style type="text/css">
hr {
 display: block;
 margin-top: -7px;
 margin-bottom: -7px;
}
</style>
<![endif]-->

<body>
<div>
test
</div>
<hr>
test
</body>
</html>

gordi · June 17, 2007

html

css

.hr {

background:#999daf;

margin:0 3px;

height:1px;

}

.hr hr {display:none;}

Все браузеры у ваших ног

Sign In

HR - отступы, цвет

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information