IE7:cabeçalho acima do menu

StackOverflow https://stackoverflow.com/questions/13851

  •  08-06-2019
  •  | 
  •  

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>

Foi útil?

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; }
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top