Div верстка под IE

**-Deadly-** · 17.06.2008, 22:07

Здравтвуйте, есть код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""h ttp://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<style>
#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;
border:solid 1px #009900;
}
.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;
}
</style>
</head>
<body>
<div id="main">
 * <div class="header">
 * * * Верхушка
 * </div>
 * <div id="content-columns">
 * * * <div class="leftcolumn">
 * * * * * Левая колонка
 * * * </div>
 * * * <div class="content">
 * * * * * Центральная колонка

 * * * * * Центральная колонка

 * * * * * Центральная колонка

 * * * * * Центральная колонка

 * * * * * Центральная колонка

 * * * </div>
 * * * <div class="rightcolumn">
 * * * * *Правая колонка
 * * * </div>
 * </div>
 * <div class="footer">
 * * * Подвал
 * </div>
</div>

</body>
</html>

Нужно что бы между левой/правой колонкой и центром был отступ в 5px, во всех браузерах норм, в IE6 отступа нет. В чем проблема? Как исправть?
Спасибо
P.S. при копировании кода в доктайп в http уберить пробел, ваш форум за спам принимал.

**Aykroyd** · 18.06.2008, 23:06

1. width: 100% совместно с border:solid 1px #009900 для блока content – изначально неверно.
2. Макрораскладка сама по себе вызывает сомнения. В частности, не рекомендуется впихивать невпихуемое. Все намного проще:

[Только зарегистрированные пользователи могут видеть ссылки. ]

**-Deadly-** · 20.06.2008, 23:53

ALL TO Aykroyd
Спасибо, но этот шаблон не совсем то что мне надо.

Я нашел еще один метод дивной верстки в 3 колонки (конечно для Вас он не нов). Вот собственно он.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "ht tp://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>div test</title>
<style type="text/css">
body {padding:0; margin:0;}
#left {float:left; width:150px; margin-left:10px; border:solid 1px #990000;}
#right {float:right; width:150px; margin-right:10px; border:solid 1px #990000;}
#center {border:solid 1px #990000; margin-left:172px; margin-right:172px;}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</body>
</html>

Отсюда возникают 3 вопроса:
1) Как Вы относитесь к такому методу дивной верстки.
2) Если для блока не указан width:100%; и есть border:solid 1px #009900; это изначально верно?
3) В IE возникла проблема, он не хочет делать отступ с лева и с права по 10px, а вместо того берет и прижимает боковые колонки к центру, хотя в других браузерах все норм. Как собственно поправить поправить не прибегая к добавлению еще одного блока.
P.S. <body> тоже трогать нельзя, т.к. на моем сайта данный не находиться напрямую в <body>.
P.S.2 при копировании кода в доктайп в http уберить пробел, ваш форум за спам принимал.

**Aykroyd** · 21.06.2008, 01:04

Originally posted by Deadly-@Jun 20 2008, 23:53
Я нашел еще один метод дивной верстки
Как Вы относитесь к такому методу дивной верстки.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Тот же ***, только вид сбоку.

Originally posted by Deadly-@Jun 20 2008, 23:53
2) Если для блока не указан width:100%; и есть border:solid 1px #009900; это изначально верно?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Изначально верно.

Originally posted by Deadly-@Jun 20 2008, 23:53
В IE возникла проблема, он не хочет делать отступ с лева и с права по 10px
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

#left {display: inline;}
#right {display: inline;}

**-Deadly-** · 21.06.2008, 14:01

Originally posted by Aykroyd@Jun 20 2008, 20:04
Тот же ***, только вид сбоку.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
А каким Вы способом бы сверстали просто 3 (боковые фикс центер тянется) колонки с отступом от краев и между колонками в 10px?

Originally posted by Aykroyd@Jun 20 2008, 20:04
#left {display: inline;}
#right {display: inline;}
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Помогло спасибо.

Тема: Div верстка под IE

Опции темы

Поиск по теме

Отображение

Похожие темы

Вёрстка

Верстка

CSS верстка

CSS верстка

Вёрстка CSS :)

Ваши права