<div class="text">
<p>text text text</p>
</div> <div class="text1">
<p>text text text</p>
</div>
where
.text {
background-color: #FFFFFF;
margin-top: 335px;
padding: 5px;
border-right: 1px dotted #CCCCCC;
position: absolute;
width: 360px;
z-index: 3;
}
.text1 {
background-color: #FFFFFF;
border-left: 1px dotted #CCCCCC;
border-right: 1px dotted #CCCCCC;
margin: 335px 0px 0px 370px;
position: absolute;
width: 370px;
z-index: 3;
}
Basically what I have are 2 columns (each a div). The text1 shows an even stranger effect in IE. If you try to select something at about mid paragraph it automatically selects the previous half. Still this is just an example, I have other sites where I have:
<div class="content">
<p>text text text</p>
</div>
<div class="logo">
<img src="img.jpg" />
</div>
where
.content {
background: url("images/image.jpg") no-repeat 20% 27%;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
}
.logo {
margin-left: 50%;
margin-top: 5%;
position: absolute;
z-index: 2;
}
I have noticed that as soon as I change the position:absolute to position:relative you can select text normally but that ruins the layout. I have tried using #id instead of .class but no change. I can sticky you the URL if you like.
I noticed the inability to click on some links or forms when you have two (partially or totally) overlapping divs and the links and forms are in a z-index:1 div and the other div is z-index:3 or higher.
