Не работает только в IE

Нужно чтобы при прокрутке фиксировалась менюшка на верху и оставалась там, везде работает, а в ИЕ нет! Помгите убил часа 3 дебага, хоть и сам программист со стажем в ИЕ не бум бум, вот прошу помощи!



<html>
<head>
  <meta charset="cp1251">
  <link rel="stylesheet" href="style.css" type="text/css" media="all">
  <script src="js.js"></script>
</head>
<body>


<div id="menu">
  <table cellspacing="2" cellpadding="10">
    <tr>  
      <td><center><a href="#"><img src="./files/ok.jpg" width="40">
Отметить</a></center></td>
      <td><center><a href="#"><img src="./files/no.jpg" width="40">
Удалить</a></center></td>
    </tr>
  </table>
</div>

 
<div id="upper" class="fixed" style="display:none;">
  <table cellspacing="0" cellpadding="5">
    <tr>  
      <td align="left"><center><a href="#">Отметить</a></center></td>
      <td align="right"><center><a href="#">Удалить</a></center></td>
    </tr>
  </table>
</div>  



<img src="./files/1.jpg" width="235">  
<img src="./files/2.jpg" width="235">  
<img src="./files/3.jpg" width="235">  
<img src="./files/4.jpg" width="235">
<img src="./files/5.jpg" width="235">
<img src="./files/6.jpg" width="235">
<img src="./files/7.jpg" width="235">
<img src="./files/8.jpg" width="235">  
<img src="./files/9.jpg" width="235">
<img src="./files/10.jpg" width="235">
<img src="./files/11.jpg" width="235">
<img src="./files/12.jpg" width="235">
<img src="./files/1.jpg" width="235">  
<img src="./files/2.jpg" width="235">  
<img src="./files/3.jpg" width="235">  
<img src="./files/4.jpg" width="235">
<img src="./files/5.jpg" width="235">
<img src="./files/6.jpg" width="235">
<img src="./files/7.jpg" width="235">
<img src="./files/8.jpg" width="235">  
<img src="./files/9.jpg" width="235">
<img src="./files/10.jpg" width="235">
<img src="./files/11.jpg" width="235">
<img src="./files/12.jpg" width="235">


 
<script>
  var men = document.getElementById('menu');
  var menutop = coords(men).top;
  window.onscroll = function() {
    var pageY = window.pageYOffset || document.documentElement.scrollTop;
    if (pageY >= menutop + men.offsetHeight)
    {
      document.getElementById('upper').style.display="inline-block";
    }
    else
    {
      document.getElementById('upper').style.display="none";
    }

  }
</script>



</body>
</html>
 


style.css

    body
    {
      margin: 10px 200px 0px 200px;
    }
   
    a:link    {color:blue; font-weigth:bold;}
    a:visited {color:blue; font-weigth:bold;}
    a:hover   {color:red; font-weigth:bold;}
    a:active  {color:yellow; font-weigth:bold;}

    .fixed
    {
      position: fixed;
      top:0;
      border-left:3px solid #bef574;
      border-right:3px solid #bef574;
      border-bottom:3px solid #bef574;
      background-color:#bef574;
      -webkit-border-bottom-left-radius:12px;
      -webkit-border-bottom-right-radius:12px;
    }
 


js.js

function coords(elem)
{
    var box = elem.getBoundingClientRect();
    var body = document.body;
    var docElem = document.documentElement;
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;
    return { top: Math.round(top), left: Math.round(left) };
}
 

1 ответов


Что-то мне подсказывает, что ваша проблема заключается в отсутствии доктайпа.

<!doctype html> в самом начале документа.