Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Верхний отступ div-а в IE8


Автор: lasalexx 10.11.2009, 11:45
Вобщем обнаружил что сайт портится в IE8. у элемента DIV сверху появляется отступ.

Код

<div id="cheader">
      <div id="clogo"><a href="#"><img src="images/logo.jpg" width="156" height="120" border="0" alt="" /></div>
      <div id="ctopright">
        <div id="ctoplinks">
          <a href="#">Home</a>
          <a href="#">Site map</a>
          <a href="#">Contact</a>
          <div class="clrdiv"></div>
        </div>
        <div class="clrdiv"></div>
      </div>
      <div class="clrdiv"></div>
</div>


Код

#cheader {
    background:url(images/greenline.gif) repeat-x left bottom;
    height:140px;
    margin-bottom:9px;
    }
#clogo {
    float:left;
    width:156px;
    height:120px;
    padding:13px 0px 0px 33px;
    }
#ctopright {
    float:right;
    width:795px;
    }
#ctoplinks {
    float:right;
    padding:10px 0px 0px 0px;
    height:25px;
    font-family:Arial, Helvetica, sans-serif;
    }
#ctoplinks a {
    display:block;
    float:left;
    background:url(images/arrowyellow.gif) no-repeat 0px 4px;
    padding: 0px 9px 0px 11px;
    color:#009900;
    font-size:11px;
    text-decoration:none;
    }
#ctoplinks a:hover {
    text-decoration:underline;
    }
.clrdiv {
    clear:both;
    }

В остальных браузерах (IE6, IE7, Mozilla, Opera, Google Chrom) всё ОК. Когда из стилей блока ctoplinks убираю значения padding и height отступ исчезает. Но как только я указываю эти значения, в IE8 появляется отступ на много больше, чем 10px.

Вот линк:
http://www.icgroup.com.ge/index.php?a=main&lang=eng
(верхний правый угол)

Автор: HARDMID 10.11.2009, 13:30
переборщил с clrdiv

попробуй убрать после div.ctoplinks
увидишь, что получится. Он рисунку не дает исполнить правило float:left.

и остальные подергай.


Хотя... тоже было решение... ))))

Автор: lasalexx 10.11.2009, 13:31
HARDMID
Спасибо.

Нашёл ошибку. Забыл закрыть </a> после картинки.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)