Проблем със удвояване на див

ystefanov

Registered
Имам 3 дива, като горния и долния се удвояват и се получава изместване. Как мога да избегна това удвояване.

3.jpg


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
.content {width: 515px; height: auto; float: left; border: 1px solid blue;}

.top {width: 515px; height: 10px; background-image:url(http://web-tourist.net/project/ystefanov/top.jpg); background-repeat: no-repeat;}

.middle {width: 515px; height: auto; background-image:url(http://web-tourist.net/project/ystefanov/middle.jpg); background-repeat: repeat-y; }

.bottom {width: 515px; height: 10px; background-image:url(http://web-tourist.net/project/ystefanov/bottom.jpg); background-repeat: no-repeat}

</style>
</head>

<body>
<div id="right">
<div class="content">
<div class="top"></div>
<div class="middle">
hgjghjg
</div>
<div class="bottom"></div>
</div
></body>
</html>
 
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
.content {width: 515px; height: auto; float: left; border: 1px solid blue;}

.top {width: 515px; height: 10px; background-image:url(http://web-tourist.net/project/ystefanov/top.jpg); background-repeat: no-repeat;}

.middle {width: 515px; height: auto; background-image:url(http://web-tourist.net/project/ystefanov/middle.jpg); background-repeat: repeat-y; }

.bottom {width: 515px; height: 10px; background-image:url(http://web-tourist.net/project/ystefanov/bottom.jpg); background-repeat: no-repeat}

</style>
</head>

<body>
<div id="right">
<div class="content">
<div class="top"></div>
<div class="middle">
hgjghjg
</div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
Имаш един незатворен div
 
Имаш един незатворен div

Вярно е пропуснал съм го, но това за съжаление не ми оправи растоянието което се получава след div top и bottom :?
 
.top {width: 515px; font-size:0px; line-height:0px; height: 10px; background-image:url(http://web-tourist.net/project/ystefanov/top.jpg); background-repeat: no-repeat;}

И за другия див така.
 

Back
Горе