![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=92.1){kind=small}
![[info]](http://l-stat.livejournal.com/img/community.gif?v=92.1){kind=small}
Извините за длинное письмо, но никогда не сталкивался с таким, а поведение браузеров второй день не даёт мне отскрести нижнюю челюсть от пола. ;)
Имеется такой код.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<title>the site.ru: главная</title>
</head>
<body>
<a href="http://site.ru"><img src="images/homemailsearch.gif" alt="На главную" width="156" height="52"/></a><a href="http://site.ru/news.html"><img src="images/news.gif" width="51" height="52" alt="Новости" /></a><a href="http://site.ru/trans.html"><img src="images/trans.gif" width="124" height="52" alt="Переводы" /></a><a href="http://site.ru/vliyaniya.html"><i
<!-- Это панель навигации -->
<img src="images/indexlogo.gif" alt="Logo" height="399" width="763" />
<!-- это логотип раздела -->
<div class="pere"><a href="http://site.ru/perevody1.html">П
<div class="stripe"><img src="images/blackstripe.gif" alt=" " width="49" />
</div>
<!-- А это — навигация в пределах раздела. blackstripe.gif — конструкционный элемент, чёрная горизонтальная полосочка. -->
<!-- далее идёт четырёхколоночная вёрстка; в 1-й и 3-й колонке — картинки, во второй и четвёртой, соответственно, текст. -->
<div id="theother"><img src="images/theother.gif" width="50" height="138" alt="the Other" /></div>
<div id="leftcontent"><p /> На днях в США произошло знаменательное событие, которому пока не придали должного внимания в мире. А зря. Президент Джордж Буш фактически расписался в том, что США переживают тяжелый экономический кризис и что властям приходится прилагать титанические усилия, чтобы избежать социального взрыва.
</div>
<div id="fields"><img src="images/fields.gif" width="50" height="138" alt="fields" /></div>
<div id="rightcontent"><p /> На днях в США произошло знаменательное событие, которому пока не придали должного внимания в мире. А зря. Президент Джордж Буш фактически расписался в том, что США переживают тяжелый экономический кризис и что властям приходится прилагать титанические усилия, чтобы избежать социального взрыва.
</div>
</body></html>
CSS:
body {
background-color: #FFFFFF;
color:#000000;
margin:0;
padding:0;
font-family:'Verdana',sans-serif;
font-size:11px;
}
div {
border:0;
}
div.pere {
margin-left:24%;
}
div.stripe {
left:210px;
position:absolute;
}
#leftcontent, #rightcontent, #theother, #fields {
margin-top: 10px; }
#theother {
position: absolute;
left:0%;
width:50px;
background:#fff;
}
#leftcontent {
position: absolute;
left:90px;
width:37%;
background:#fff;
}
#fields {
position: absolute;
left:52%;
width:50px;
background:#fff;
}
#rightcontent {
position: absolute;
left:63%;
width:35%;
background:#fff;
}
#leftcontent p {
text-align: justify;
margin-top: 40px;
}
#rightcontent p {
text-align: justify;
margin-top: 40px;
}
#pere {
left:5%;
}
Суть проблемы вот в чём. После всего вышеперечисленного, после четырёхколоночной вёрстки должна идти, например, ещё раз навигация в пределах раздела, только та самая чёрная полосочка теперь находится над ссылками. Типа:
<div class="stripe"><img src="images/blackstripe.gif" alt=" " width="49" />
</div>
<div class="pere"><a href="http://site.ru/perevody1.html">П
Логично было бы, чтобы и полоска, и навигация отображалась НИЖЕ, чем четыре колонки. Однако нет! Вторую, дублирующую навигацию с полосочкой оба браузера отображают, как ни странно, ещё выше первой!
Так же происходит с любым текстом и изображением, помещённым в коде ниже четырёх колонок... Он почему-то упорно лезет вверх, перед ними.
Что делать? И как объяснить такое странное, и, я бы сказал, нелогичное поведение? Или я чего-то сильно не понимаю? Внесите ясность, пожалуйста.
Спасибо тем, кто дочитал до сюда, и ещё раз извините за длинное письмо. Жду ваших ответов!
