Some suggestions for you -
1. <body background="images/Brickwallgraf.gif" onload="dynAnimation()"
language="Javascript1.2"
The language attribute is not a valid attribute for the body tag. Please
remove it so that your body tag looks like this -
<body background="images/Brickwallgraf.gif" onload="dynAnimation()"
2. <td valign="top" height="19" width="149"><select size="1"
Form elements without a corresponding <form> tag are not legal page content.
To be sure that this works cross-browser/platform, you will need to add a
form tag, e.g.,
<td valign="top" height="19" width="149"><form method="POST" name="form1"
id="form1" action=""><select size="1" ... </form></td>
3. <td style="border-style: none; border-width: medium">
<div style="position: absolute; width: 100px; height:
You have indeed put this layer into a table cell, and as you have
discovered, it doesn't work. Had you looked in other browsers, you would
have seen that it REALLY doesn't work. Absolutely positioned elements must
not be placed into table cells. You will have to remove Layer2 (and its
nested layers) and the closer layer from their table cells, and place them
back into the code, immediately above the </body> tag to be safe.
Now - you only have the problem of how to make those layers center along
with the rest of the page's content, and that is easily solved by adjusting
the layer frame of reference from the <body> tag (which doesn't move) to
something that does move (this is what you tried to do by putting the layers
into the table in the first place). The right way to do that is to make the
following changes to your page -
ADD THIS CSS TO THE HEAD OF THE PAGE. Change this -
</head>
to this -
<style type="text/css">
<!--
body { text-align:center; }
#wrapper { text-align:left; width:750px; margin:0 auto; position:relative; }
-->
</style>
</head>
ADD THIS MARKUP TO THE PAGE ITSELF. Change this -
<body...>
to this -
<body...>
<div id="wrapper">
and this -
</body>
to this -
</div><!-- /wrapper -->
</body>
and see what happens.
