CSS

CSS: Problemas de espaços entre itens de lista

Bem pessoal, o ie6 deixa qualquer desenvolvedor web maluco. rs

Você faz todo o site, sempre testando nas versões mais novas dos navegadores e vai tudo bem. Até que num dado momento, você se lembra de que tem usuários navegando em versões antigas do internet explorer e decide testar… aí começa a dor de cabeça… aquele site que estava redondinho passa a ficar quadradinho… e você começa a ficar desesperado… o que eu faço agora?

É! isso aconteceu comigo.

Sobre o site:
O site que ocorreu o problema tem uma galeria de imagens que exibe os produtos de uma empresa, alinhados, divididos por linhas e colunas. Utilizo as tags <ul> <li> e a tag <a> para quando clicar exibir a imagem ampliada.

Código CSS com erro:

/* css para o div que mostrará as imagens */
#divTabela{height:200px;width:720px;padding:0;margin-top:5px}
 
/* css para o bloco */
#divTabela ul{
	display:inline;
	float:left;
	list-style:none;
	text-align:center;
	margin:0px; 
	padding:0px; 
}
/* css para cada imagem */
#divTabela li{
	margin:8px 12px 0px 8px; 
	padding:0px;
	width:100%;
}
/* css para colocar borda na imagem */
.img {padding:0px;margin:0px;border:2px solid #FFFFFF}

Utilizando o código css acima, as imagens eram exibidas na versão 6 do ie com um espaçamento a esquerda entre elas. Após várias buscas na internet achei uma solução que resolveu o meu problema e que poderá servir de referência para aqueles que tiverem o mesmo problema.

Resolvendo o problema:

Acrescente as linhas abaixo ao código css:

#divTabela ul{
	display:block;
}

Até a próxima!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *