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!