PDA

View Full Version : background-position: centre top #fail


fidgen
May 20th, 2009, 03:52 PM
Hiya,

I'm building a simple html wireframe as a run-in to full development and I've found a IE6 bug which I don't know how to fix.

Before I hear the "dump IE6" howls, 50% of my clients corporate users use a modified version of IE6. It sucks but it's true.

The problem is that I've got a centred bgimage which isn't centering in IE6. New browsers do it just fine, but obviously if one had to #fail it'd be this one...

I've put the bgimage in the body tags, and attached the image to centre-top. The bgimage is 1300px wide, so should show to the sides of the centred divs and give widescreen users a bit of eye candy.

Any ideas?

Thanks :)



<body style="margin:0; padding:0; text-align:center; width:100%; background:url(images/bg_content.png) no-repeat top center;">

<div style="width:100%; background-color:#000099">
<div style="margin-left:auto; margin-right:auto; width:950px; height:200px; background-color:#3399CC"></div>
</div>
<div style="width:100%;">
<div style="margin-left:auto; margin-right:auto; width:950px; height:500px; background-color:#00FF99"></div>
</div>
<div style="width:100%; background-color:#FF66FF">
<div style="margin-left:auto; margin-right:auto; width:950px; height:200px; background-color:#0000CC"></div>
</div>

</body>



*should add that text-align:centre and the width:100% are just attempts to get a fix already, they aren't necessary.*
_Aerospace_Eng_
May 20th, 2009, 04:10 PM
Post the rest of your HTML please. Its likely you need a full doctype and you need to set the html and body elements to 100% height.
fidgen
May 20th, 2009, 04:18 PM
Hiya,

5 minutes after posting I found the answer:


<body style="margin:0; padding:0; background:url(images/bg_body.jpg) no-repeat 50% 0;">

For some reason IE6 hates "center top" but works with "50% 0"

Go figure... :confused: