Положение абсолютных проблем в старых ИЭ

Question

.top_line {
background:#003466;
float:left;
height:107px;
width:100%;
}
.header_logo {
background:url("../images/header.png") top no-repeat;
position: absolute;
height:107px;
width:910px;
}
.page_wrapper {
margin:0px auto;
width:910px;
}

<div class="top_line"></div>
<div class="header_logo" align="center"></div>
<div class="page_wrapper">

Изображение заголовка правильно отображается поверх фона в FF, Chrome и более новых версиях IE. Однако он появляется прямо справа от панели цвета фона в старых версиях IE. Как мне это исправить?

Answer 1

Я решил проблему, переместив header_logo в CSS top_line и в результате получил

.top_line {
display:inline;
clear: both;
background:#003466;
background-image: url("../images/header.png");
background-position: top center;
background-repeat: no-repeat;
float:left;
height:107px;
width:100%;
}

Answer 2

Это проблема IE6.

Общий обходной путь добавляет:

clear: both;

или

clear: left;

или

clear: right;

в зависимости от вашего числа в таблице стилей.

Добавьте это так:

.top_line {
clear: both;
background:#003466;
float:left;

Если это не сработает, попробуйте:

* {
    margin: 0;
}

с и без него.

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