Classic IE Margin Problem, New Boring Twist.

[rmagnes]

Hey guys, this is the classic problem with IE failing to render margin-bottom and margin-top. Usually, I can work my way around this problem by craming in some extra padding. However due to the way I have already used padding in my design, I can't use the normal padding hack. I would appreciate it if any of you could take a look and see if you have any suggestions. I'm sure the solution is probably pretty simple. If you are using firefox, you can take a look here: http://wakaorphanage.org/photos.htm and see what I am trying to achieve.

HTML:


<div id="sthumb-box2">
<ul>
<li><a href="batch3/450/Chudon_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/Chudon_thumbnail.jpg" class="box" border="0" alt="#" ></a></li>

<li><a href="batch3/450/Benzilan in April_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/Benzilan in April_thumbnail.jpg" class="box" border="0" alt="#" ></a></li>

<li><a href="batch3/450/next door_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/next door_thumbnail.jpg" class="box" border="0" alt="#" ></a></li>

<li><a href="batch3/450/Nixi view_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/Nixi view_thumbnail.jpg" class="box" border="0" alt="#" ></a></li>

<li><a href="batch3/450/Nixi view2_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/Nixi view2_thumbnail.jpg" class="box" border="0" alt="#" ></a></li>

<li><a href="batch3/450/Nixi_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/Nixi_thumbnail.jpg" class="box" border="0" alt="#" ></a></li>

<li><a href="batch3/450/nunnery at Benzilan_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/nunnery at Benzi~_thumbnail.jpg" class="box" border="0" alt="#" ></a></li>

<li><a href="batch3/450/nunnery at Benzilan2_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/nunnery at Ben~_thumbnail 1.jpg" class="box" border="0" alt="#" ></a></li>

<li><a href="batch3/450/red sky_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/red sky_thumbnail.jpg" class="box" border="0" alt="#" ></a></li>

<li><a href="batch3/450/route 214_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/route 214_thumbnail.jpg" class="box" border="0" alt="#" ></a></li>

<li><a href="batch3/450/Waka sunrise_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/Waka sunrise_thumbnail.jpg" class="box" border="0" alt="#" ></a></li>

<li><a href="batch3/450/Yangze River_450.jpg" rel="lightbox{Chudon}"><img src="batch3/thumbnails/Yangze River_thumbnail.jpg" class="box" border="0" alt="#" ></a></li>

</ul>
</div>



And the CSS:


#sthumb-box2 ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#sthumb-box2 li {
margin-right:0px;
float:left;
}

#sthumb-box2 a {
outline: none;
display:block;
height:100px;
width:100px;
padding-top:9px;
padding-left:9px;
border:#CCCCCC 1px solid;
margin-right:10.5px;
margin-bottom:10.5px;
float:left;
text-decoration: none;
}

#sthumb-box2 a:hover {
border:#999999 1px solid;
overflow: hidden;
}

.box {
width:91px;
height: 90px;
overflow: hidden;
display: block;
outline: none;
}

[shagura]

*{margin:0;padding:0;} /* reset elements, not required if you already are using a reset file */

#sthumb-box2 ul {
margin:10px auto; /*center in a parent div and 10px margin above and below whole gallery */
padding:0;
list-style-type:none;
}

#sthumb-box2 li {
margin:0 5px 5px 0; /* give each li a breather to the right and below, cause they float left */
float:left;
}

#sthumb-box2 a {
outline:none;
display:block;
height:110px; /* define height and width, rather than use padding to save bugs in ie */
width:110px;
border:#CCC 1px solid;
text-decoration:none;
}

#sthumb-box2 a:hover {
border:#999 1px solid;
}

#sthumb-box2 img {
position:relative; /* required for positioning over padding */
top:10px; /* rather than padding, just push the image 10px right and down, combined the right height and width of the a tag (110px here), it'll pop it central*/
left:10px;
width:90px;
height:90px;
}


Try this mate.