Три div'a неверно отображаются в IE

Eugene Shilin

Опять с версткой проблемы. Есть 3 дива, которые должны выводиться в строку. В Opera и FF все замечательно, но IE делает непонятные отступы от центрального дива по бокам. Вот так отображается в IE:

ссылка

Вот так отображается в Opera и также должно быть в IE

ссылка

Код только дивов в index.html:

<div class="all_content">
     <div class="center_top">       </div>
</div>
     <div class="all_content">
     <div class="center_top"> </div>
</div>

style.css

.all_content {
margin-top: 12px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 12px;
}
.left_top {
width: 340px;
height: 202px;
border-bottom: 2px solid #f5f8fc;
border-top: 2px solid #f5f8fc;
position: relative;
float:left;
color: #696969;
font-family: Tahoma;
font-size: 11px;
}

.center_top {
width: 320px;
height: 202px;
border: 2px solid #f5f8fc;
position: relative;
color: #696969;
font-family: Tahoma;
font-size: 11px;
}
.right_top {
width: 340px;
height: 202px;
border-bottom: 2px solid #f5f8fc;
border-top: 2px solid #f5f8fc;
position: relative;
float:right;
color: #696969;
font-family: Tahoma;
font-size: 11px;
}
5 ответов

Eugene Shilin


.all_content {
    margin-top: 12px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 12px;
    font-family: 11px Tahoma;
    color: #696969;
}
.left_top {
    width: 340px;
    height: 202px;
    /*border-bottom: 2px solid #f5f8fc;*/
    /*border-top: 2px solid #f5f8fc;*/
    float: left;
    background-color: lightblue; /* включено для нагладности */
}

.center_top {
    width: 320px;
    height: 202px;
    /*border: 2px solid #f5f8fc;*/
    position: relative;
    float: left;
    background-color: pink; /* включено для нагладности */
}
.right_top {
    width: 340px;
    height: 202px;
    /*border-bottom: 2px solid #f5f8fc;*/
    /*border-top: 2px solid #f5f8fc;*/
    position: relative;
    margin-left: 660px; /* ВНИМАНИЕ -  это значение равно ширине "левого" и "центрального" дива + ширина "левых" и "правых" границ "левого" и "центрального" дива + ширина "левого" border "правого" дива. То есть, если брать знаxения ширины ваших div и border оно будет равно 664px; */
    background-color: black; /* включено для нагладности */
}

Работает в IE7+


Eugene Shilin

Евгений, проблема элементарная, решается многими способами.

  1. * {margin: 0px; padding: 0px;} - обнуляем все отступы для всех элементов.
  2. block { display: inline; } - убирает специфические отступы у блоков в ie.
  3. Вот ссылка на будущее для лечения всяких "болезней", точно поможет: ссылка-врач.


Eugene Shilin

.center_top{margin:0 340px}
.all_content:after{display:block;clear:both;content:'';height:0px;}

добавьте


Eugene Shilin

Создай отдельный .css для ie(версия),через комментарий укажи что специально для ie(версия)(в head добавь).

Подверстай уже спецом под ie.

p.s скрины не отображаются.


Eugene Shilin

вероятно то что Вам нужно выглядит так

<div class="all_content">
     
</div>
<div class="all_content">
     
</div>

licensed under cc by-sa 3.0 with attribution.