Question

I made an image gallery that renders correctly everywhere 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.

Answer 1

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.