Position Absolute Problems in Older IE

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">

The header image appears correctly onlayed on top of the background color on FF,Chrome, and newer versions of IE. However it appears directly to the right of the background-color bar on older versions of IE. How do I fix this?

Answer 1

Its an IE6 issue.

A common workaround is adding:

clear: both;

or

clear: left;

or

clear: right;

depending on your float in the stylesheet.

Add it like so:

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

If that does not work then try:

* {
    margin: 0;
}

with and without it.

These are just some things I have done to work around the same problem in IE6.

Answer 2

I solved the problem by moving the header_logo into the top_line CSS and ended up with

.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%;
}