Layer not displaying correctly in IE6

david_uk

12-14-2006, 01:00 PM

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

</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î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é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é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ître nos points de vente, cliquez, ici" width="222" height="137" border="0"></a></div>
</body>
</html>
.................................................................................................

thanks,

Dave.

koyama

12-14-2006, 02:07 PM

I think that the experts out there don't really understand your question?:confused: What is it that IE6 does wrong?

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

david_uk

12-14-2006, 02:43 PM

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.

koyama

12-14-2006, 04:22 PM

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:
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)
<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;">
...

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

david_uk

12-18-2006, 09:53 AM

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.

david_uk

12-20-2006, 11:08 AM

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.