IE7:intestazione sopra il menu

Question

Ho problemi con IE7.Ho un'intestazione, che è un IMG.Sotto ho un div che rappresenta un menu, devono essere attaccati l'uno all'altro senza spazio in mezzo.Entrambi hanno una larghezza di 1000 px.In Opera e FireFox l'intestazione e il menu sono perfettamente collegati tra loro.Tuttavia, in IE7, c'è un piccolo spazio tra il menu DIV e IMG.Ho provato a definire esplicitamente il riempimento e il margine sull'IMG, tuttavia non funziona.Ho già avuto questo problema, quindi sembra essere un capriccio di IE7.

Il mio codice 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>

Answer 1

Prova la IE Developer Toolbar, che ti permetterà di ispezionare cosa sta succedendo con gli elementi e ti darà dei contorni delle aree coperte. Potrebbe darti una migliore comprensione del problema.

Answer 2

La soluzione:

img {
padding: 0px;
margin: 0px;
display: block;
}

display: block

Answer 3

Mi imbatto molto in questo. Invece di cercare il comportamento specifico, prova a controllare la sanità mentale impostando esplicitamente le proprietà di riempimento e margine per i selettori img / div / etc su 0, imposta lo stile del bordo: nessuno larghezza del bordo: 0px bordo = " 0 " ecc.

IE Dev Toolbar è un must, ma è improbabile che ti aiuti a capire i problemi a pixel singolo.

Answer 4

Invece di ricorrere al blocco display, nota che IE7 fa alcune cose davvero strane con gli spazi bianchi; prova a rimuovere lo spazio bianco tra l'immagine e il div e guarda cosa succede.

Answer 5

I ripristini CSS (come il YUI Reset CSS ) sono fantastici per questo tipo di cose . Ripristinano padding, margini e altre proprietà di visualizzazione su molti elementi HTML per ridurre al minimo le differenze di visualizzazione.

Answer 6

  

    

La soluzione ... display: block

  

Non è stato possibile rispondere correttamente a questa domanda senza conoscere la modalità di rendering in cui si trovava il browser; devi dire alle persone che tipo di documento hai se hai problemi di rendering CSS. Il comportamento dell'immagine a cui ti riferisci è diverso nella modalità stranezze rispetto alla modalità standard. Un caso di test minimo deve includere un documento HTML completo e il CSS per riprodurre il problema. Per favore, non chiedere aiuto alle persone senza fornire loro le informazioni di cui hanno bisogno per rispondere facilmente senza perdere tempo ...

Answer 7

La vera soluzione:

#middle { font-size: 0; line-height: 0; }