desbordamiento de dos bloques

[IsaBelM]

hola, bien los problemas lo tengo con ff e ie. en ff el problema es que el bloque contenedor, en color naranja, toma un alto demasiado exagerado, pero en el colector, contenedor_secciones, el height está con el valor relativo 100%.
el otro problema es en ie, el height de lo bloques de color carne de nuevo se desborda. el colector que controla esta parte es secciones
os dejo el css, html y una imagen para ver si dais con la solución a estos problemas

gracias

Código CSS:

.contenedor_secciones {
  background: orange;
  height: 100%;
  padding: 20px 7px;
}
 
 
.secciones {
  background: #C89580;
  float: left;
  width: 238px;
  height: 138px;
  margin: 10px 35px;
}
 
 
.secciones div{  
  background: #111;
  /*color: #FFF;*/
  text-align: center; 
  filter: alpha(opacity=55); 
  opacity: .55;  
  position: relative;  
  bottom: 37px;
  *bottom: 41px;
  left: 0px;  
  padding: 10px;
  margin: 0px 1px;
  border-top: 1px solid #999;
  *height: 1px; /* solo para IE */
}  
 
 
.secciones a {  
  color: #FFF;
  text-decoration: none;
}
 

Código HTML:

<div class="contenedor_secciones">
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
     </div>
 

[tunait]

Hola Isabel,

no acabo de comprender bien los comportamientos que mencionas ¿no tendrás el ejemplo tal cual colgado en algún server para poder probarlos in-situ?

[IsaBelM]

gracias por responder. aquí puedes ver los problemas que indico

[tunait]

Hola de nuevo,

en firefox (3.6) yo lo veo bien y el contenedor naranja llega hasta donde me da la impresión que debe llegar. Vamos, que lo veo igual en firefox que en chrome.

En explorer sí que veo lo que sucede. El caso es que no estás indicando al navegador la definición de tipo de documento con lo que entra a renderizarlo al modo que le parece y obtenemos resultados inesperados. Si le asignas una dtd para xhtml 1.0 transitional se arregla ese desbordamiento en explorer, aunque te descoloca un poco el div con el alpha pero se arregla asignándole la altura que quieras asignarle (en mis pruebas una altura de 15px lo acomoda bastante bien). Eso para explorer, para otros navegadores no hace falta que le asignes altura, tal como lo tienes ahora.

Con la dtd se te anulará la altura del contenedor naranja en otros navegadores, pero lo solucionas asignándole a ese contenedor la propiedad overflow con un valor de hidden.

[IsaBelM]

tunait, muchimas gracias por tu colaboración. he hecho todo lo que me dijistes y ha funcionado