0

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

ссылка

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

ссылка

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

<div class="all_content">
     <div class="left_top"></div><div class="right_top"></div><div class="center_top">       </div>
</div>
     <div class="all_content">
     <div class="left_top"></div><div class="right_top"></div><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;
}
2
  • возможно смог бы помоч, да к сожалению скрины у меня не отображаются почему то ... может перезальете ? 28 сен 2011 в 22:33
  • Вообщем, все что ниже - все не то. Везде криво. А скрины перезалил. 29 сен 2011 в 14:49

5 ответов 5

1
<div class="all_content>
    <div class="left_top"></div>
    <div class="center_top"></div>
    <div class="right_top"></div>
</div>

 .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+

4
  • Незнаю что вы тестировали в IE, но все воообще вообще криво. 29 сен 2011 в 14:49
  • Посмотрите изменена расстановка div. Создайте чистый файл и проверьте - все работает. Надеюсь вы пользуетесь reset.css
    – omgwtf
    29 сен 2011 в 15:22
  • Почти получилось. Теперь в IE левый и центральный дивы соеденились вместе, но переместились до упора влево. А правый диз отсоединен от них. 29 сен 2011 в 18:45
  • Попробывал с ИЕ комментариями, все равно не получается. Помогите! 29 сен 2011 в 19:45
1

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

  1. * {margin: 0px; padding: 0px;} - обнуляем все отступы для всех элементов.
  2. block { display: inline; } - убирает специфические отступы у блоков в ie.
  3. Вот ссылка на будущее для лечения всяких "болезней", точно поможет: ссылка-врач.
1
  • Значит у Вас где-то косякили или Вы что-то не так делаете, у меня была аналогичная ситуация - помогло.Может пойти поспать? :) 4 янв 2012 в 20:22
0
.center_top{margin:0 340px}
.all_content:after{display:block;clear:both;content:'';height:0px;}

добавьте

1
  • Проблема осталась. Не помогло. 28 сен 2011 в 20:47
0

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

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

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

0

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

<div class="all_content">
     <div class="left_top"></div><div class="center_top"></div><div class="right_top"></div>
</div>
<div class="all_content">
     <div class="left_top"></div><div class="center_top"></div><div class="right_top"></div>
</div>
<style>
.all_content {
margin-top: 12px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 12px;
display:table;
clear:both;
}
.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: 340px;
height: 202px;
border: 2px solid #f5f8fc;
position: relative;
color: #696969;
float:left;
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:left;
color: #696969;
font-family: Tahoma;
font-size: 11px;
}
</style>
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.