Um problema comum no Internet Explorer 6 é ele criar espaçamento que não existe entre um item e outro de uma lista. É comum ocorrer também em uma imagem, mas a solução essa é simples, como veremos adiante.

Espaço entre uma imagem e um bloco

Se você colocar uma tag img e logo abaixo um bloco p com alguma cor de fundo, perceberá uma linha em branco, separando a imagem do bloco - imagem 1.

Solução

A solução para o problema acima é simples. Ou você coloca um bloco - um div, por exemplo - em volta da tag img ou coloca a própria tag img como bloco, pelo CSS:

div.bloco img { display: block; }

Com isso, o espaço existente anteriormente passa a não existir mais - imagem 2. Isso só ocorre no IE6 ou anteriores. Na versão 7 o problema foi corrigido.

Imagem sem o display: block	Imagem com o display: block

Espaço entre itens de uma lista

As listas também costumam apresentar espaçamento entres seus itens. A solução é um parecida com a do espaçamento nas imagens.

Tem gente que coloca todos os itens da lista em uma única linha. Dessa forma o espaçamento não aparece, mas dependendo da quantidade de itens, essa saída pode-se mostrar um pouco confusa em uma futura manutenção do site.

O caso

Vamos primeiro ao código que mostra o espaçamento entre os itens da lista, no IE6.

Nosso CSS está simples. Setamos apenas um background na tag a e, quando o mouse passar por cima, mudamos a cor para verde.

ul { padding: 0; margin: 0; width: 250px; }
ul li { padding: 0; margin: 0; list-style-type: none; }
ul li a { display: block; background-color: black; color: white; padding: 10px; }
ul li a:hover { background-color: green; color: black; }

O código HTML também ficou simples. Uma lista com links - parecendo um menu.

<ul>
  <li><a href="#1">Item 1</a></li>
  <li><a href="#1">Item 2</a></li>
  <li><a href="#1">Item 3</a></li>
  <li><a href="#1">Item 4</a></li>
</ul>

O resultado

Com o código acima obtemos um bom resultado - imagem 1 - no Firefox e IE7. Mas um espaçamento entre os itens - imagem 2 - aparece no IE6:

Resultado no Firefox e Internet Explorer 7	Resultado no Internet Explorer 6

Solução 1: div entre o a

A solução para o problema acima é colocar um bloco dentro do li e trabalhar sempre com esse bloco. Ou seja, colocando um div entre as tags li o espaçamento irá sair.

Dessa forma, nosso código HTML fica da seguinte forma:

<ul>
  <li><div><a href="#1">Item 1</a></div></li>
  <li><div><a href="#1">Item 2</a></div></li>
  <li><div><a href="#1">Item 3</a></div></li>
  <li><div><a href="#1">Item 4</a></div></li>
</ul>

O CSS não precisa ser alterado nesse caso, mas se precisasse seria apenas mudança de cor, borda, espaçamento, ou qualquer atributo de aparência. Mas nada para corrigir o problema, que é solucionado apenas com o div por lá.

Solução 2: setar altura 100%
(adicionado em 26/07/2007 as 09h54)

Como sugerido pelo Renan Bernordi nos comentários, colocando uma altura 100% no elemento a, o espaçamento também irá sumir. Dessa forma, o div entre o a não será necessário e o CSS ficaria da seguinte forma:

ul { padding: 0; margin: 0; width: 250px; }
ul li { padding: 0; margin: 0; list-style-type: none; }
ul li a { display: block; background-color: black; color: white; padding: 10px; _height: 100%; }
ul li a:hover { background-color: green; color: black; }

Conclusão

Use Firefox!
No Maujor tem um texto que explica porque o problema acontece. É por causa de um tal hasLayout que só atrapalha em vez de ajudar. Viva o IE!