...

View Full Version : Div hiding behind iframe



ScottInTexas
10-14-2003, 06:20 PM
I have pop-up Divs that are menu items. One of the selections calls up an XML page and it is loaded into an iframe just right of the menus. If you go over the menus then, half of the pop-up is behind the iframe.

What is happening?

dga
10-14-2003, 06:39 PM
Without seeing your page and code, my guess you need to add something in the div like the following example:

<div style="z-index:100;">

dga

ScottInTexas
10-14-2003, 08:34 PM
Thanks for responding,

I tried the z-index, both in line as you showed then I tried it in my style sheet. It didn't work.

I read up on the z-index and it said that the iframe supports this property so I gave the iframe a zindex of 0 and the div a zindex of 100. But that didn't work either. Since the page is built from ASP I checked to make sure the code didn't do somthing to it.

It is only covered when the XML is displayed in the IFrame. Any other page stays in the background. Here is some of the code. There is tons of it so too much to place here.;




Style Sheet

.popup{
position:absolute;
visibility:hidden;
width:10em;
zindex:100;
}
#centerFrame{
position:relative;
zindex:-1;
}
#dataWindow{
scrolling:auto;
width:100%;
height:100%;
border:none;
background-color: #f3f3f3;
zindex:0;
}



default.asp

<div id="centerFrame" onMouseOver="closeopendivs()" height="auto">
<iframe frameborder="0" id="dataWindow" name="dataWindow" onMouseOver="closeopendivs()" scrolling="auto"></iframe>
</div>

in the popup building asp

<div id="popwin<%=MainRS("MenuID")%>" class="popup">
<table class="menutbl>"




This is the xsl for the page that is a problem



<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<link rel='stylesheet' href='styles.css' type='text/css' />
<body>
<h1>Resume Of <xsl:value-of select="resume/name" /></h1>
<xsl:value-of select="resume/photo" />
<h3>Education:</h3>
<xsl:for-each select="resume/education/school">
<h4><xsl:value-of select="school_name" /></h4><br />
<xsl:value-of select="start/date/month" />-
<xsl:value-of select="start/date/day" />-
<xsl:value-of select="start/date/year" /> To
<xsl:value-of select="end/date/month" />-
<xsl:value-of select="end/date/day" />-
<xsl:value-of select="end/date/year" />
</xsl:for-each>
<h3>Work Background</h3>
<xsl:value-of select="resume/work_background" />
<h3>Personal Information</h3>
<xsl:value-of select="resume/personal_info" />
<h3>Additional Information</h3>
<xsl:value-of select="resume/additional_info" />
</body>
</html>
</xsl:template>
</xsl:stylesheet>



I hope someone can tell me what is goin on here.

liorean
10-14-2003, 08:41 PM
What browser are you on? This is the same problem as we've been seeing in form fields and plugins, that an external control is rendered on top at all times. Didn't both Microsoft and Mozilla address it some time back, though, or am I entirely mistaken?

dga
10-14-2003, 08:47 PM
It's actually z-index, not zindex ... try that.







Style Sheet

.popup{
position:absolute;
visibility:hidden;
width:10em;
zindex:100; // change here
}
#centerFrame{
position:relative;
zindex:-1; // and change here
}
#dataWindow{
scrolling:auto;
width:100%;
height:100%;
border:none;
background-color: #f3f3f3;
zindex:0; // and change hhere
}





dga

ScottInTexas
10-14-2003, 09:09 PM
Thanks again,

Yes I also tried z-index just to be safe.

This should be generic not just microsoft. Unfortunately I end up gravitating to IE syntax.

It just has to be something about the XML/XSL page.

Thanks again

dga
10-14-2003, 09:38 PM
Style Sheet

.popup{
position:absolute;
visibility:hidden;
width:10em;
zindex:100;
}
#centerFrame{
position:relative;
zindex:-1;
}
#dataWindow{
scrolling:auto;
width:100%;
height:100%;
border:none;
background-color: #f3f3f3;
zindex:0;
}



default.asp


These two id match what you're using in the style sheet:



<div id="centerFrame" onMouseOver="closeopendivs()" height="auto">
<iframe frameborder="0" id="dataWindow" name="dataWindow" onMouseOver="closeopendivs()" scrolling="auto"></iframe>
</div>


This one does not match:




<div id="popwin<%=MainRS("MenuID")%>" class="popup">
<table class="menutbl>"


Shouldn't it be popup and not popwin? I might be wrong here.
I'm far from an expert with style sheets.

dga

ScottInTexas
10-19-2003, 05:16 PM
I appreciate the responses I have received to this post, however (and you just knew there would be a however), the silly div is still half way behidn the xml document being displayed.

I have tried a lot of combinations of setting zIndexes on the different divs, but nothing seems to be able to overcome the xml. In my script I put an alert to tell me what the zIndex was when the window popped up. It was set at 100. Should be all the way on top.

Hope someone can see what is the problem. Here are the parts of the code making it all happen.




styles are in a linked stylesheet.

#dataWindow{
position:relative;
scrolling:auto;
width:100%;
height:100%;
border:none;
background-color: #f3f3f3;
zIndex:0;
}
#centerFrame{
position:relative;
margin:0;
padding:0;
border:none;
width:100%;
height:100%;
background-color:#f3f3f3;
scroll:none;
zIndex:-1;
}

.popup{
position:absolute;
visibility:hidden;
font-size:10pt;
font-weight:200;
font-family:arial;
text-align:center;
color:#000000;
border:thin solid black;
background-Color:#f3f3f3;
width:10em;
zIndex:100;
}


Functions are in an included script file.

function showMenu(MainMnu){
closeopendivs();
var menunam=String(MainMnu.id);
var menunum=menunam.charAt(menunam.length-1);
var SubMnu=document.getElementById("popwin" + menunum);
if (SubMnu){
var Mnu_Position = {
x : getRealPos(MainMnu,"x"),
y : getRealPos(MainMnu,"y")
};
SubMnu.style.left=Mnu_Position.x -50;
SubMnu.style.top=Mnu_Position.y;
SubMnu.style.zIndex="100";
SubMnu.style.visibility="visible";
}
}

function loadPage(subLink, pgType){
closeopendivs();
switch (pgType){
case "Resume":
document.all.dataWindow.src=subLink+".xml"
break
case "asp":
document.all.dataWindow.src=subLink+".asp"
break
}
document.all.dataWindow.style.zIndex=-1;
}


function closeopendivs(){
var menus=document.all.tags("div");
for (var i=0;i<menus.length;i++){
if (menus(i).style.visibility=="visible"){
menus(i).style.visibility="hidden";
}
}
}

This body is the default.asp page

<body onload="setup()">
<div id="Layout" >
<div id="header" onMouseOver="closeopendivs()">
<!-- #include virtual="/header.asp" -->
</div>
<div id="leftCol">
<hr align="center" width="100%">
<!-- #include virtual="/Menus.asp" -->
<hr align="center" width="100%">
</div>
<div id="centerFrame" onMouseOver="closeopendivs()">
<iframe frameborder="0" id="dataWindow" name="dataWindow" onMouseOver="closeopendivs()" scrolling="auto"></iframe>
</div>
<div id="footer" onMouseOver="closeopendivs()">
<table><tr>
<td width="20%"><img src="images/smAddress.jpg" width="119" height="100" hspace="10" border="0" align="left"></td>
<td><center>DW Surveyor, Inc. 131 Commerce Road, Clute, Texas, 77531 USA * (979) 265-3622</center></td>
</tr>
</table>
</div>
<!-- #include virtual="/popupMenus.asp" -->
<form id="subLinkForm" Method="Post" target="dataWindow">
<input type="hidden" name="whatToGet" />
</form>
</div>
</body>

This is the XSL page

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<link rel='stylesheet' href='styles.css' type='text/css' />
<body>
<h1>Biography: <xsl:value-of select="resume/name" /></h1>
<xsl:value-of select="resume/photo" />
<h3>Education:</h3>
<xsl:for-each select="resume/education/school">
<h4><xsl:value-of select="school_name" /></h4><br />
<xsl:value-of select="start/date/month" />-
<xsl:value-of select="start/date/day" />-
<xsl:value-of select="start/date/year" /> To
<xsl:value-of select="end/date/month" />-
<xsl:value-of select="end/date/day" />-
<xsl:value-of select="end/date/year" />
</xsl:for-each>
<h3>Work Background</h3>
<xsl:value-of select="resume/work_background" />
<h3>Personal Information</h3>
<xsl:value-of select="resume/personal_info" />
<h3>Additional Information</h3>
<xsl:value-of select="resume/additional_info" />
</body>
</html>
</xsl:template>
</xsl:stylesheet>



It is a long post, but the info is necessary if I hope to get a working answer.

Thanks everybody.:confused:

Danne
10-20-2003, 03:16 PM
This problem occurs for me while using IE5.0. So if that's the browser you are using, you have to work around it.

I solved it by putting the content of the pop-up inside an iframe. And the iframe inside the pop-up div.

ScottInTexas
10-20-2003, 04:57 PM
Thanks for the reply,

I am using IE6.0 but I'll still give it a try when I get home today. It may be something that has to worked around.

ScottInTexas
11-01-2003, 03:21 PM
I'm back again. This is the big problem. I have tried the suggestions and nothing changed. I'm thinking that the xml page which is the src of the iframe is having a zIndex higher than the popup (100). Since it is loading after the popup I guess it takes visible priority. How can I set the zIndex of the XML? If I can force it to have a zindex of < 100 then my popup should be on top.

Roy Sinclair
11-03-2003, 09:06 PM
Check out this thread, it may have the solution you need:

http://www.codingforums.com/showthread.php?s=&threadid=28261



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum