Internet Explorer CSS Float last image offset

Question

Hey Guys,

I have an unordered list of images that display inline and float next to each other. Everything looks fine in Firefox and Chrome, but in internet explorer the last image is pushed down vertically a bit. Any idea why this would happen? Link is here:

http://www.mercedesberk.org/chic-and-new/manhattan-house

And here is the basic code:

<div id="fatured_properties">
<h4> Also in the Neighborhood </h4>
    <ul>
        <li>
             <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <img src="<?php bloginfo('template_directory'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, 'image', $single = true); ?>&amp;h=135&amp;w=180&amp;zc=1" alt="<?php the_title(); ?>"  />
             </a>
             <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                 <span><?php the_title(); ?></span>
             </a>
        </li>
        ... etc ....
     </ul>
</div>

And CSS:

#fatured_properties { 
    overflow: auto; 
    text-align: center; 
    width: 100%;
}

#fatured_properties h3 { 
    text-transform: uppercase; 
    color: #f60; 
    font-size: 13px; 
    padding-bottom: 10px; 
    margin: 0 auto; 
    display: block; 
    width: auto;
}

#fatured_properties ul{ 
    display: inline;
}

#fatured_properties ul li{  
    margin: 0 5px; 
    float: left;
}

.hamptons_guide #fatured_properties ul li{ 
    margin: 0 14px; 
}

#fatured_properties ul li img{ 
    display: block; 
    clear: both;
}

#fatured_properties ul li span {
    font: bold 13px "Calibri", Verdana, Helvetica, sans-serif;  
    letter-spacing: 1px; 
    width: 195px; 
    display: block; 
    text-align: left; 
}

Answer 1

Removing the default padding/margins from your ul and li should do the trick:

#fatured_properties ul{ 
    margin: 0; 
    padding: 0; 
    display: inline;
}

#fatured_properties ul li{  
    padding: 0; 
    margin: 0 5px; 
    float: left;
}

All browsers have slightly different padding and margin defaults so it's a good practice to set them all to zero and then add them back in as needed.

Answer 2

It looks like the ul element's margin is causing problems in IE8. Try adding margin: 0; to that element, like so:

#fatured_properties ul{ 
    display: inline;
    margin: 0;
}

EDIT: Is there a particular reason that you've declared that ul as inline? UL behaves normally as a block-level element, and the images would still float against each other as expected.