Ciao a tutti!

ho un bel problema che mi fa impazzire...ho una pagina XHTML 1.1 divisa in 5 DIV verticali affiancati così fatta:

codice:
<div class="erba"></div>
<div class="cordolo"></div>
<div id="asfalto">
  [img]images/logos/logo.gif[/img]

</div>
<div class="cordolo"></div>
<div class="erba"></div>
e un file css a parte che descrive i DIV così

codice:
#asfalto {
  float: left;
  top: 0px;
  background-image: url(../images/site/asfalto.jpg);
  background-repeat: repeat;
  min-height: 100%;
  font-family: Verdana, Arial, Helvetica;
  color: #CCCCCC;
  text-align: center;
}
.erba {
  float: left;
  top: 0px;
  background-image: url(../images/site/erba.jpg);
  background-repeat: repeat;
  min-height: 100%;
}

.cordolo {
  float: left;
  top: 0px;
  background-image: url(../images/site/cordolo.jpg);
  background-repeat: repeat;
  width: 1%;
  min-height: 100%;
}
il problema è che in Firefox-Chrome-Safari mi appare solo il DIV centrale "asfalto" tutto spostato a sinistra, solo con Opera si vede correttamente!!! la develoepr bar di firefox mi visualizza tutit e 5 i div...soluzione????