There are several problems with layers, and problems in your styles:
- With layers, the mouse position operations should work on just the top layer. Even though the top layer might be transparent, mouse detection and control devices located under the top layer can't get focus or see the mouse. What you want is the equivalent of clicking on one Windows window and expecting to work a button on a window under it.
Z-index is not well implemented yet.
There are problems with your styles. e.g.:
#secondary{
margin: 0px 0px 0px 0px;
width: 100%;
height: 15px;
font: 0.7em arial, verdana, sans-serif;
background-color: #494949;
padding: 5px 0px 5px 0px;
text-indent: 20px;
}
You have 0px in your styles. 0 must NOT have a unit of measure. Firefox cancels the whole style if it encounters a 0 with a unit of measure, such as 0px, 0pt, 0em, 0%. Remove the units of measure on 0 values. Like this:
#secondary{
margin: 0;
width: 100%;
height: 15px;
font: 0.7em arial, verdana, sans-serif;
background-color: #494949;
padding: 5px 0 5px 0;
text-indent: 20px;
}
You have size styles (height, width) and nonzero surrounding styles in the same style or tag. This causes the noncompliant IE to behave very differently from the other browsers that follow the standards.
It is better to use a relative size, such as points, ems, or percent, rather than the absolute pixels. Then the page doesn't change so much with a change in screen resolution.
Unsolved 
