title: 2 Divs with fixed position, one gets pushed away as the other gets shown
body: <p>I programm a website with a footer, which is fixed at the bottom of the site. I show a div element (#container) on a mouseover event which is also fixed, right above the footer. In chrome it works perfectly when the div shows up (display:none to display:inline). In IE the footer gets pushed down EVERY SINGLE TIME and i have no idea why :'-( CSS looks like this:</p>
  
  <pre><code>#footer {
      position: fixed !important; 
  
      /*position: absolute;*/
      height: 20px;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 5px;
      background-color: #efefef;
      text-align: left;   
      z-index: 3;
  }
  
   #container{
      position: fixed;
      height: 550px;
      bottom: 30px;
      right:0;
      width: 550px;
      z-index: 2;
      display: none;
      background: url(images/pau1_500g.png) no-repeat center center ;
      border: black 2px solid;
      background-color: rgb(255,255,255);
      background-size: 55%;
      z-index:2;
  }
  </code></pre>
  
  <p>The first line NO LONGER looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"&gt;
  </code></pre>
  
  <p>thanks in advance and comment if i should provide more code/info!</p>
  
  <p>EDIT:EDIT:
  HTML with JS:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;*****&lt;/title&gt;
  &lt;link href="myCSS.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
  var req;
          var params;
          var posx;
          var posy;
          var testTime;
          var outTime;
      function realTest(id){
          params = "pauid="+id+"&amp;nom=true&amp;extreme=true";
          req = new XMLHttpRequest();
          req.open("get","azubi/highchartAJAX.php?"+params,true);
          req.send(null);
          req.onreadystatechange = evaluate;
      }
  
      function test(id){
              clearTimeout(testTime);
              testTime = setTimeout("realTest("+id+")",3000);
          }
  
      function evaluate(){
          if(req.readyState == 4 &amp;&amp; req.status == 200){
              var se = document.createElement('script');
              se.type = "text/javascript";
              se.text = req.responseText;
              se.id = "testing";
              var toDel = document.getElementsByTagName("script");
              for(i = 0; i &lt; toDel.length; i++){
                  if(toDel[i].id=="testing"){
                      toDel[i].parentNode.removeChild(toDel[i]);
                  }
              }
              document.body.appendChild(se);
          }
          var toShow = document.getElementById("container");
          toShow.style.display = "inline";
      }
  &lt;/script&gt; 
  &lt;/head&gt;
  &lt;body &gt;
  &lt;div id="container"&gt; &lt;/div&gt;
  
  &lt;tr onmouseover='test($row[56])' onmouseout='out(this)'&gt;
  &lt;div id="footer"&gt;
  ***
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>