Però alla resa dei conti anche se ho sistemato, non ho capito la logica della cosa...
Se qualcuno ha voglia di spiegarmi..
Pagina HTML (solo i div di riferimento ovviamente)
codice:
<body>
<div id="big">
<div id="testata">
<div id="menu_top"> Chi siamo | Contatti |</div>
</div>
...
...
</div>
CSS:
codice:
body {
background-color:#BD0110;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#big{
margin: 0px auto;
width: 997px;
}
#testata{
background-image:url(img/banner.jpg);
width:997px;
height:313px;
}
#menu_top{ /* menu posizionato in alto a sinistra sulla testata*/
text-align:left;
margin: 35px 0px 0px 25px;
color:#fff;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
letter-spacing: 2px;
font-weight:bold;
}
Questo era l'originale, e mentre su IE visualizzava bene il #menu_top in alto a sinistra DENTRO la testata, su FireFox e Chrome la visualizzava SOPRA la testata, e "rubando" i 35px di margin-top SOPRA tutto il sito (come se body non fosse stato a margin 0)
Ho risolto mettendo in #menu_top il padding top a 35px anzichè il margin e funzionava bene su tutti e 3 i browser. Ma non ne capisco la logica.
MA continuando a cercare spiegazioni sul web, ho scoperto che semplicemente mettendo "overflow:hidden;" in #testata risolvevo il tutto per tutti i browser (lasciando il mio margin-top:35px)
Ma non ne capisco la logica in quanto il div #menu_top è DENTRO il div #testata e non ha un'altezza superiore alla testata!
Grazie dell'attenzione, un saluto a tutti!