Caroufredsel не видно в Firefox

Question

Может ли кто-нибудь сказать мне, почему caroufredsel (#imagec) не виден в Firefox? Он должен перекрывать #mainimg и оставаться в нижней части div #wrapper. Он появляется во всех других браузерах. Если я положил верх: 0; в CSS для #imagec он появляется и остается прикрепленным к вершине #wrapper, но если я даю верхний номер другого, #imagec больше не отображается.

$(document).ready(function() { 
 
     var firstimg = "images/1.bmp" 
 
     $('#mainimg').attr("src", firstimg); 
 
     carousel(); 
 
    }); 
 

 
    function carousel() { 
 
     $('#imagec').carouFredSel({ 
 
     align: "center", 
 
     auto: true, 
 
     items: { 
 
      visible: 5, 
 
      height: '60%' 
 
     }, 
 
     responsive: true, 
 
     width: '100%', 
 
     height: '60%', 
 
     scroll: { 
 
      items: 1, 
 
      duration: 2000, 
 
      timeoutDuration: 0, 
 
      easing: 'linear', 
 
      pauseOnHover: 'immediate' 
 
     } 
 
     }); 
 
    }

html, 
 
    body { 
 
     padding: 0; 
 
     margin: 0; 
 
     height: 100%; 
 
     width: 100%; 
 
     display: -webkit-box; 
 
     display: inline-flex; 
 
     -webkit-flex-direction: column; 
 
     flex-direction: column; 
 
     -webkit-box-orient: vertical; 
 
     -webkit-align-items: center; 
 
     align-items: center; 
 
     -webkit-box-pack: center; 
 
     -webkit-justify-content: center; 
 
     justify-content: center; 
 
     -webkit-box-align: center; 
 
     position: relative; 
 
    } 
 

 
    #wrapper { 
 
     width: 65%; 
 
     height: auto; 
 
     position: relative; 
 
     overflow: hidden; 
 
     border: 10px double black; 
 
    } 
 

 
    #mainimg { 
 
     position: relative; 
 
    } 
 

 
    #imagec { 
 
     padding-top: 8px; 
 
     position: absolute; 
 
     bottom: 0; 
 
     z-index: 1001; 
 
    } 
 

 
    #imagec div { 
 
     float: left; 
 
     display: block; 
 
    } 
 

 
    #imagec div img { 
 
     border: none; 
 
     -webkit-box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.5); 
 
     -moz-box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.5); 
 
     box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.5); 
 
     -webkit-transition: box-shadow 0.5s, -webkit-box-shadow 0.5s; 
 
     transition: box-shadow 0.5s, -webkit-box-shadow 0.5s; 
 
    } 
 

 
    #imagec div img:hover { 
 
     -webkit-box-shadow: 0px 5px 6px 0px rgba(200, 200, 200, 0.5); 
 
     box-shadow: 0px 5px 6px 0px rgba(200, 200, 200, 0.5); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script> 
 

 
<div id="title"> 
 
    <strong>Photography & Design</strong> 
 
</div> 
 
<ul id="main"> 
 
    <li class="main" id="start">Portfolio 
 
    <ul id="second"> 
 
     <li><a href="#">Portraits</a> 
 
     </li> 
 
     <li><a href="#">Fashion</a> 
 
     </li> 
 
     <li><a href="#">Events</a> 
 
     </li> 
 
     <li><a href="#">Weddings</a> 
 
     </li> 
 
     <li class="last"><a href="#">Designs</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="main">Blog</li> 
 
    <li class="main">Contact</li> 
 
    <li class="main" id="end">About</li> 
 
</ul> 
 
<div id="wrapper"> 
 
    <img src="" id="mainimg" width="100%" height="auto"> 
 
    <div id="imagec"> 
 
    <div> 
 
     <img class='smallimg' src='images/1.bmp' width='75%'> 
 
    </div> 
 
    <div> 
 
     <img class='smallimg' src='images/2.bmp' width='75%'> 
 
    </div> 
 
    <div> 
 
     <img class='smallimg' src='images/3.bmp' width='75%'> 
 
    </div> 
 
    <div> 
 
     <img class='smallimg' src='images/4.bmp' width='75%'> 
 
    </div> 
 
    <div> 
 
     <img class='smallimg' src='images/5.bmp' width='75%'> 
 
    </div> 
 
    <div> 
 
     <img class='smallimg' src='images/6.bmp' width='75%'> 
 
    </div> 
 
    <div> 
 
     <img class='smallimg' src='images/7.bmp' width='75%'> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Вопрос был в CSS в случае, если кто имеет эту проблему в будущем. Caroufredsel добавляет обертку, и мне пришлось переопределить «верх» и добавить некоторые вещи в div #imagec.

CSS

.caroufredsel_wrapper { 
    top: auto !important; 
} 
#imagec { 
    padding-top: 8px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: auto; 
    margin: auto; 
    padding: 0; 
    z-index: 1001; 
}