website dwt does not display properly in netscape

[laddy1]

www.kreativekoloring.com
I used layers to piece together round edge look and saved as dwt. It
displays fine in ie6 but not in netscape. I played with the header and left
border as two layers and it displayed fine, then I added a third layer and
thats when I get seperation. I deleted the third layer and then it displayed
properly. Any ideas or suggestions would greatly be appreciated.

Thank You!

 

[Ho Chung Wah Isaac]

Hi! Laddy,

I look at the source code of your page, I found some mistakes in it and also
some improvements can be made.

1) You have nested layers in layers. e.g.
<div style="position: absolute; width: 135px; height: 65px; z-index: 4;
left: 14px; top: 150px;" id="button1">
...
<div style="position: absolute; width: 8px; height: 800px; z-index: 5;
left: 788px; top: -10px;" id="right_border">
...
<div style="position: absolute; width: 62px; height: 59px; z-index: 6;
left: -62px; top: 0px;" id="right_curve">
...
</div>
</div>
</div>
These kind of nested layers may cause your problems because IE and
Netscape have different calculation method for the layers and their
container. Try to fix your problem by coding them individually, e.g.

<div style="position: absolute; width: 135px; height: 65px; z-index: 4;
left: 14px; top: 150px;" id="button1">
...
</div>

<div style="position: absolute; width: 8px; height: 800px; z-index: 5;
left: 788px; top: -10px;" id="right_border">
...
</div>

<div style="position: absolute; width: 62px; height: 59px; z-index: 6;
left: -62px; top: 0px;" id="right_curve">
...
</div>

note: top and left properties should be recalculated.

2) <style type="text/css" id="webdeveloper-outline-custom-elements"></style>
is an empty style tag and no id is need in style tag. They should be removed.

 

[laddy1]

That was very helpful! I have to place my picture after the layer code then
place the </div> tag eg. <div style="position: absolute; width: 100px;
height: 125px; z-index: 1; top: 0px; left: 0px" id="layer1">
<img border="0" src="kk-header-w_logo.jpg" width="800" height="125"></div>
That also gets rid of the negetive pix on sizing and I have to go 0 or a
positive position ( which now makes sense)

Thank You Very Much!!

 

[Murray]

These kind of nested layers may cause your problems because IE and

Netscape have different calculation method for the layers and their
container. Try to fix your problem by coding them individually, e.g.

While I agree with your recommendation, I disagree with your assertion that
IE and NN have different calculation methods for layers and containers.
They do not.

If you are going to nest inline positioned divs like this, you are best
advised to make all of them fully qualified CSS layers, i.e., move all the
position information to a stylesheet rather than leaving it inline.

3) It has some empty tags in it, like <td></td>, they should be remove.

I wouldn't recommend that - it'll make the whole table's structure invalid.

I also don't recommend using the &nbsp; as a layout tool as you have here -

<p style="margin-top: -1;
margin-bottom: -1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<div align="center">

But, the real reason that the page looks different in the two browsers is
that the whole methodology of exclusively using layers to position your page
elements is just wrong. This page would be stunningly easy to do with
tables, and would look the same in both browsers if you did.