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
    Mar 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    stacked DIV not displaying in IE correctly

    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!
    Last edited by Makino82; 03-29-2009 at 07:17 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Makino82 (03-29-2009)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

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