background che si sposta

[mogiaco76]

ho questo codice

<div id="header">
<h1>Titolo</h1>
</div>

div#header{
	height:51px;
	width:750px;
	background: #FD9800 url(i/top.gif) center top no-repeat;	
	text-align:left;	
} 

div#header h1	{
	text-indent: -9999px;
	margin: 4px 0 0 2px;
	padding: 0;
	border: 0;
	}
	
div#header h1 a:link, div#header h1 a:visited	{
	display: block;	
	width: 96px;
	height: 39px;
	background: #373737 url(i/logo.gif) top left no-repeat;
	margin:0;
	padding: 0;
	border: 0;
	text-decoration: none;
	}

qualcuno sa perchè con firefox il background dell'header inizia solo dove inizia l'h1 (quindi con 4px di margine dall'alto) e con explorer stranamente funziona?

ho sempre risolto questo problema dando il padding invece che il margin all'elemente all'interno del contenitore(in questo caso l'header è contenitore), ma vorrei capire se c'è invece una spiegazione o una soluzione migliore.

grazie

[Moro]

probabilmente perchè hai messo
background: #373737 url(i/logo.gif) top left no-repeat;
in
div#header h1 a:link, div#header h1 a:visited



ps:
display:block??

[mogiaco76]

non capisco cosa intendi..

hai notato qualche anomalia nel mio codice?

grazie

[Moro]

div#header h1 a:link, div#header h1 a:visited {
display: block;
width: 96px;
height: 39px;
background: #373737 url(i/logo.gif) top left no-repeat;
margin:0;
padding: 0;
border: 0;
text-decoration: none;
}

non capisco xk quella parte in grassetto

[awd]

cos'è un image replacement?

la sistassi di background è sbagliata!
background: #373737 url(i/logo.gif) no-repeat top left;

[mogiaco76]

esatto, image replacement...

ho sempre utilizzato questa sintassi per il background...

"color" "url()" "x-position" "y-position" "repeat options"

è sbagliata?

grazie

[mogiaco76]

comunque, lasciando stare image replacement, il problema mi succede ahcne in altri contesti:

es:

html

<div id="welcome">
		<ul>
		[*]Conosci voce 1
		[*]Conosci voce 2
		[*]Conosci voce 3
		[*]Conosci voce 4
		[*]Conosci voce 5
		[/list]
</div>

CSS

div#welcome {
	background: #F97717 url(i/welcome.gif) center top no-repeat;
	min-height:125px;
	height:auto !important;
	height:125px;
}

div#welcome ul {
	margin:0 auto;
	padding:0;
	margin-left:592px;
	text-align:left;
	/*mettendo il margin top sotto mi da l'errore*/
        margin-top:20px;
}

anche in questo caso se all'elemento "ul" applico un margin top, con firefox, il backgroung dell'elemento contenitore (in questo caso "welcome") si sposta verso il basso.

[mogiaco76]

niente?

[awd]

prova il padding invece del margin

[mogiaco76]

con il padding funziona, però non capisco la logica :S

grazie