Most likely there are multiple problems here -
1. You have used 'layers' on the page, and you have placed them into table
cells. This is a very common error among those not so familiar with
positioned content, and it causes lots of grief. The solution would be to
find every occurrence of such a thing on your page, e.g.,
<td width="100%" valign="top">
<div style="position: absolute; width: 828px; height: 21px; z-index:
2; left: 162px; top: 114px" id="layer4" align="left">
(note that the positioned div tag that is "layer4" is inside a <td>)
then cut that entire layer from the code of the page, and paste it back in
either just below <body> or just above </body>. Do this for each layer on
the page. That will solve that problem (by the way, align="left" is the
default alignment, and therefore redundant).
2. You have used the <p> tag and the <h1> tag as a layout tool -
<td width="15" valign="bottom"> <p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
[snip lots of them}
<p> </p>
<p><img src="images/clear_dot.gif"
or -
<b><font face="Arial">Music available by JoAnn McFatter. Click on
CD to purchase. Click on titles to hear samples.</font></b></div>
<h1 class="yellowheadline"> </h1>
<h1 class="yellowheadline"> </h1>
[snip lots of them}
<h1 class="yellowheadline"> </h1>
<div style="position: absolute; width: 829px; height: 1644px; z-index: 1;
left: 162px; top: 147px" id="layer1">
Now, since both of these tags will respond to the browser's font display
size, by using them this way, you have guaranteed that your layout will fall
apart when someone resized their font (I suspect that this may also be
causing you some cross-browser problems). The solution is not to use any
character or resizable element as a layout or positioning device. If you
need something to be placed on the page in a certain location, you need to
make your table structure put it there, or use CSS to put it there.
3. You have nested inline layers -
<div style="position: absolute; width: 829px; height: 1644px; z-index: 1;
left: 162px; top: 147px" id="layer1">
<div style="position: absolute; width: 144px; height: 18px; z-index: 14;
left: 0px; top: 1374px" id="layer18">
and I suspect that this is also causing you problems cross-browser. If you
are going to nest layers, the inner ones need to be fully qualified CSS
layers, like this -
<div style="...." id="layer1">
<div id="layer18">blah blah</div>
</div>
assuming your stylesheet has this -
#layer18 { position: absolute; width: 144px; height: 18px; z-index: 14;
left: 0px; top: 1374px; }
Try fixing those things, and see what happens.
I am wrting a site (or TRYING to) for