li não posiciona inline no IE 7 e 9

[regina 0]

Olá a todos,

 

estou com um problema na exibição de fotos de uma galeria, cada imagem fica posicionada ao lado mas abaixo da outra, parecendo que cada imagem é um degrau de uma escada.

 

o html está assim:

<!-- MINIATURAS -->
	  <div id="container">
	  <ul> 
		<li><a href="../imagens/galeria/DSCF0046.JPG" title="HANDEBOL"><img src="../imagens/galeria/mini/DSCF0046.JPG" alt="HANDEBOL" title="HANDEBOL"/></a></li>
		<li><a href="../imagens/galeria/DSCF9970.JPG" title="FUTSAL."><img src="../imagens/galeria/mini/DSCF9970.JPG" alt="FUTSAL" title="FUTSAL"/></a></li>
		<li><a href="../imagens/galeria/jeps23_g.jpg" title="JOGOS."><img src="../imagens/galeria/mini/jeps23_g.jpg" alt="JOGOS" title="JOGOS"/></a></li>
		<li><a href="../imagens/galeria/jeps50_g.jpg" title="Foto"><img src="../imagens/galeria/mini/jeps50_g.jpg" alt="" title=""/></a></li>
		<li><a href="../imagens/galeria/DSCF9972.JPG" title="Foto"><img src="../imagens/galeria/mini/DSCF9972.JPG" alt="" title=""/></a></li>
		<li><a href="../imagens/galeria/DSCF9971.JPG" title="Foto"><img src="../imagens/galeria/mini/DSCF9971.JPG" alt="" title=""/></a></li>
	</ul>
	</div>

 

o css

/*miniaturas*/
#container{width:95%;min-height:125px;height:auto !IMPORTANT;height:125px;margin:0;padding:0;overflow:auto;color:#222;background:#fff}
#container ul {margin:0;padding:0;list-style:none;white-space:nowrap}
#container ul li {display:inline-block;padding:0;background:#fff;vertical-align:top}
#container ul li img {margin:0 2px;float:left;padding:1px;border:1px solid #555}
#container p {margin:0;padding:0;font-size:11px}

para o IE7

#container ul {margin:0;padding:0;list-style:none;white-space:nowrap}
#container ul li {display:inline;padding:0;background:#fff;vertical-align:top;letter-spacing:normal;zoom: 1;*display:inline}

 

No firefox e no IE8 fica certinho mas no IE7 e IE9 as fotos ficam mal posicionadas, não uma ao lado da outra.

 

O que posso fazer para corrigir isso?

 

Agradeço a ajuda desde já!

[_Leandro_ 0]

Ao invés de usar display:inline tente com float:left

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

[regina 0]

Infelizmente não funcionou assim...

 

o IE9 não teria que ser superior ao 8?

 

No 8 foi tão simples configurar o layout, assim como é nos browsers semânticos...

 

Agradeço a ajuda Leandro

[_Leandro_ 0]

Consegues postar uma imagem ilustrando o efeito que você quer fazer?

 

Att

Leandro Rodeghiero

[regina 0]

Para conseguir deixar como na imagem eu utilizei o seguinte código:

#container{width:96%;height:130px;margin:0;padding:0;overflow:auto;color:#222;background:#fff}
#container ul {margin:0;padding:0;list-style:none;white-space:nowrap}
#container ul li {display:inline;margin:0 1px}
#container ul li img {border:1px solid #555;padding:1px;margin:5px 2px}
#container p {margin:0;padding:0;font-size:11px}

 

mas a barra deveria estar na horizontal, se eu tento deixá-la na horizontal cada imagem fica ao lado mais um pouco abaixo da anterior, como na imagem:

[Giovani 104]

Trabalhando com o que você tem, veja se um width no #container ul li resolve.