Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE7 two DIV absolute position

    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:

    Code:
    <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:

    Code:
    .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

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Don't use positions unnecessarily...

    keep your CSS simple

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •