проблема в показе 3 изображения подряд в IE

Question

Эй, ребята, это мой код, который я использовал, чтобы показать 3 изображения в строке

все хорошо в FF, но не с IE

и мой код:

echo "<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>";

Answer 1

В Internet Explorer вторая строка оказывается захваченной изменяющейся высотой предыдущей строки. Вы можете решить это двумя способами:

1)

В вашем правиле стиля для "# three-col li" также укажите высоту:

#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)

Вы можете добавить элемент для очистки промежутка между строками.

Я думаю, вы, возможно, уже пытались это сделать, но хороший способ сделать это:

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

Answer 2

я нахожу проблему

просто перемещая этот оператор условия после завершения цикла while, все идет хорошо

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>";

и спасибо Сони за отличный ответ

Answer 3

Попробуйте вставить этот файл в ваш файл:

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