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 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh Layer not displaying correctly in IE6

    HI Guys, can you please have a look at my code and help, it displays fine in IE7 and Firefox 1 and 2 but wont display in IE6 is there some script or something I can put in that will re-size depending on browser etc, here is the code,

    .......................................................................

    <style type="text/css">
    <!--
    body {background-color:#000000
    }
    .style8 {color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
    .style9 {color: #1941A5}
    -->
    </style></head>

    <body>
    <span class="style9"></span>
    <div id="Layer1" style="position:absolute; width:912px; height:600px; z-index:1; left: 1px; top: 14px;">
    <div align="left">
    </div>

    <div align="center"><img src="micoud1.jpg" width="910" height="600">
    </div>
    <div id="Layer5" style="position:absolute; width:361px; height:28px; z-index:5; left: 86px; top: 229px;"><span class="style8">Pour conna&icirc;tre nos points de vente, cliquez, ici </span></div>
    <div align="center"></div>
    </div>
    <div id="Layer2" style="position:absolute; width:220px; height:157px; z-index:2; left: 143px; top: 80px;"><a href="http://www.canteburynz.com/on_field" target="_self"><img src="/content/canterbury/media/img/cant_logo.gif" alt="Pour d&eacute;couvrir nos produits, cliquez, ici " width="213" height="145" border="0"></a></div>
    <div id="Layer5" style="position:absolute; width:319px; height:28px; z-index:5; left: 102px; top: 29px;"><span class="style8">Pour d&eacute;couvrir nos produits, cliquez, ici </span></div>
    <div id="Layer4" style="position:absolute; width:924px; height:83px; z-index:4; left: 3px; top: 487px;">
    <div align="center"><img src="images/logo_base1.jpg" width="1000" height="83"></div>
    </div>
    <div id="Layer3" style="position:absolute; width:213px; height:148px; z-index:3; left: 137px; top: 334px;"><a href="http://www.espacefoot.fr/boutiques-espace-foot-france.php" target="_self"><img src="/content/canterbury/media/img/espace.jpg" alt="Pour conna&icirc;tre nos points de vente, cliquez, ici" width="222" height="137" border="0"></a></div>
    </body>
    </html>
    .................................................................................................

    thanks,

    Dave.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    I think that the experts out there don't really understand your question? What is it that IE6 does wrong?

    Also I can't really see any difference between IE6's and Firefox's rendering?

  • #3
    New Coder
    Join Date
    Jun 2005
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that's what is puzzling me my friend, I have it centred on the page however, when it displays in IE6 its as if the image has been re-sized or something, becuase there is a bottom scroll bar as the whole page seems to have shifted right and out of the normal view.

    http://canterburynz.com/football365_canterbury

    Please check this link out and let me know how it displays, I pretty sure if your running Firefox or IE7 it will be fine

    do you think it may have to do with their settings?

    Cheers,

    Dave.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    I see the problem now. We want things to be horizontally centered, but they aren't.

    First of all the problem is not related to IE6. We get the same rendering in Firefox as well.

    I can assure you that many coders are crumbling their toes out there when they take a look at the code which appears to be generated by software.

    Anyway I guess we just want the page up running quickly, so let's exercise doing some patching.

    1. Centering the page.
    We must properly center the page, which in our case is achieved by replacing the body selector portion with this:
    Code:
    body {
    background-color: #000000;
    width: 909px;
    margin: 0 auto;
    position: relative;
    }
    2. Correct position properties for child elements of the 'body'
    Now, since the 'body' element takes care of the left margin, we must also correct child element properties: (here the original values of the 'left' properties have been subtracted with the same value)
    Code:
    <div id="Layer1" style="position: absolute; width: 800px; height: 600px; z-index: 1; left: 0px">
    ...
    <div id="Layer2" style="position: absolute; width: 220px; height: 157px; z-index: 2; left: 139px; top: 77px;">
    ...
    <!-- the 2nd Layer5 !!! -->
    <div id="Layer5" style="position: absolute; width: 319px; height: 28px; z-index: 5; left: 108px; top: 42px;">
    ...
    <div id="Layer4" style="position: absolute; width: 909px; height: 83px; z-index: 4; left: 0px; top: 460px;">
    ...
    <div id="Layer3" style="position: absolute; width: 213px; height: 141px; z-index: 3; left: 139px; top: 296px;">
    3. We have two div's both having id="Layer5" which is not allowed. The first one is nested within div 'Layer1' and is not the one I am refering to above. We should leave the style attribute as it is for this one. Not that browsers care much, but still, we'd better rename it to e.g. Layer6.

    Try steps 1-3 and let's see what the effect is.

  • #5
    New Coder
    Join Date
    Jun 2005
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks very much for your help, I validated the document as I do all the time before publishing and there we no errors or warnings found?

    I will let you know the outcome when I have patched the code within the page.

    Dave.
    Last edited by david_uk; 12-18-2006 at 09:58 AM. Reason: To add more text

  • #6
    New Coder
    Join Date
    Jun 2005
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Koyama,

    I would just like to say, thank you very much for your help.

    http://canterburynz.com/football365_canterbury please visit the link the page now fits perfectly.

    thanks,

    Dave.


  •  

    Posting Permissions

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