body {font: 12px Verdana, Sans-serif; color: #545454; }
#container {width:650px; margin: 10px auto; background-color: #fff; color: #545454; line-height: 130%; }
#top {margin: 0px; padding: .5em; background-color: #107C91; border: 1px solid #E2E2E2; }
#top h1 { padding: 0; margin: 0; color: #FFFCFF; text-align: center; FONT-SIZE: 110%; }
#top h1 A {FONT-SIZE: 130%; COLOR: #F9FCFF; text-decoration: none}
#content { margin-left: 170px; border-left: 1px solid #107C91; margin-top: 20px; padding: 0 15px 15px 15px; max-width: 36em; }
#content h2, h3 { font-size: 130%; color: #067084; margin: 0; padding: 0}
#content h4 { font-size: 115%; color: #067084; margin: .5em 0 .5em 0; }
#leftnav { float: left; width: 170px; margin-top:20px; padding: 0 20px 0 0; }
#leftnav p { margin: 0 0 1em 0; }
#leftnav p.top { background-color: #E2E2E2; padding: 5px; }
#leftnav p.middle { background-color: #EEEEEE; padding: 5px; }
#leftnav p.last { background-color: #EEEEEE; padding: 5px; }
.ad {padding: 0px; }
.ad A { color: #0000FF; text-decoration: none}
.hd {font-weight: bold; font-size: 100%; color: #628c2a; }
#footer { clear: both; margin-top: 20px; padding: .5em; color: #545454; background-color: #fff; border-top: 1px solid #107C91; font-size: 10px;}
#footer A {text-decoration: none}
.post-link {padding: 10px 0 10px 0; margin-bottom: 20px; }
.question { margin: 5px 0 25px 0; font-style: italic;}
pre {margin: 10px; background: #EEEEEE; padding: 10px 5px 10px 5px; font-size: 10px; overflow:auto; }
* html pre { overflow: scroll; width: 540px;}
--------------------
<html>
<head>
<title>титл</title>
<link rel="stylesheet" href="sub.css" type="text/css">
</head>
<body>
<div id="container">
<div id="top">
<h1>Заголовок</A></h1>
</div>
<div id="leftnav">
<div class="ad">
<p class="top">
текст текст текст
</p>
</div>
<div class="ad">
<p class="middle">
<span class="hd">текст текст текст</span><br>
текст текст текст
</p>
</div>
<!--<p class="last"></p>-->
</div>
<div id="content">
<h3>текст текст текст</h3>
<OL>
<li>текст текст текст</li>
<li>текст текст текст</li>
<li>текст текст текст</li>
<li>текст текст текст</li>
</OL>
<H3>текст текст текст</H3><br>
текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст текст текст тексттекст текст текст текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст
<br /><br />
<H4>текст текст текст</H4>
<p>
текст текст тексттекст текст тексттекст текст тексттекст текст текст
<div class=post-link>
<a href="???" target="_blank">Оставить комментарий</a>
</div>
</p>
<H3>текст текст текст</H3><br>
текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст текст текст тексттекст текст текст текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст
<br /><br />
<H4>текст текст текст</H4>
<p>
текст текст тексттекст текст тексттекст текст тексттекст текст текст
<div class=post-link>
<a href="???" target="_blank">Оставить комментарий</a>
</div>
</p>
<H3>текст текст текст</H3><br>
текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст текст текст тексттекст текст текст текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст
<br /><br />
<H4>текст текст текст</H4>
<p>
текст текст тексттекст текст тексттекст текст тексттекст текст текст
<div class=post-link>
<a href="???" target="_blank">Оставить комментарий</a>
</div>
</p>
</div>
<div id="footer">
©
</div>
</div>
</body>
</html>
Проблема с отображением текста в браузерах при использовании CSS-блоков
Сверстал страничку на CSS, используя дивы. Но вот незадача: в браузере FireFox текст смещается и выглядит это некрасиво, впрочем как и в IE. Вот скриншот:
Красной стрелкой отмечено прилипание фона левого блока к границе правого блока. А внизу пунктиром отмечено различные отступы текста из-за фоновых блоков.
Вот код CSS и HTML:
Буду очень благодарен за помощь в устранении такого разнобоя в отображении страницы в этих браузерах. Спасибо.
Красной стрелкой отмечено прилипание фона левого блока к границе правого блока. А внизу пунктиром отмечено различные отступы текста из-за фоновых блоков.
Вот код CSS и HTML:
Код:
Буду очень благодарен за помощь в устранении такого разнобоя в отображении страницы в этих браузерах. Спасибо.