Pergunta
Estou tendo problemas com o IE7.Eu tenho um cabeçalho, que é um IMG.Abaixo dele tenho uma div que representa um menu, eles devem ser anexados um ao outro sem espaço entre eles.Ambos têm largura de 1000px.No Opera e no FireFox, o cabeçalho e o menu estão perfeitamente ligados um ao outro.Porém, no IE7, existe um pequeno espaço entre o menu DIV e o IMG.Tentei definir explicitamente o preenchimento e a margem no IMG, mas não funcionou.Já tive esse problema antes, então parece ser uma peculiaridade do IE7.
Meu código HTML:
<div id="middle">
<img id="ctl00_headerHolder_headerImage" src="pictures/headers/header_home.jpg" style="border-width:0px;" />
<div id="ctl00_menuPanel" class="menu">
<a id="ctl00_home" href="Default.aspx" style="color:#FFCC33;">Home</a> |
<a id="ctl00_leden" href="Leden.aspx">Leden</a> |
<a id="ctl00_agenda" href="Agenda.aspx">Agenda</a> |
<a id="ctl00_fotos" href="Fotos.aspx">Foto's</a> |
<a id="ctl00_geschiedenis" href="Geschiedenis.aspx">Geschiedenis</a> |
<a id="ctl00_gastenboek" href="Gastenboek.aspx">Gastenboek</a>
</div>
</div>
Solução
Experimente a barra de ferramentas do desenvolvedor do IE, que permitirá inspecionar o que está acontecendo com os elementos e fornecerá contornos das áreas cobertas.Isso pode lhe dar uma melhor compreensão do problema.
Outras dicas
A solução:
img {
padding: 0px;
margin: 0px;
display: block;
}
mostrar:bloquear
Eu me deparo muito com isso.Em vez de procurar o comportamento específico, tente a verificação de integridade definindo explicitamente as propriedades de preenchimento e margem dos seletores img/div/etc como 0, defina o estilo de borda:nenhuma largura da borda:borda 0px = "0" etc.
A barra de ferramentas do IE Dev é obrigatória, mas é improvável que ajude você a descobrir problemas de pixel único.
Em vez de recorrer ao bloco de exibição, observe que o IE7 faz algumas coisas muito estranhas com espaços em branco;tente remover o espaço em branco entre a imagem e o div e veja o que acontece.
Redefinições de CSS (como o YUI Redefinir CSS) são ótimos para esse tipo de coisa.Eles redefinem preenchimentos, margens e outras propriedades de exibição em muitos elementos HTML para minimizar as diferenças de exibição.
A solução...exibição:bloquear
Essa pergunta não poderia ser respondida adequadamente sem conhecer o modo de renderização em que o navegador estava;você precisa informar às pessoas qual tipo de documento você possui se tiver problemas de renderização de CSS.O comportamento da imagem a que você se refere é diferente no modo Quirks e no modo padrão.Um caso de teste mínimo deve incluir um documento HTML completo e CSS para reproduzir o problema.Por favor, não peça ajuda às pessoas sem lhes dar as informações de que precisam para responder facilmente, sem perder tempo...
A verdadeira solução:
#middle { font-size: 0; line-height: 0; }