SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Build Window to Prevent IE6 Bleed Through

    Hello

    I am constructing a proof of concept and have run into an issue with IE6. I know conceptually how this works but the technical implementation is causing me some issues. Here is conceptually how this is suppose to work.

    1. I am creating a container div which will have all elements of a window added to it.

    2. I am adding an iframe to the container div which will prevent select list html elements from bleeding through the window (needed for IE6).

    3. I added another div which would be the body of the window.

    This proof of concept has been stripped down to its basic elements since I can not solve this 1 issue with bleed thru in IE6.

    Here is the issue.

    If I do not add the bodyDiv to the container window, the Iframe prevents the select list box from bleeding through in IE6. As soon as I added the bodyDiv to the container, the select list bleeds through again. It is like the bodyDiv replaces the Iframe but I did do a getElementById after the bodyDiv was added and it does exist, so this is not a true statement.

    I was hoping someone had experience with this issue and could point out to me what I am doing incorrectly here. I know this concept works but when I dynamically build the window components as I am now, it is not working.

    I also notice if I changed the size of the bodyDiv to be smaller than the Iframe (for example, make the bodyDiv width/height 197, the iframe does prevent the bleed through). If the width/height is 198 to 200, the iframe does not prevent the bleed through.

    Any help would be appreciated… I am going crazy here.

    Thanks in advance for your time.

    Code:
    <html>
    
    <style type="text/css">
    .FrameIframe
    {
    	position: absolute; 
    	display: block;  
    	z-index: 9;
    	left: 0px; 
    	top: 0px;
    	border-style: none;
    }
    .ContainerDiv
    {
    	position: absolute; 
    	display: block; 			
    	z-index: 10;
    	border-style: none;
    
    }
    .BodyDiv
    {
    	position: relative;
    	margin: 0px;
    	float: left;
    	background: #c6c6c6;
    	vertical-align: top;
    	z-index: 10;
    }
    </style>
    
    <script language="JavaScript">
    function buildWindow()
    {
       //-- Build container
       var container = document.createElement( "div" );
       container.id = "ContainerDivId";
       container.className = "ContainerDiv";
       container.style.top = '10px';
       container.style.left = '10px';
       container.style.width = '200px';
       container.style.height = '200px';
    
       //-- Build Iframe for IE6 to prevent bleed through
       var iframe = document.createElement( "iframe" );
       iframe.id = "IframeId";
       iframe.className = "FrameIframe";
       iframe.style.width = '200px';
       iframe.style.height = '200px';
    
       container.appendChild( iframe );
    
       //-- Build Div
       var bodyDiv = document.createElement( "div" );
       bodyDiv.id = "BodyDivId";
       bodyDiv.className = "BodyDiv";
       bodyDiv.style.width = '200px';
       bodyDiv.style.height = '200px';
       //bodyDiv.style.width = '197px';
       //bodyDiv.style.height = '197px';
       bodyDiv.innerHTML = "Content that can be added";
    
       container.appendChild( bodyDiv );
    
       document.body.appendChild( container );
    }
    </script>
    
    <body>
    
    <a href="javascript: buildWindow()">Show Window</a>
    
    <select name="selectId" id="selectId">
       <option value="yes">Yes</option>
       <option value="no">No</option>
    </select> 
    
    </body>
    </html>

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it has to do with select element being a direct child of document.body and the iframe is a lower child of document.body.container

    Like for instance change
    container.appendChild( iframe );

    to
    document.body.appendChild( iframe );

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh lol its cause the bodyDiv is moving the iframe over

    try this css
    .BodyDiv
    {
    position: absolute;
    margin: 0px;
    float: left;
    background: #c6c6c6;
    vertical-align: top;
    left: 0px;
    top: 0px;
    z-index: 10;
    }

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for the feedback. After reading your post and having a night sleep I took another try at the issue. I found something else that worked but I can not explain why. Maybe you can help me.

    If I explicitly set the style of the Iframe to block after the container has been added to the page, the iframe now prevents IE6 bleed thru.

    So here are the last 2 lines of the buildWindow function.

    document.body.appendChild( container );
    iframe.style.display = "block";

    Would you know why this now makes the Iframe prevent the bleed thru in IE6? It is confusing to me since the stylesheet class .FrameIframe already has the display set to block.

    Thanks again for your time and knowledge.

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea that is wierd, could just be an edge case quirk in IE6

  6. #6
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree... thanks again for the help.


Bookmarks

Posting Permissions

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