VPF::расположение блоков в IE6 - Форум программистов

Evghenusi

Дата 26.10.2011, 14:20 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

добрый день.
знаю что IE6 вымирает, но всё же, знатоки помогите.

Оба блока должны быть расположены на одной высоте, но в IE6 второй блок ниже, и справа от "заголовка каждого блока" появляется непонятный (для меня) отступ. Подскажите что дописать в css что бы решить проблему?

Код


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<!--[if lt IE 9]>
<script type="text/javascript">
  var e = new Array('article','aside','figcaption','figure','footer','header','hgroup','nav','section');
  for(var i=0; i<e.length; i++) document.createElement(e[i]);
</script>
<![endif]-->
<link rel="stylesheet" href="cssjsimg/style2.css" />
</head>
<body>
 <div id="container">
    <section>
        <article class="main">
            <header>
                article
            </header>
            text
            </article>    
    </section>
    <aside>
        <div>
            <p>Info</p>
            text    
        </div>    
    </aside>
 </div>
 </body>
</html>

Код


* { margin: 0; padding: 0 }

header, nav, section, article, aside, footer { display: block }

header { margin: 20px 0 0; position: relative; }

#container {
margin: 0 auto;
width: 950px;
padding: 0 15px;
}

aside {
float: right;
width: 295px;
}

section {
float: left;
width: 640px;
}

aside div {
background: none repeat scroll 0 0 rgba(240, 240, 240, 0.4);
border: 1px solid #CECECE;
margin: 0 0 15px;
padding: 5px 10px;
color: #555555;
font-size: 0.9em;
}

aside div p {
position: relative;
top: -5px;
left: -10px;
padding: 3px 10px;
color: #333;
width: 100%;
text-shadow: 0 1px 0 #fff;
border-bottom: 1px solid #cdcdcd;
background-color: #f4f4f4;
font: 140%/1.5 Verdana, sans-serif;
}

.main {
padding: 10px; 
overflow: hidden;
border: 1px solid #cecece;
background: rgba(255,255,255,0.8);
} 

article header {
top: -10px;
left: -10px;
padding: 7px 15px 8px;
margin: 0 0 -5px;
width: 100%;
font-size: 22px;
color: #333;
text-shadow: 0 1px 0 #fff;
border-bottom: 1px solid #cdcdcd;
background-color: #f2f2f2;
}

Добавлено через 1 минуту и 15 секунд
http://test3.22web.net/ - страница где можно наблюдать данную проблему

ksnk

Дата 26.10.2011, 15:53 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Для вымирающего IE6, imho, достаточно смело - подсовывать ему неизвестные ему теги и надеяться увидеть корректную работу. Мой IE тестер, например, просто грохнулся на тестовой страничке с IE6... ;)

А по сути - проблема с IE6 и IE7 в том, что в секции article header одновременно указаны width, padding и margin. Правила вычисления макета у IE и у неIE различаются именно в этом месте, так что для пущей кроссброузерности иногда бывает нужно вставить пару дивов друг в друга, для одного из которых определить width, для другого отступы.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Evghenusi

Дата 26.10.2011, 15:59 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

ясно. спасибо. попробую.

Добавлено через 2 минуты и 13 секунд

Цитата(ksnk @ 26.10.2011, 15:53

)

мой ie6 (всё ещё не слез с XP) нормально понимает теги, я их ведь создаю через JS, да и display:block прописал, так что не должны сильно отличаться от div-ов.

Evghenusi

Дата 26.10.2011, 17:28 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

Цитата(ksnk @ 26.10.2011, 15:53

)

А по сути - проблема с IE6 и IE7 в том, что в секции article header одновременно указаны width, padding и margin.

убирал их, не помогло.

а если из .main убрать padding: 10px; , а из article header убрать top: -10px; left: -10px;, проблема исчезает, но хотелось не использовать ещё один элемент для текста

Это сообщение отредактировал(а) Evghenusi - 27.10.2011, 11:54

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »