no margin in IE7

I made an image gallery that renders correctly ever开发者_如何学JAVAywhere except IE7 - http://ianespinoza.com/.

I am using following structure:

<!-- 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>

here is the style applied to these elements:

#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;}

All renders correctly in all the browsers, except IE7.

In IE 7 div "thumbContrainer" has no top margin, but I really need that margin.

---

Try to replace margin with padding in #thumbContrainer:

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

---

Thanks for all the answers and suggestions.

Actually the way I ended up fixing IE7 issue is by giving padding to the parent element - "carouselContainer", and removing margin for the "thumbContrainer".

Although it fixed the issue, still not sure what was wring with the original set up as, even using *margin-top wasn't helping.