[Css] Problema con uno sfondo in un div

[garlick]

Ciao, ho il seguente css:

body{ font: 10px "Verdana", Verdana,Arial,sans-serif; color: #333333; background-color: #636C71; text-align:center; margin:0 auto;}

div#container{width: 596px; margin:0px auto; background:  url(img/bgcontent.gif) repeat-y; text-align:center;}

div#header{width: 596px; height:290px; background:  url(img/header.gif);}
div#divider{background:  url(img/divider.gif); height: 15px; margin-top:10px;}

div#centering{width: 560px; text-align:center;  margin:0 auto;}

div#menu{width: 160px; text-align:center;  margin:0 auto; height: 450px; float: right;}

div#panel{width: 160px; text-align:left; background-color:#3A4852; height: 150px;  border-width: 1px; border-style: solid; border-color: #FFFFFF;}
div#panelRed{width: 160px; background-color:#394751; height: 6px; border-width: 1px; border-style: solid; border-color: #FFFFFF;  margin-top:10px;}
div#panelWhite{width: 160px; background-color:#F59899; height: 4px;}
div#panelBlack{width: 160px; background-color:#404040; border-width: 1px; border-style: solid; border-color: #FFFFFF; height:2px;}

div#corpo{width: 390px; float: left;  text-align:left; }

div#msg{width: 390px; background-color:#E6E6E6; text-align:left;}
span#title{font: 12px; color: #394751; font-weight: bold;}

div#text1{width: 500px; margin-left:10px; margin-right:10px; text-align:justify; font-style: italic;}

e poi l'html:

<div id="container">
<div id="header"></div>
<div id="centering">
<div id="corpo">

<div id="divider"></div>
<div id="msg">
<span id="title">{$post.title}</span>


</div>

</div>

<div id="menu">
      
<div id="panelRed"></div> 
<div id="panel"></div> 
<div id="panelBlack"></div> 


<div id="panelRed"></div> 
<div id="panel"></div> 
<div id="panelBlack"></div> 
</div>

</div>

</div>

Se provate a vedere su http://biscazziere.altervista.org potete vedere che con IE lo sfondo del div "container" appare visualizzato correttamente, mentre con Firefox lo sfondo non viene ripetuto in verticale fino alla fine della pagina e non viene visualizzato correttamente...come mai?

Grazie

[Mich_]

Ci sono alcuni errori gravi.

1. ci sono degli attributi id con valore ripetuto: questo non e` possibile;

2. ci sono ddei conti sbaglaiti per il box-model del W3C (non seguito da IE): la larghezza totale di un oggetto e` data da:
margin+border+padding+width+padding+border+margin ;

3. id="title" : title e` il nome di un elemento: non puo` essdre anche il nome di un altro oggetto;

4. mi pare che manchino anche le istruzioni per centrare qualche elemento nei browser conformi (c'e` solo il text-align che serve solo per IE).


Poi ci sono errori di semantica:
il tuo<div id="msg">
<span id="title">{$post.title}</span>


</div>
va sostituito da:
<h1>{$post.title}</h1>
con un CSS opportuno per far assumere la grafica che volevi assegnare con tutto quell'accrocchio.