1: This is supposed to be in front and visible.
It is, of course — unless I use Opera.
2: This is supposed to be in front and visible.
It is, of course — unless I use Opera.
3: This is supposed to be behind layer 2, and therefore invisible.
It shows up in Opera though.
4: This is supposed to be behind layer 1, and therefore invisible.
It shows up in Opera though.
1: This is supposed to be in front and visible.
It is, of course.
2: This is supposed to be in front and visible.
It is, of course.
3: This is supposed to be behind layer 2, and therefore invisible.
4: This is supposed to be behind layer 1, and therefore invisible.
.fl-1,.fl-2,.fl-3,.fl-4,
.fl-1 div,.fl-2 div,
.fl-3 div,.fl-4 div {
border: solid 1px #000;
width: 250px;
height: 120px;
float: left;
clear: both;
position: relative;}
#independent_corr .fl-1,
#independent_corr .fl-2,
#independent_corr .fl-3,
#independent_corr .fl-4 {
border: none;}
.fl-1 div,.fl-2 div,
.fl-3 div,.fl-4 div {
border: solid 1px #000;
float: none;}
.fl-1 {
margin: 10px -1000px -1000px 10px;
background: #abc;
z-index: 2;}
.fl-1 div {
background: #abc;
z-index: 2;}
.fl-2 {
margin: 10px -1000px -1000px 300px;
background: #abc;
z-index: 2;}
.fl-2 div {
background: #abc;
z-index: 2;}
.fl-3 {
margin: 20px -1000px -1000px 300px;
background: #def;
z-index: 1;}
.fl-3 div {
background: #def;
z-index: 1;}
.fl-4 {
margin: 20px -1000px -1000px 10px;
background: #def;
z-index: 1;}
.fl-4 div {
background: #def;
z-index: 1;}
#independent,#independent_corr {
height: 140px;}
/* IE-win corr follows */
@media screen {
* html #independent div,
* html #independent_corr div {
display: inline;}
* html #independent_corr div div {
display: block;}
}
/* IE-Mac corr follows */
/*\*//*/
.fl-1 {
margin: 0 0 0 10px;}
.fl-2 {
margin: 0 0 0 40px;}
.fl-3 {
margin: 0 0 0 -252px;}
.fl-3 div {
margin-top: 10px;}
.fl-4 {
margin: 0 0 0 -544px;}
.fl-4 div {
margin-top: 10px;}
/**/
Large negative right and bottom margins "removes" these floats from the flow, and is a fix for some IE/win bugs. Doesn't affect this test.
- Moz/FF and Safari are layering floats as indicated by z-index. No problem with the fix either.
- Opera(pre v9.0) is unable to layer floats. It needs the fix.
- Opera 9.0 is layering floats as indicated by z-index. No problem with the fix either.
- IE-win is layering floats as indicated by z-index. No problem with the fix either.
- IE-Mac is layering these floats as indicated by z-index. However, IE-Mac can't handle "completely removed floats", and margin-top doesn't work on floats. Thus IE-Mac is also doing better with the fix, and basic margins.
[rev: 20.oct.2005] Opera 9.0 pre1 tested - notes updated.