div positioning changes between IE6 and IE7

[onlinesimon]

Hi,

I'm having a problem with the positioning of DIV content.

The layout works fine with most browsers that I've tested, including IE7, and also seems fine on IE5, but for some reason IE6 shifts the DIV content 300px to the right.

Check out: http://www.onlinesimon.co.uk/home.asp for an example of this.

Features two nested DIV's, one overlaying the other. Both contained within a 'container' DIV:

 
--- CSS ---
 
.blend {-moz-opacity:0.6;filter:alpha(opacity=60);}
 
--- HTML EXAMPLE ---
 
<div style="width:600px;height:370px;">
 
<div id="mContainer" style="position:relative;left:0px;top:0px;" zorder="1"></div>
 
<div style="position:relative;top:0;left:0;z-order:3;background-image:url('http://www.onlinesimon.co.uk/images/putsch_overlay.gif');background-repeat:no-repeat;text-align:left;"><img class="blend" border="0" src="http://www.onlinesimon.co.uk/images/putsch.gif" alt="Putsch Architectural Glass" width="34" height="350"></div>
 
</div>
 
--- END OF HTML EXAMPLE ---
 
 

The above code works fine in IE7 and most other browsers - just not in IE6.

Any ideas? I'd rather know what I'm doing wrong then have to create a 'work-around' fix for IE6. The only quick solution is to go back to using tables, which is less than ideal.

Regards,
Simon

[drhowarddrfine]

You are using the xml declaration on the first line. This:
<?xml version="1.0" encoding="iso-8859-1"?>

Only modern browsers work correctly with it, IE6 goes into quirks mode. Remove that line. Then validate and fix your 35 html errors and then your css errors.

[onlinesimon]

You are using the xml declaration on the first line. This:
<?xml version="1.0" encoding="iso-8859-1"?>

Only modern browsers work correctly with it, IE6 goes into quirks mode. Remove that line. Then validate and fix your 35 html errors and then your css errors.

Thank you for the reply. I've fixed those errors and the page now validates to XHTML Transitional.

The page views fine with IE7, (and to a slightly lesser degree Firefox 2), but the main problem I have is with IE6.

If you look at http://www.onlinesimon.co.uk/home.asp on IE6 or earlier (I've tried it also on IE5.5) then the large fading image at the top of the page is offset by about 300px to the right of its intended position.

<div id="mContainer" style="position:relative;left:0px;top:0px;z-index:1;"></div>

The above DIV is fine in IE7 and Firefox 2, but on IE6 is offset 300px to the right?

Any ideas?

Regards,
Simon

[onlinesimon]

Fixed the problem now. Page is looking 99% the same across browsers.

[IwannaknowAboutStuff]

What was the fix ?