problem in showing 3 images in a row In IE

hey guys this is my code that i used to show 3 images in row

everything is fine in FF but not with IE

and my code :

e开发者_如何学Ccho "<div class=\"container mod\"><ul id=\"three-col\" class=\"press\">";

while($cat = $db->sql_fetchrow($catinfo)) {

$counter++; 

echo '
<li>
<div class="post-content">
        <a class="zoom1">
        <img src="'.$galsettings[setImgDir].'/'.$cat[galCatLocation].'/'.$cat[galCatImg].'" alt="'.$cat[galCatName].'" />
        </a>
        </div>
        <span class="post-bottom"></span>           
        <div class="meta">
        <p>'.$cat[galCatName].'</p>';

        echo ' </div>';

        echo '</li>';

if ( $counter == 3 ) { 
echo '<ul>'; 
$counter = 0; 
} 
}

echo "</ul></div>";

In Internet Explorer, the second row is getting caught-out by the varying height of the previous row. You can solve this in two ways:

1)

On your style rule for "#three-col li" also state a height:

#three-col li {
  background:url("../img/bg-post-top.png") no-repeat scroll 0 0 transparent;
  float:left;
  height:312px;
  margin:3em 20px 0 0;
  overflow:hidden;
  padding-top:20px;
  position:relative;
  width:300px;
}

2)

You can add an element to clear the gap between rows.

I think you may have attempted this already, but a good way to do this is:

  ...
</ul>
<div style="clear: both;">&nbsp;</div>
<ul>
  ...

i find the problem

just moving that condition statement after end of while loop everything goes fine

echo "<div class=\"container mod\"><ul id=\"three-col\" class=\"press\">";

while($cat = $db->sql_fetchrow($catinfo)) {

echo '
        <li>

        echo '</li>';


}
if ( $counter == 3 ) { 
echo '</ul> 
<div style="clear: both;">&nbsp;</div> 
<ul id=\"three-col\"> '; 
$counter = 0; 
} 
echo "</ul></div>";

and thanks Sohnee for his great answer

Try putting this css in your file:

div.post-content {display:inline;}
div ul li {display:inline;}