[CSS] problem with div background

programming web dev
1

This is what’s going on (http://adolfo.losdelacatarina.com/portafolio_final/):

It’s looks good in IE but not in Firefox, so I supposed I’m doing something wrong.

This is the scheme:

  1. container div
    [LIST]
    []top_banner div
    [    ]menu div
    []middle div (the part with shadow below menu)
    [    ]content_area div:[/LIST]-content_box div (to give some space at left and right)
    +box with “lorem ipsum”

The part with the problem is the one cointained in “content_area”


/* CSS Document */
body {
  text-align: center;
  background:url(images/bg.gif) repeat-x;
  }
#contenedor{
 margin-left: auto;
 margin-right: auto;
 width: 614px;
}
#top_banner {
 width:614px;
 height:130px;
 background-image: url(images/index_02.gif);
}
#menu {
 width:614px;
 height:25px;
}
#middle {
 width:614px;
 height:16px;
 }
#content_area {
 width:614px;
 height:auto;
 background:url(images/index_14.gif);
 background-repeat:repeat-y;
 margin:0;
}
#content_box {
 margin-left:10px;
 margin-right:10px;
}
p {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:0.8em;
 color:#000000;
}
/* inicia caja de texto */
.box {
 width:302px;  
 padding:0 0 26px 0;     
 background:url("images/box.gif") bottom left no-repeat;
 float:left;
 }
.box h1 {  
 margin:0;  
 padding:15px 10px 20px 10px;  
 font-size:24px;
 font-style:italic;  
 color:#ffffff;    
 background:url("images/box.gif") top left no-repeat; 
}
.box p{  
 margin:0;  
 padding:0 10px 3px;  
 border:1px solid #F70185;  
 border-width:0 5px;
 background:#000;
 color:#FFFFFF;
 font-size:0.8em;
 line-height:1.2em; 
}
/* termina caja de texto*/
.box_ptf{
 width:280px;
 height:150px;
 background:#33CC66;
 float:right;
}