Отступы в IE6.

PNZ · June 15, 2008

При верстке сайта столкнулся с проблемой, не понятно откуда взялись отступы в блоках в IE6. Никакие из принятых мною мер не принесли результата. Нужно сделать рамку с закругленными концами. Для этого я использую 4 изображения закругленных концов 5х5 пикселей и 2 блока с горизонтальными линиями фиксированной ширины и высотой в 5 пикселей. Во всех браузерах отображается правильно, в IE6 блоки, хранящие картинки имеют высоту гораздо больше 5 пикселей (выделено зел?ным цветом). Чтобы лучше понять о ч?м ид?т речь взгляните в браузере.

CSS

.clear {
 clear: left;
}

#container {
 width: 944px;
 margin: 200px auto;
 height: 100%;
}

.bottom_line {
 margin: 0px;
 padding: 0px;
 border-bottom: 1px solid #CFCFCF;
 height: 4px;
 width: 934px;
 float: left;
}

.top_line {
 margin: 0px;
 padding: 0px;
 border-top: 1px solid #CFCFCF;
 height: 4px;
 width: 934px;
 float: left;
}

.round_bottom_left {
 margin: 0px;
 padding: 0px;
 width: 5px;
 height: 5px;
 background: #00FF00 url('images/round_bottom_left.gif') no-repeat bottom;
 float: left;
}

.round_bottom_right {
 margin: 0px;
 padding: 0px;
 width: 5px;
 height: 5px;
 background: #FFFFFF url('images/round_bottom_right.gif') no-repeat bottom;
 float: left;
}

.round_top_left {
 margin: 0px;
 padding: 0px;
 width: 5px;
 height: 5px;
 background: #00FF00 url('images/round_top_left.gif') no-repeat top;
 float: left;
}

.round_top_right {
 margin: 0px;
 padding: 0px;
 width: 5px;
 height: 5px;
 background: #FFFFFF url('images/round_top_right.gif') no-repeat top;
 float: left;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" href="border.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=win-1251">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<div id=container>
 <div class=round_top_left></div>
 <div class=top_line></div>
 <div class=round_top_right></div>
 <div class=clear></div>
 <div class=round_bottom_left></div>
 <div class=bottom_line></div>
 <div class=round_bottom_right></div>
 <div class=clear></div>
</div>
</body>
<html>

Заранее спасибо всем ответившим.

изображения для закруглений можно скачать тут:

http://img229.imageshack.us/my.php?image=roundtopleftdc0.gif

http://img67.imageshack.us/my.php?image=roundtoprightba7.gif

http://img77.imageshack.us/my.php?image=ro...ttomleftul6.gif

http://img234.imageshack.us/my.php?image=r...tomrightoc4.gif

ZooY · June 16, 2008

Проблемы с отступами в IE милион раз обсуждались на этом форуме...

Описание проблемы и решение смотри здась

Azadi · June 16, 2008

Демо макета рамки со скругленными углами: 2 изображения, подходит для создания блока любой ширины и высоты. Если сделать 3 изображения (разбив на 2 изображения borders.gif), то можно избавиться от парочки лишних блоков и не заморачиваться с фоном.

Sign In

Отступы в IE6.

Question

PNZ

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

ZooY

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information