Bootstrap from Twitter IE7 bug

Question

I found a bug in a site that i have created in IE7.

URL of the site: http://moldipaints-dokkum.nl/productcontroller/getProductList/19

When opening a product in IE7 the bootstrap modal is behind the page and the grey overlay is on top. and images are on top of modal.

I changed the following:

css position : relative/absolute/fixed (Only modal is not showing correctly)

css z-index : (Not any difference)

Potential fix Twitter (Github) ; http://jsfiddle.net/ATeaH/8/

None of these are correct. What can i do to make this work?

Update Code from project

Page rendering

    <?php
    if(isset($productByType)){
        $countwidth = (count($productByType) / 2)*260+100;
    }?>



    <div class="productView">
        <div class="aligndiv">
           <div class="productcenter">
               <div class="productenview">
                   <div class="productcontainer" style="width:<?=@$countwidth?>px;" >
                       <?php
                       if(!empty($productByType)){
                       for($i=0;$i < count($productByType); $i++){

                       $id = $productByType[$i]['id'];
                       $title = $productByType[$i]['title'];
                       $img = base_url('/img/producten/'.$productByType[$i]["img"]);

                       if($i % 2 == 0){
                          echo '<div class="seperatorforproduct">';
                       //0,2,4,6,8
                       }

                    echo '<div class="button btnstyle">';
                    echo '<div class="imgbtn">';    
                    //  <!-- afbeelding -->
                    echo '<img src="'.$img.'" title="'.$title.'" alt="'.$title.'" data-toggle="modal" href="#modal'.$id.'" />';
                    echo '</div>';  
                    echo '<div class="txtbtn txtstyle">';   
                    echo '<a class="btn" data-toggle="modal" href="#modal'.$id.'" >'.$title.'</a>';
                    echo '</div>';
                    echo '</div>';
                    ?>
                    <div class="modal" style="display:none;" id="modal<?=$id?>">
                        <div class="modal-header">
                            <a class="close" data-dismiss="modal">&times;</a>
                            <h2><?=$title?></h2>
                        </div>
                        <div class="modal-body">
                            <div class="modal-left">
                            <img src="<?=$img?>" title="<?=$title?>" alt="<?=$title?>" />
                            </div>
                            <div class="modal-right">
                            <p><?=$productByType[$i]['info']?></p>
                            </div>
                        </div>
                        <div class="modal-footer">
                            Neem contact op met Moldipaints-Dokkum.nl voor meer informatie, telefoonnummer: 0519-297409
                        </div>
                    </div>

                    <?php
                    if($i % 2 == 1 || $i == count($productByType)){
                        // 0,3,6,9,12
                        echo '</div>';
                    }
                }      
            }?> 
        </div>
    </div>
</div>

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 style project

    /*   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;}

Thank you in advance

Answer 1

I was experiencing the same problem with the modal popup in IE7. The modal dialog was displayed beneath the modal backdrop. However, adding this javascript DID fix the problem for me:

$('.fixedVersion .modal').appendTo($("body"));

more detail here: http://jsfiddle.net/ATeaH/8/

Answer 2

I had the same issue and ended up fixing the issue by 1) making sure all my modal dialogs were not nested need in the HTML hierarchy, but instead on the root level (right inside <body>) and 2) at the end of the HTML document.

The two above conditions may be a bit overkill, but it fixed the issue for me.