Блочная верста в IE 6

  • Автор темы Автор темы -Deadly-
  • Дата начала Дата начала
Статус
Закрыто для дальнейших ответов.
D

-Deadly-

Участник
Топикстартер
Сообщения
1
Реакции
0
Здравтвуйте, есть проблемный код
HTML
Код: 
</head>
<body>
<div id="main">
 * <div class="header">
 * * * Верхушка
 * </div>
 * <div id="content-columns">
 * * * <div class="leftcolumn">
 * * * * * Левая колонка
 * * * </div>
 * * * <div class="content">
 * * * * * Центральная колонка<br>
 * * * * * Центральная колонка<br>
 * * * * * Центральная колонка<br>
 * * * * * Центральная колонка<br>
 * * * * * Центральная колонка<br>
 * * * </div>
 * * * <div class="rightcolumn">
 * * * * *Правая колонка
 * * * </div>
 * </div>
 * <div class="footer">
 * * * Подвал
 * </div>
</div>

CSS
Код: 
#main {
width: 100%;
}
.header {
width: 100%;
height: 50px;
background: #36f;
}
.footer {
width: 100%;
height: 50px;
clear: both;
background: #006;
}
#content-columns {
margin: 0 150px 0 150px;
}
.content {
width: 100%;
float: left;
background: #ccc;
}
.leftcolumn {
width: 140px;
float: left;
margin-left: -145px;
display: inline; /* решает проблему в IE */
position: relative;
background-color:#006600;
}
.rightcolumn {
width: 140px;
float: right;
margin-right: -145px;
display: inline; /* решает проблему в IE */
position: relative;
background-color:#006600;

Нужно что бы между левой/правой колонкой и центром был отступ в 5px, во всех браузерах норм, в IE6 отступа нет. В чем проблема? Как исправть?
Спасибо
 
Ответ: Блочная верста в IE 6

DOCTYPE в HTML есть?

вообще корень проблемы наверное в том что IE из-за неуказанного DOCTYPE работает в quirks mode, а не в совместимом с web standards. в нем и margin с width по другому суммируются + для IE вообще width это min-width.
на вопрос что делать попробую ответить завтра, просьба дать ссылку на страницу прямо в web.

и чем обусловлено position:relative? одновременно float и position вводит IE6 в ступор. я бы лучше сделал дополнительный внутренний блок и уже его позиционировал (полагаю, там внутри что-то с position:absolute?)
 
Ответ: Блочная верста в IE 6

Вот так работает:

<head>
<style type="text/css">
body {padding:0; margin:0;}
#header{ height:50px; background-color:green;}
#footer{ height:50px; background-color:green;}
#conteiner{ padding:0; margin:0;}
#left{position:absolute; width:140px; height:50px; background-color:red; padding:0; margin:0; top:50px; left:0;}
#center{ height:50px; background-color:navy; padding:0; margin:0 145px 0 145px;}
#right{position:absolute; width:140px; height:50px; background-color:red; padding:0; margin:0; top:50px; right:0;}
</style>
</head>
<body>
<div id="header">
</div>
<div id="conteiner">
<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>
</div>
<div id="footer">
</div>
</body>
 
Ответ: Блочная верста в IE 6

Wild_Boar, забейте в левую или в правую колонку инфы побольше чем в центре и перестанет работать...
 
Ответ: Блочная верста в IE 6

Можно height: выставлять по факту. Хотя, согласен что решение далеко от идеала.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ
Назад