...

View Full Version : stacked DIV not displaying in IE correctly



Makino82
03-28-2009, 05:09 PM
This has been bugging me for days now! This layout works perfectly in Dreamweaver and in Firefox, but not in IE.

I need to have the semi-transparent background so I'm attempting to place a DIV ontop to have the text / images within.

I even tried using z-index values and they make no difference whatsoever. It seems IE keeps trying to place the DIV layer I'm trying to stack on the top relative to the other layers. This is the CSS for the 2 div layers:

#content {
opacity:0.5;
filter:alpha(opacity=50);
background-color: #dbeafa;
float:left;
width:760px;
padding-top:0px;
height:500px;
margin-left:17px;
margin-top:19px;
margin-bottom:0px;
display:inline;
z-index:1;
}

#content2 {
width:760px;
padding-top:0px;
height:450px;
position:absolute;
margin-left:-760px;
margin-top:19px;
margin-bottom:0px;
display:inline;
z-index:2;


Thanks so much for any help / ideas!

Excavator
03-28-2009, 06:19 PM
Hello Makino82,
Check your code in the validator, it finds 71 errors. Most are nothing to do with your problem but you should fix the ones you can. See the links about validating in my sig below.

Checking further, in the CSS validator this time, it says opacity is a CSS3 thing and IE would have no support for that.
Remove the opacity:0.5; and you get a parsing error on filter:alpha(opacity=50);
I've never messed with opacity so I'm really just mimicing what the validator finds.

Your code seems to follow the example at http://www.w3schools.com/Css/css_image_transparency.asp so it must be something else.
How does it work when you get rid of the tables, nested divs and absolute positioning? Like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="JavaScript">
var randnum = Math.random();
var inum = 10;
// Change this number to the number of images you are using.
var rand1 = Math.round(randnum * (inum-1)) + 1;
images = new Array
images[1] = "layoutImages/back1.jpg"
images[2] = "layoutImages/back2.jpg"
images[3] = "layoutImages/back3.jpg"
images[4] = "layoutImages/back4.jpg"
images[5] = "layoutImages/back5.jpg"
images[6] = "layoutImages/back6.jpg"
images[7] = "layoutImages/back7.jpg"
images[8] = "layoutImages/back8.jpg"
images[9] = "layoutImages/back9.jpg"
images[10] = "layoutImages/back10.jpg"

// Ensure you have an array item for every image you are using.
var image = images[rand1]
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<title>Bill Patterson Photos</title>
<!--[if IE]>
<style type="text/css" media="all">.borderitem {border-style:solid;}</style>
<![endif]-->
<style type="text/css">
<!--

#content {
opacity:0.5;
filter:alpha(opacity=50);
background-color: #dbeafa;
float:left;
width:760px;
padding-top:0px;
height:500px;
margin-left:17px;
margin-top:19px;
margin-bottom:0px;
display:inline;
z-index:1;

}

-->
</style>
<link href="teststyle.css" rel="stylesheet" type="text/css" />
</head>

<script language="JavaScript">
document.write('<body background="' + image + '">')
</script>

<div id="main">
<img src="images/header.jpg" id="header" alt="" />
<br class="clearfloat" />
<div id="sideBar">
<table width="161" border="0" align="center" cellpadding="0">
<tr>
<td><a href="bill.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','layoutImages/home2.gif',1)"><img src="layoutImages/home.gif" alt="Home" name="Home" width="161" height="31" border="0" id="Home" /></a></td>
</tr>
<tr>
<td><a href="http://sil.usask.ca/userfees.htm" target="_blank" onmouseover="MM_swapImage('Analytical Fees','','layoutImages/afees2.gif',1)" onmouseout="MM_swapImgRestore()"><img src="layoutImages/afees.gif" alt="Analytical Fees" name="Analytical Fees" width="161" height="30" border="0" id="Analytical Fees" /></a></td>
</tr>
<tr>
<td><a href="courses.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Courses','','layoutImages/courses2.gif',1)"><img src="layoutImages/courses.gif" alt="Courses" name="Courses" width="161" height="30" border="0" id="Courses" /></a></td>
</tr>
<tr>
<td><a href="curriculumVitae.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Curriculum Vitae','','layoutImages/curricv2.gif',1)"><img src="layoutImages/curricv.gif" alt="Curriculum Vitae" name="Curriculum Vitae" width="161" height="30" border="0" id="Curriculum Vitae" /></a></td>
</tr>
<tr>
<td><a href="funding.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Funding','','layoutImages/funding2.gif',1)"><img src="layoutImages/funding.gif" alt="Funding" name="Funding" width="161" height="30" border="0" id="Funding" /></a></td>
</tr>
<tr>
<td><a href="gradStudents.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Grad Students','','layoutImages/grads2.gif',1)"><img src="layoutImages/grads.gif" alt="Grad Students" name="Grad Students" width="161" height="30" border="0" id="Grad Students" /></a></td>
</tr>
<tr>
<td><a href="http://sil.usask.ca/" target="_blank" onmouseover="MM_swapImage('Isotope Lab','','layoutImages/isotope2.gif',1)" onmouseout="MM_swapImgRestore()"><img src="layoutImages/isotope.gif" alt="Isotope Lab" name="Isotope Lab" width="161" height="30" border="0" id="Isotope Lab" /></a></td>
</tr>
<tr>
<td><a href="publications.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Publications','','layoutImages/publications2.gif',1)"><img src="layoutImages/publications.gif" alt="Publications" name="Publications" width="161" height="30" border="0" id="Publications" /></a></td>
</tr>
<tr>
<td><a href="undergrad.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Undergrads','','layoutImages/undergrad2.gif',1)"><img src="layoutImages/undergrad.gif" alt="Undergrad" name="Undergrads" width="161" height="30" border="0" id="Undergrads" /></a></td>
</tr>
<tr>
<td><a href="http://artsandscience.usask.ca/geology/" target="_blank" onmouseover="MM_swapImage('Geology','','layoutImages/geology2.gif',1)" onmouseout="MM_swapImgRestore()"><img src="layoutImages/geology.gif" alt="Geology" name="Geology" width="161" height="30" border="0" id="Geology" /></a></td>
</tr>
<tr>
<td><a href="interests.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Personal','','layoutImages/personal2.gif',1)"><img src="layoutImages/personal.gif" alt="Personal Interests" name="Personal" width="161" height="30" border="0" id="Personal" /></a></td>
</tr>
<tr>
<td><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','layoutImages/contact2.gif',1)"><img src="layoutImages/contact.gif" alt="Contact Me" name="Contact" width="161" height="30" border="0" id="Contact" /></a></td>
</tr>
<tr>
<td><a href="photos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Photos','','layoutImages/photos2.gif',1)"><img src="layoutImages/photos.gif" alt="Photos" name="Photos" width="161" height="30" border="0" id="Photos" /></a></td>
</tr>
</table>
<p><a href="bill.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','layoutImages/home2.gif',1)"><br />
</a></p>
</div>


<div id="content">
<p>THIS TEXT SHOULD BE IN THE MIDDLE OF THE CONTENT AREA!</p>
</div>



<div id="bottom">
<table width="950" border="0" cellpadding="2">
<tr>
<td height="55" align="center" valign="middle"><span class="kristietext">� 2009 Web design by: kristie.muzyka@gmail.com</span></td>
</tr>
</table>
</div>
</div>


</body>
</html>

Makino82
03-28-2009, 06:57 PM
That allows the text to appear in the right place for sure, the problem being that now any content in that area will have the opacity applied to it as well (the text and images also have opacity). That's why I'm trying to have a seperate DIV layer on top just for content that won't have the opacity.

Maybe there's a better way to make a transparent background behind the content? Or maybe it's something to do with the negative margin values that IE doesn't like?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum