Skip navigation
TheDigital
Currently Being Moderated

Offset div / positioning problem in IE

Apr 17, 2012 11:45 AM

Tags: #internet #div #explorer #ie #position #positioning #offset

I've posted this problem in another thread but it was a sub question. Anyway, the problem I'm having is positioning a div over all other divs. I've managed to get it to work perfectly fine on Firefox and Chrome the way I wanted. The problem is usually when it comes to internet explorer. I just want the image or div placed on the right side of the site but changing the properties always has the same result, internet explorer places is far beyond where it's suppose to be. I'll add images, the code, and the live site below. Any help would be appreciated.

 

Chrome View:

Chrome View.png

Firefox View:

Firefox View.png

*IE View (Wrong):

IE View.png

 

Website: http://emergencyclean-up.com

 

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" />

<title>Emergency Clean Up Homepage</title>

<style type="text/css">

body {

          background-color: #333333;

}

#entireSite #sidebar #spacer {

          height: 300px;

          width: 350px;

}

#entireSite #sidebar #newsletter {

          background-image: url(../Images/NewsLetterBackground.png);

          height: 165px;

          width: 350px;

          color: #FFF;

}

</style>

<link href="main.css" rel="stylesheet" type="text/css" />

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<script type="text/javascript">

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>

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

</head>

 

 

<body onload="MM_preloadImages('../Images/Buttons/buttonOver_01.gif','../Im ages/WaterDamageOver.png','../Images/FireDamageOver.png','../Images/Mo ldRemediationOver.png','../Images/SootRemovalOver.png','../Images/Odor ControlOver.png','../Images/facebook-logoOver.png','../Images/yelp-log oOver.png','../Images/LinkedIn_logoOver.png','../Images/twitter-logoOv er.png')">

 

 

 

<!-- This begins the coding for centering the entire webpage -->

<div style="width:100%;">

<div style="width:900px; margin-left:auto; margin-right:auto;">

  <div style="width:100%; float:left;background-color:#333333;">

 

 

 

<!-- This begins the background layer for the navbarArea -->

<div id="navbarArea">

 

 

 

 

<!-- This begins the container div for the navbar -->

<div align="center">

  <div id="navbar">

  <ul id="MenuBar1" class="MenuBarHorizontal">

    <li><strong><a href="index.html">Home Page</a> </strong></li>

    <li><strong><a href="About Us.html">About Us</a></strong></li>

    <li><strong><a href="Services.html">Services</a> </strong></li>

    <li><strong><a href="Testimonials.html">Testimonials</a></strong></li>

    <li><strong><a href="Contact Us.html">Contact us</a></strong></li>

    <li><strong><a href="Special Offers.html">Special Offers</a></strong></li>

   

  </ul>

 

</div></div>

<!--- This ends the container div for the navbar -->

 

 

 

 

 

 

 

 

</div>

<!-- This ends the background layer for the navbarArea -->

 

 

 

 

 

 

 

 

<!--This begins the entireSite area *excludes navbar* -->

<div id="entireSite">

 

 

 

 

<!-- This begins the container for the sidebar image -->

<div id= "sidebar">

 

 

<!-- This begins a spacer div -->

<div id= "spacer">

 

 

</div>

<!-- This ends a spacer div -->

 

 

<!--This begins newsletter div -->

<div id= "newsletter">

 

 

<center><font size="5">Subscribe to Our Newsletter</font></center>

 

 

<form action="subscriptionform.php" method="post" id="Newsletter">

<table width="100%" border="0" cellpadding="3">

  <tr>

    <td>Name:</td>

    <td><input name="News Letter Name" type="text" size="30" maxlength="40" /></td>

  </tr>

  <tr>

    <td>Email:</td>

    <td><input name="News Letter Email" type="text" size="30" maxlength="40" /></td>

  </tr>

  <tr>

    <td>Zip Code:</td>

    <td><input name=" News Letter Postal Code" type="text" size="10" maxlength="12" /></td>

  </tr>

</table>

<center><input name="Subscribe" type="Submit" id="Subscribe" /></center>

 

 

</form>

 

 

 

 

</div>

<!-- This ends newsletter div -->

 

 

 

 

 

  </div>

<!-- This ends the sidebar image area-->

 

 

 

 

<!-- This begins the maintext area -->

<div id= "maintext">

 

 

<!-- This begins the titlebar inside the maintext area-->

<div id= "titlebar">

<br />

 

 

 

 

</div>

<!-- This ends the titlebar of maintext area -->

<br  />

 

 

<center><img src="../Images/Logo.png" width="500" height="160" alt="Logo" />

<br />

<br />

<center>Choose from one our various services offered here at Emergency Clean-up.</center>

<br />

<table width="100%" border="0" cellpadding="0">

  <tr>

    <td><center><a href="Water Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WD','','../Images/WaterDamageOver.png',1)" ><img src="../Images/WaterDamage.png" alt="Water Damage" name="WD" width="75" height="75" border="0" id="WD" /></a>

    <br />

    Water Damage</center></td>

    <td><center><a href="Fire Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FD','','../Images/FireDamageOver.png',1)"> <img src="../Images/FireDamage.png" alt="Fire Damage" name="FD" width="75" height="75" border="0" id="FD" /></a>

    <br />

    Fire Damage</center></td>

    <td><center><a href="Mold Remediation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MR','','../Images/MoldRemediationOver.png' ,1)"><img src="../Images/MoldRemediation.png" alt="Mold Remediation" name="MR" width="75" height="75" border="0" id="MR" /></a>

    <br />

    Mold Remediation</center></td>

    <td><center><a href="Soot Removal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SR','','../Images/SootRemovalOver.png',1)" ><img src="../Images/SootRemoval.png" alt="Soot Removal" name="SR" width="75" height="75" border="0" id="SR" /></a>

    <br />

    Soot Removal</center></td>

    <td><center><a href="Odor Control.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('OC','','../Images/OdorControlOver.png',1)" ><img src="../Images/OdorControl.png" alt="Odor Control" name="OC" width="75" height="75" border="0" id="OC" /></a>

    <br />

    Odor Control</center></td>

  </tr>

</table>

<br />

<center> For more services please click <a href="Services.html">here</a>. </center>

</div>

<!-- This ends the maintext area -->

 

 

<!-- This begins the bottombar image -->

<div id= "bottombar">

 

 

  <img src="../Images/bottomBar.png" width="900" height="25" alt="bottombar" /></div>

<!-- This ends the bottom bar image -->

 

 

<!-- This begins the hotlinks area -->

<div id= "hotlinks">

 

 

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','../Images/facebook-logoOver.png',1 )"><img src="../Images/facebook-logo.png" alt="Facebook" name="FB" width="25" height="25" border="0" id="FB" / align="left"></a>

 

 

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YP','','../Images/yelp-logoOver.png',1)">< img src="../Images/yelp-logo.png" alt="Yelp" name="YP" width="25" height="25" border="0" id="YP" / align="left"></a>

 

 

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TR','','../Images/twitter-logoOver.png',1) "><img src="../Images/twitter-logo.png" alt="Twitter" name="TR" width="25" height="25" border="0" id="TR" / align="left"></a>

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LI','','../Images/LinkedIn_logoOver.png',1 )"><img src="../Images/LinkedIn_logo.png" alt="Linked In" name="LI" width="25" height="25" border="0" id="LI" / align="left"></a>

</div>

<!--This ends the hotlinks area -->

 

 

<!-- This begins the copyright area -->

<div id= "copyright">

<br />

<p align="right">Content copyright 2012. EMERGENCYCLEAN-UP.COM. All rights reserved.</p>

 

 

</div>

<!-- This ends the copyright area -->

 

 

 

 

</div>

<!-- This ends the entireSite container-->

 

 

 

 

<div id="containerEmergency"><img src="../Images/emergency contact.png" width="220" height="220" />

</div>  

  </div>

</div>

</div>

 

 

<!-- This ends the coding for centering the entire webpage *excludes navbar* -->

 

 

<script type="text/javascript">

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

</script>

</body>

</html>

 
Replies
  • Currently Being Moderated
    Apr 17, 2012 7:55 PM   in reply to TheDigital

    I often find that differences between FF and IE often boil down to errors in closing page element tags... like not closing <div> or <script> tags. So first validate and fix any of those issues:

    http://validator.w3.org/

    a number of those 35 errors relate to closing tags.

    Then to review z-indexing (stacking order) from an older post:

    Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:

    The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.

    z-indexing ONLY works with elements that have a declared position.

    Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.

    The least understood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.

    So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:

    If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
    If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
    If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.

    So be sure to give a declared position to both the parent and the child <div>.

     

    Neglecting to follow this rule is the main reason why the use of declared positioning fails.

    And just one more point, almost never is it necessary to use a declared position, and that method certainly should not be used for general page layout.

    But if and when a special situation comes up that you really do need z-indexing... then of course you will also have to use a declared position. Understanding the "Parent Rule" will make working with z-indexing and declared positions much easier and more successful.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 1:25 AM   in reply to TheDigital

    A few steps to follow.

     

    First make a back-up copy of the site folder just incase things go belly up and you need to revert back to the original.

     

    Add position: relative; to the <div> below (as shown)

    <div style="width:900px; margin-left:auto; margin-right:auto; position: relative;">

     

     

    Next move your <div> named 'containerEmergency' to directly below the <div> which you added position: relative; to:

     

    <div style="width:900px; margin-left:auto; margin-right:auto; position: relative;">

    <div id="containerEmergency"><img src="Images/emergency contact.png" width="220" height="220" />

     

     

    Add z-index: 100; to the 'containerEmergency' css as shown below:

     

    #containerEmergency {

        height: 250px;

        width: 250px;

        position: relative;

        top: 0px;

        right: 0px;

        left: 720px;

        border-top-style: none;

        border-right-style: none;

        border-bottom-style: none;

        border-left-style: none;

        border-top-color: #F00;

        border-right-color: #F00;

        border-bottom-color: #F00;

        border-left-color: #F00;

        z-index: 100;

    }

     

    Add z-index: 2; to the 'entireSite' css:

     

    #entireSite {

        height: auto;

        width: 900px;

        position: absolute;

        top: 50px;

        z-index: 2;

    }

     

    Add z-index: 1; to the 'navbar' css:

     

    #navbarArea #navbar {

        background-color: #929BA0;

        height: 40px;

        width: 900px;

        position: relative;

        top: 20px;

        left: auto;

        right: auto;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 12px;

        z-index: 1;

    }

     

     

    That should now work ok in IE.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points