List items show in wrong direction in IE 7 and 6

even though i have the following list items setup to appear next to each other, horizontally, across the page, for some reason they appear vertically, on top of one another, in IE 6 and 7. please advise how i correct this issue.

thanks in advance!

current html

<div class="new_thumb">
<ul>
<li><a href="pics/samples/rg_original.jpg" target="_blank">Before<img src="pics/samples/rg_orig_thumb.jpg" /></a></li>
<li><a href="http://www.xxxxxx.com/" target="_blank">After<img src="pics/samples/rg_new_thumb.jpg" /></a></li>
<li><a href="pics/samples/dvir_old.jpg" target="_blank">Before<img src="pics/samples/dvir_old_thumb.jpg" /></a></li>
<li><a href="http://www.xxxxxx.com/" target="_blank">After<img src="pics/samples/dvir_new_thumb.jpg" /></a></li>
<li><a href="pics/samples/cls_original.jpg" target="_blank">Before<img src="pics/samples/cls_orig_thumb.jpg" /></a></li>
<li><a href="http://www.xxxxx.com/" target="_blank">After<img src="pics/samples/cls_new_thumb.jpg" /></a></li>
</ul>
</div>



current css

.new_thumb {
margin: 0px;
padding: 0px;
text-align: center;
}
.new_thumb ul {
margin: 5px 0;
padding: 0px;
}
.new_thumb ul li {
padding: 0px;
margin: 5px;
width: 126px;
height: 140px;
list-style-type: none;
display: inline-block;
}
.new_thumb ul li a {
color: #000000;
}
.new_thumb ul li a:visited {
color: #000000;
}
.new_thumb ul li a:hover {
color: #F92325;
text-decoration: none;
}
.new_thumb ul li a img {
display: block;
border: thin solid #0000FF;
}
.new_thumb ul li a img:link {
}
.new_thumb ul li a img:visited {
border: thin solid #0000FF;
}
.new_thumb ul li a img:hover {
border: 2px solid #000000;
}

Hello sixrfan,
Did you try floating the li? It has a width so a float is not going to hurt anything.

.new_thumb ul li {
padding: 0px;
margin: 5px;
width: 126px;
height: 140px;
list-style-type: none;
float: left;
}

that did it. thanks!