неправильно отображение слоя в опере

TOREN · 11.11.2008

Привет. все браузеры вроде отображают правильно, но Opera не хочет растягивать фон заднего слоя полностью, лишь частично.
для наглядности вот страница http://rhcp.info/test/
Заднему фону синим цветом соответвует слой <div id="content">:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>xxx </title>
<link rel="stylesheet" type="text/css" href="menu.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>

</head>
<body>

<div id="content">
<div class="logo"><a href="index.html"><img src="images/logo.jpg" border="0"></a></div>
<div class="line"></div>
<div id="leftcolumn">
<div id="navi">
<div class="shapka"><img src="images/shapka_navi.gif" align="top"></div>
<div class="links">
<ul id="menu">
<li><a href="#"><span class="text">xxx</span></a></li>
<li><a href="#"><span class="text">xxx</span></a>
<ul> 
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
</ul>
</li>
<li><a href="#"><span class="text">xxx</span></a>
<ul>

<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>

</ul>
</li>
<li><a href="#"><span class="text">xxx</span></a>
<ul>

<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>

</ul>
</li>
<li><a href="#"><span class="text">xxx</span></a>
<ul>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>

</ul>
</li>
<li><a href="#"><span class="text">xxx</span></a></li>
</ul>
</div>
<div class="niz_menu"><img src="images/blok_niz.gif" align="top"></div>
<div class="poisk_shapka"><img src="images/shapka_poisk.gif" align="top"></div>
<div class="poisk">Скрипт поиск по сайту</div>
<div class="niz_poisk"><img src="images/niz_poisk.gif" align="top"></div>

<div class="opros_shapka"><img src="images/shapka_opros.gif" align="top"></div>
<div class="opros"></div>
<div class="niz_opros"><img src="images/niz_poisk.gif" align="top"></div>
</div>
</div>
<div id="rightcolumn">
<div class="about">xxx</div>
<div class="niz_about"><img src="images/niz_about.gif" align="top"></div>
<div id="news"> 
<div class="shapka_news"><img src="images/shapka_news.gif" align="top"></div>
<div class="zagolovok_news"><span class="zagolovok_date">Дата</span><span class="zagolovok_name">Заголовок новости</span></div>
<div class="soderzhanie">Сама новость</div>
</div>
<div id="top">
<div class="shapka_top"><img src="images/shapka_top.gif" align="top"></div>
<div class="top_soderzhanie">Содержание топа</div>
<div class="niz_top"><img src="images/niz_top.gif" align="top"></div>
</div>

</div>
<div class="footer"><span class="footer_text">Статистика и копирайты</span></div>
</div>

</body>
</html>

style.css

Код:

html,body {
margin: 0;
background-color: #000;
padding-top: 10px;
height:100%;
}


#content {
width: 1000px;
margin-right: auto;
margin-left: auto;
background-color: Blue;
height:100%;
}

.logo {
width: 1000px;
height: 200px;

}

.line {
height: 25px;
background: url("images/line.gif");
}

#leftcolumn {
float: left;
width: 210px;
background: url("images/fon.gif");
}

#rightcolumn {
float: left;
width: 790px;

background: url("images/fon.gif");
}

#navi {
width: 170px;
background: url("images/fon.gif");
margin-left: 15px;
margin-right: 25px;
margin-top: 13px;

}
.shapka {

width: 170px;
height: 30px;

}

.links {
width: 170px;
background: url("images/fon.gif");
}

.niz_menu {
height: 10px;
width: 170px;
margin-top: 2px;
}

.poisk {
background: url("images/back_blok.gif");
height: 37px;
width: 170px;
margin-top: 2px;
}
.poisk_shapka {
width: 170px;
height: 30px;
margin-top: 15px;
}

.niz_poisk {
width: 170px;
height: 10px;
}

.opros_shapka {
width: 170px;
height: 30px;
margin-top: 15px;
}

.opros {
background: url("images/back_blok2.gif");
height: 100%;
width: 170px;
margin-top: 2px;
}

.niz_opros {
width: 170px;
height: 10px;
}

.about {

width: 775px;
height: 176px;
margin-left: 0px;
margin-right: 7.5px;
background: url("images/fon_about.gif");

}

.niz_about {
width: 775px;
height: 16px;
margin-top: 0px;
margin-left: 0px;
margin-right: 7.5px;

}

#news {

width: 580px;
float:left;
margin-left: 0px;
margin-right: 12.5px;
margin-top: 15px;



}

.shapka_news {
width: 580px;
background: url("images/fon_news.gif");
}

.zagolovok_news {
background: url("images/zagolovok_news.gif");
margin-top: 2px;
width: 580px;
height: 30px;
}

.zagolovok_date {
color: #fff;
position: relative;
top:15%;
left: 5%;
}

.zagolovok_name {
color: #fff;
position: relative;
top:15%;
left: 35%;
}

.soderzhanie {
width: 580px;
border-left: 1px solid #7c0d00;
border-bottom: 1px solid #7c0d00;
margin-bottom: 231px;
}

#top {
width: 170px;
margin-right: 7.5px;
margin-top: 15px;

margin-left: 605px;


}

.shapka_top {
width: 170px;
height: 30px;

}

.top_soderzhanie {
background: url("images/back_blok2.gif");
margin-top: 2px;
width: 170px;
}

.niz_top {
width: 170px;
height: 10px;
}


.footer {
background: url("images/footer.gif");
height: 87px;
width: 1000px;
float: left;

}

.footer_text {
color: #fff;
position: relative;
top:55%;
left: 65%;
}

вообще не понимаю в чем проблема

nws · 06.12.2008

http://jigsaw.w3.org/css-validator/
http://validator.w3.org/

неправильно отображение слоя в опере

Ещё по теме