Creando una pagina web mi sono accorto posizionando un intestazone <h2> una strana gestione del margine superiore da parte di mozilla per gli elementi di blocco presenti in un contenitore <div> senza bordo. Per farvi capire meglio prendete ad esempio questo codice:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TestCSS Mozilla</title>
<style type="text/css" media="screen">
#container{
padding: 0px;
height: 400px;
width: 700px;
border: 1px solid #000000;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #3399CC;
}
#title{
padding: 0px;
height: 30px;
width: 700px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #00CC33;
}
#content{
padding: 0px;
width: 400px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFF33;
height: 350px;
}
h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
padding: 0px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="title"></div>
<div id="content">
<h2>Titolo di prova</h2>
</div>
</div>
</body>
</html>
mozilla in questo caso non applica il margine di 50px all'elemento <h2>, ma è come se lo applicasse al contenitore <div id="content"> che contiene <h2> (infatti "content" uscirà fuori da "container"). Al contrario tutto sembra tornare a posto se invece impostiamo un bordo per il contenitore "content", in questo caso mozilla attribuisce il margine come dovrebbe all'intestazione <h2> spostandola verso il basso di 50px all'interno di "content", che questa volta non uscirà fuori da "container". Con IE 6.x invece con o senza bordo l'intestazione <h2> si comporta sempre allo stesso modo scalando di 50px in basso. Ho cercato informazioni su internet, ma non sono riuscito a trovare niente in merito a questo problemapotrebbe essere un bug di mozilla?
Rispondi quotando