Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    background-position: centre top #fail

    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

    Code:
    <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.*

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hiya,

    5 minutes after posting I found the answer:

    Code:
    <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...


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •