padding firefox

[diego78]

ho un menu fatto così:

<div id="inheaderRight">
<div class="menu1">
HOME
</div>
</DIV>


div#inheaderRight{
border: thin solid;
width: 200px;
height: 150px;
float: left;
}

div.menu1{
background: url("images/menu1.jpg");
background-repeat: no-repeat;
height: 30px;
width: 200px;
padding-top: 6px;
padding-left: 15px;
}

.headmenu {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color:#255585;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
}

su explorer si vede bene, su firefox il padding-top: 6px; di menu1 mi alza il div di 6cm rispetto ai 30px definiti.

come posso risolvere? :master:

[digitos]

E' normale. La dimensione reale di un box è data dalla somma di Width (o height) +border+margin + (in alcuni browser) il padding.

Non ti conviene mai, vista questa diversa interpretazione da browser a browser, assegnare allo stesso elemento una dimensione e un padding nella stesso verso.
Le soluzioni sono 2:

1 - usare il margine al posto del padding qual'ora non hai un'immagine di sfondo ricordandodi che la dimensione totale sarà 36px (e non 30px) però almeno sei sicuro che tale dimensione è identica su tutti i browser.

oppure

2 - utilizzare un ulteriore div contenitore al quale applicare il padding.