I have floated a list of thumbnail images within a DIV on my page. I applied some right padding to each LI to get 4 images to fill the declared width of the containing div (and stripped that padding from the last LI in each horizontal row so it doesn't get pushed down to the next line) and then a new row is populated with images.

This is working on FF/Safari on the Mac and FF/IE7 on the PC.... but in IE6 that fourth image is getting pushed down to the next line. So I read through Paul's great FAQ about "all you neeed to know about Floats". I've applied the display:inline technique to the floated items to try to get IE to remove the double-margin (originally i used margins to get spacing between the LI, but then changed to padding to try to fix the 3px jog... see below).

I also began to apply the 3 steps to remove 3px jog of floated items, but in Paul's example it's ONE floated div next to one static div... i've got several LI which are all floated, so I'm not sure how to apply some of those techniques.

Would someone be willing to look at this example and compare what you see in IE6 to any of the other browsers mentioned on any of the platforms? I know it's a sizing issue in that the #mainContent div is declared at 691px and my images+padding come up to very close to that so that the outside edges of rows of images mostly line up vertically with the nav bar and header image above.

My HTML code:
HTML Code:
        <div id="mainContent">
        	<ul id="gallery">
            	<li><a href="../images/large/cabin_2door.jpg" rel="lightbox[images]" title="Cabin with new chinking"><img src="../images/thumbs/cabin_2door.jpg" width="150" height="150" alt="" /></a><h3>Chinking</h3></li>
                <li><a href="../images/large/restoration_before.jpg" rel="lightbox[images]" title="Before Log Restoration"><img src="../images/thumbs/restoration_before.jpg" width="150" height="150" alt="" /></a><h3>Before Restoration</h3></li>
                <li><a href="../images/large/restoration_after.jpg" rel="lightbox[images]" title="After Log Restoration"><img src="../images/thumbs/restoration_after.jpg" width="150" height="150" alt="" /></a><h3>After Restoration</h3></li>
                <li class="lastPic"><a href="../images/large/new_home_1.jpg" rel="lightbox[images]" title="Custom Home Chinking"><img src="../images/thumbs/new_home_1.jpg" width="150" height="150" alt="" /></a><h3>Custom Home Chinking</h3></li>
                <li><a href="../images/large/blasting_before.jpg" rel="lightbox[images]" title="Before Corn Cob Blasting"><img src="../images/thumbs/blasting_before.jpg" width="150" height="150" alt="" /></a><h3>Before Blasting</h3></li>
                <li><a href="../images/large/blasting_during.jpg" rel="lightbox[images]" title="During Corn Cob Blasting"><img src="../images/thumbs/blasting_during.jpg" width="150" height="150" alt="" /></a><h3>During Blasting</h3></li>
                <li><a href="../images/large/blasting_after.jpg" rel="lightbox[images]" title="After Corn Cob Blasting"><img src="../images/thumbs/blasting_after.jpg" width="150" height="150" alt="" /></a><h3>After Blasting</h3></li>
                <li class="lastPic"><a href="../images/large/new_home_2.jpg" rel="lightbox[images]" title="Custom Home Chinking"><img src="../images/thumbs/new_home_2.jpg" width="150" height="150" alt="" /></a><h3>Custom Home Chinking</h3></li>
        <!-- END MAIN CONTENT -->
And the offending CSS:
#mainContent {
	width: 691px;
	font-size: 1.2em;
	line-height: 1.6;
	text-align: left;
	margin: 0 auto;


#gallery li {
	float: left;
	list-style: none;
	width: 150px;
	padding: 0 30px 30px 0;
	display: inline; /* to fix IE double margin on floats */


* html #gallery li {margin-right: -3px;} /* step 1 of eliminating 3px jog */

#gallery li.lastPic { padding-right: 0; }

#gallery li h3 { font-size: 0.8em; }
Thank you for any ideas about reeling in that fourth image in each row! I appreciate your time.