.fl-1,.fl-2,.fl-3,.fl-4 {
border: solid 1px #000;
width: 100px;
height: 100px;
float: left;
clear: both;
position: relative;}
.fl-1 {
margin: 0 -1000px -1000px 0;
background: #abc;
z-index: 2;}
.fl-2 {
margin: 20px -1000px -1000px 80px;
background: #def;
z-index: 1;}
.fl-3 {
margin: 40px -1000px -1000px 160px;
background: #abc;
z-index: 2;}
.fl-4 {
margin: 60px -1000px -1000px 240px;
background: #def;
z-index: 1;}
.no {
position: absolute;
top: 40%;
left: 40%;}
#independent {
height: 120px;
width: 400px;
margin-bottom: 40px;
position: relative;
z-index: 0;
border-top: solid 1px #999;
border-left: solid 1px #999;
border-bottom: solid 1px #bbb;}
/* IE-win corr follows */
@media screen {
* html #independent div {
display: inline;}
}
/* IE-Mac corr follows */
/*\*//*/
.fl-1 {
margin: 0;}
.fl-2 {
margin: 20px 0 0 -10px;}
.fl-3 {
margin: 40px 0 0 -10px;}
.fl-4 {
margin: 60px 0 0 -10px;}
/**/
Large negative margin-right and margin-bottom is completely "removing" these floats. That's one method for fixing IE-win's buggy behavior.
- Moz/FF and Safari are layering these floats as indicated by z-index.
- Opera (pre v9.0) is unable to layer these floats.
- Opera 9.0 is layering these floats as indicated by z-index.
- IE-win is layering these floats as indicated by z-index.
- IE-Mac is layering these floats as indicated by z-index. However, IE-Mac can't handle "completely removed floats", and margin-top is ignored. Thus what you see in IE-Mac is the best correction I've been able to feed it.
last rev: 18.mar.2006.