Неправильное отображение верстки в IE 6,7,8

Ripley · January 21, 2011

Добрый день.

Суть проблемы следующая:

Один из блоков DIV (красный) лежит поверх всех модулей (в будущем там будет флеш), и при этом заходит на два из них. Проблема появляется только при отображении в браузерах - IE 6,7,8 (в FF2,3, Opera, Chrome, Safari все отображается нормально. Красный модуль растягивает родительский модуль, вместо того, что бы заходить за его границу. Этот же модуль вмето того, что бы лежать поверх другого "оранжевого" модуля расположился ниже по оси y. Скорее всего я просто чего то не знаю (тожественно захлопнул самоучитель месяц назад), но вот чего именно... Основная цель сейчас IE 7,8 - IE 6 буду мучать позже (насколько я понимаю - это отдельная Санта-Барбара.

Сама верстка расположена здесь:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LC-TEST</title>
<link rel="stylesheet" type="text/css" href="css/template.css">
</head>
<body>
<div id="body">
<div id="cont">
<div id="logo1"></div>
<div id="logo2">REKLAMA logo</div>
<div id="tele">tel. nuber</div>
<div id="balloon"></div>
<div id="menu">menu</div>
<div id="content">content</div>
</div>
</div>
</body>
</html>

Файл .css

#cont {
background-color:#000;
width:1024px;
height:auto;
min-height:850px;
margin:0 auto;
padding:0;
position:relative;
}

#logo1 {
width:287px;
height:170px;
background-color:#30d5c8;
float:left;
position:relative;
z-index:1;
}

#logo2 {
height:170px;
width:457px;
background-color:#cf0;
float:left;
position:relative;
z-index:1;
}

#tele {
height:170px;
width:280px;
background-color:#ff7a00;
float:left;
position:relative;
z-index:1;
}

#balloon {
height:500px;
width:400px;
background-color:red;
margin-left:950px;
position:relative;
z-index:2;
}

#menu {
height:625px;
width:285px;
background-color:#1e90ff;
float:none;
margin-top:-300px;
position:relative;
z-index:2;
}

Vlad · January 21, 2011

У вас не установлен доктайп на странице, поэтому IE работает в режиме совместимости. А это очень, очень плохо. Начните с добавления хотя бы <!DOCTYPE html> в первую строку кода.

deadrash · January 21, 2011

Ещё у вас наверху кракозябина п»ї появляется в том случае если сохранять документ в utf-8 с BOM. Сохраните без этого BOM.

Ripley · January 21, 2011

У вас не установлен доктайп на странице, поэтому IE работает в режиме совместимости. А это очень, очень плохо. Начните с добавления хотя бы <!DOCTYPE html> в первую строку кода.

Добавил доктайп:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

До того перепробовал ещё несколько других. Эффекта, к сожалению, почти нет (слегка изменилась ширина основного родительского блока).

Ещё у вас наверху кракозябина п»ї появляется в том случае если сохранять документ в utf-8 с BOM. Сохраните без этого BOM.

Спасибо, поправил.

Vlad · January 21, 2011

Метод Подборского в данном случае не самый лучший вариант. Вам не надо пробовать вставлять разные доктайпы, надо вставлять только определенные. То что вы сейчас сделали это бред и ужас.

Вот здесь написано, какие варианты существуют.

http://htmlbook.ru/blog/standartnyi-rezhim

Для начала укажите в коде правильный доктайп, дальше будет проще.

swetlana · January 21, 2011

скажите, а как увидеть проблему?

Или она уже решена?

Ripley · January 21, 2011

скажите, а как увидеть проблему?
Или она уже решена?

Спасибо, проблема уже решена методом "Мы пойдем другим путем" =)

Sign In

Неправильное отображение верстки в IE 6,7,8

Question

Ripley

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

deadrash

Link to comment

Share on other sites

Ripley

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

Ripley

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information