Bootstrap из Twitter Ошибка IE7

Я обнаружил ошибку на сайте, который я создал в IE7.

URL-адрес сайта:http://moldipaints-dokkum.nl/productcontroller/getProductList/19

При открытии продукта в IE7 модальное окно начальной загрузки находится за страницей, а серое наложение — сверху. и изображения находятся поверх модального.

Я изменил следующее:

css position :относительный/абсолютный/фиксированный (Только модальное окно отображается неправильно)

css z -индекс:(Нет никакой разницы)

Возможное исправление Twitter (Гитхаб );http://jsfiddle.net/ATeaH/8/

Ни один из них не является правильным. Что я могу сделать, чтобы это сработало?

Обновить код из проекта

Рендеринг страницы

    



    
'; //0,2,4,6,8 } echo '
'; echo '
'; // echo ''.$title.''; echo '
'; echo '
'; echo ''.$title.''; echo '
'; echo '
'; ?> '; } } }?>

CSS Bootstrap

   .modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
      background-color: #000000;
    }
   .modal {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1000;
      min-height: 500px;
      width: 700px;
      margin: -275px -380px;
      background-color: #ffffff;
      border: 1px solid #999;
      border: 1px solid rgba(0, 0, 0, 0.3);
      *border: 1px solid #999;
      /* IE6-7 */

      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      -webkit-background-clip: padding-box;
      -moz-background-clip: padding-box;
      background-clip: padding-box;
      }

Проект стилей CSS

    /*   Producten   */
   .productView{position:absolute; width:100%; height:700px; top:50px; margin:auto;}
   .aligndiv{position:relative; width:1024px; margin:auto;}
   .productcenter{width:1024px; height:500px; margin:auto;}
   .productenview{position:relative; width:480px; height: 600px; overflow-x:scroll; overflow-y:hidden; float:left; left:10%; margin:auto; margin-right:300px}
   .productcontainer{height: 400px; margin-top:90px; z-index:0;}
   .productmenu{position:absolute; width:300px; top:100px; right:5%; z-index:0;}
   .seperatorforproduct{position:relative; width:240px; height:480px; float:left;}

Заранее спасибо

12
задан Andres Ilich 3 May 2012 в 18:22
поделиться