faulty layering

Link A shall NOT work

container 1 - accessible links from below

Link B shall work

container 2 - covered links from above

.link-a {
position: absolute; 
top: 190px; 
left: 10px;
font-weight: 800;}

.link-b {
position: absolute; 
top: -80px; 
left: 10px;
font-weight: 800;}

.link-c {
position: absolute; 
top: 190px; 
left: 260px;
font-weight: 800;
width: 240px;}

.link-d {
position: absolute; 
top: -80px; 
left: 260px;
font-weight: 800;
width: 240px;}

#container-1,#container-2{
height: 92px;
width: 500px;
margin-bottom: 40px;
position: relative;
z-index: 0;
border-top: solid 1px #999;
border-left: solid 1px #999;
border-bottom: solid 1px #bbb;
background: transparent;}

.cover {
float: right;
height: 100%;
width: 250px;
margin-left: -240px;
border-left: solid 1px #bfbfbf;
background: 
url(imagedepot/transparent.png);}

Notes:

Links are swapped between upper and lower container, using absolute positioning. A cover-effect from the lower container should be the result.

- Link A is behind default background in container 2, and should therefore not work.

- Link C is behind transparent image in container 2, and should therefore not work.

Opera OK.

Moz/FF OK.

Safari OK.

IE6 FAILS. Link A is accessible. Link C is OK.
- Both modes tested.

IE5.0 win OK.

IE5.2 Mac FAILS. Link A is accessible. Link C is accessible.

tested browsers:

Opera:

win2K: 7.22, 7.50, 7.54

Mac OS-X: 7.54

Moz:

win2K: 1.4, 1.7.2

FF:

win2K: (0.6), 0.8, 1.0

Mac OS-X: 1.0

Safari:

Mac OS-X: 1.2.4

IE:

win2K: 5.0, 6.0

Mac OS-X: 5.2

Netscape (Moz):

win2K: 7.2(Moz 1.7.2)

go to test-menu