без полей в IE7

Question

Я создал галерею изображений, которая корректно отображается везде, кроме IE7 - http://ianespinoza.com/.

Я использую следующую структуру:

<!-- this div is the overall container for the carousel -->
<div id="carouselContainer">
   <!-- this div contains all the thumbs and this div is animated to slide. -->
   <div id="thumbContrainer">
      <ul class="thumb">
         <!-- Img 1 -->
         <li>...</li>
         etc....
      </ul
   </div>
</div>

вот стиль, применяемый к этим элементам:

#carouselContainer {
width:934px;
height:145px;
border:none;
overflow:hidden;
position:relative; 
left:40px;
top:5px;}


#thumbContrainer { 
position:relative; 
left:20px;
height:110px;
margin:30px 0px; 
width:5000px;
border:none;}

ul.thumb {
list-style: none;
margin: 0; 
padding: 0px;}

Все правильно отображаются во всех браузерах, кроме IE7.

В IE 7 div "thumbContrainer" не имеет верхнего поля, но мне действительно нужно это поле.

Answer 1

Спасибо за все ответы и предложения.

На самом деле я решил проблему с IE7, добавив отступ для родительского элемента - "carouselContainer" и удалив поле для "thumbContrainer".

Несмотря на то, что это исправило проблему, все еще не был уверен, что было с оригинальной настройкой, даже если использование * margin-top не помогло.

Answer 2

Попробуйте заменить margin на padding в #thumbContrainer:

#thumbContrainer{ 
    position:relative; 
    left:20px;
    height:110px;
    padding:30px 0px; 
    width:5000px;
    border:none;
}