...

View Full Version : IE7 two DIV absolute position



ias0nas
07-13-2011, 02:21 PM
Hello,

I am having an IE7 specific issue.
When I put a div inside another one (both positioned absolutely) the inner div only displays content that fall into the first one as well.

Here is an example of HTML:



<div id="divFiltersSelection" class="modalPage" style="visibility:visible;">
<div class="modalBackgroundWhite" style="visibility:visible;">
</div>
<div class="modalContainerPositioned" style="position: absolute;">
<div class="modal900">
<div class="modalPageWhite" style="width: 900px;">
<div>
first window
</div>
<div>
first window
</div>
<div>
first window
</div>
<div>
first window
</div>
<div>
first window
</div>
<div>
first window
</div>
<div>
first window
</div>
<div id="divMandateFiltersContent" style="visibility: visible;" class="modalPage">
<div class="modalContainerPositioned" style="position: absolute;">
<div class="modal700">
<div class="modalPageSecondPopUp" style="width: 700px;">

<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


And here is the CSS:



.modalPage
{
position: absolute;
width: 100%;
height: 100%;
top: 0px; left: 0px;
z-index: 500;
visibility:hidden;
}

.modalBackgroundWhite
{
filter: Alpha(Opacity=0); -moz-opacity:0.0; opacity: 0.0;
width: 100%; height: 100%; background-color: white;
position: fixed;
top: 0px; left: 0px;
z-index:500;
}

.modalContainerPositioned
{
position: absolute;
left: 50%;
top: 50%;
z-index: 750;
margin-left:-305px;
margin-top:-50px;
}

.modal900
{
filter: Alpha(Opacity=100); -moz-opacity:1.0; opacity: 1.0;
position: absolute;
top: -100px;
left: -190px;
z-index: 1000;
padding: 0px;
}

.modalPageWhite
{
border:solid 1px black;
background:#dfdfdf;
padding:5px 5px 5px 5px;
width:900px;

}


.modal700
{
filter: Alpha(Opacity=100); -moz-opacity:1.0; opacity: 1.0;
position: absolute;
top: -5px;
left: -110px;
z-index: 1000;
padding: 0px;
}

.modalPageSecondPopUp
{
border:solid 1px black;
background:#efefef;
padding:5px 5px 5px 5px;
width:900px;

}


Thanks,
Jason

vikram1vicky
07-13-2011, 02:38 PM
Don't use positions unnecessarily...

keep your CSS simple

ias0nas
07-13-2011, 03:31 PM
For some reason if I remove the Alpha filter from the modal900 class it works...

The day Microsoft announces it discontinues IE I will be throwing a party.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum