¿Qué está mal en mi código CSS? - Se ve mal en Chrome y bien en todos los demás

[dfmex]

Hola amigos,

¿Alguien podría ayudarme a verificar que está mal en mi codigo CSS?

PROBLEMA: En Google Chrome las cajas de imagenes se bajan y quedan hasta después del pie de página.

En otros los demás navegadores se ve bien (IE, FF, Opera, Safari, ETC), todos menos chrome.

Por favor sientanse libres de analizar el código fuente para ayudarme a ver qué está mal:

Código URL:

http://www.prettypily.com/productos.php?cat=bolsas
 

Notarán el claro error que sucede si lo abren con Chrome y después con otro navegador...

Ojalá alguien me pueda echar un empujoncito,
De antemano gracias por su ayuda.

[RafaRG]

creo que si pusieses a cada cuadro un id y una posición, solucionarías el problema. por ejemplo:

Código PHP:

  <style type="text/css"> 
.características_generales { 
   color:red; 
   background-color:green; 
   width:100px; 
   height:150px; 
   ... 
   } 
#id1 { 
   position:absolute:top:0px; left:0px; 
   } 
#id2 { 
   position:absolute:top:0px; left:120px; 
   } 
#id3 { 
   position:absolute:top:0px; left:240px; 
   } 
#id4 { 
   position:absolute:top:170px; left:0px; 
   } 
#id5 { 
   position:absolute:top:170px; left:120px; 
   } 
#id6 { 
   position:absolute:top:170px; left:240px; 
   } 
</style> 
<div id="cabecera"> 
  Contenido 
</div> 
<div id="contenedor"> 
  <div id="barralateral"> 
  </div> 
  <div class="menubody"><!-- He puesto algunas partes del documento para que te sitúes. Lo importante viene ahora --> 
    <div class="características_generales" id="id1">...</div> 
    <div class="características_generales" id="id2">...</div> 
    <div class="características_generales" id="id3">...</div> 
    <div class="características_generales" id="id4">...</div> 
    <div class="características_generales" id="id5">...</div> 
    <div class="características_generales" id="id6">...</div> 
  </div> 
</div> 
<div id="pie"> 
  Pie de página 
</div>  
   

¿lo entiendes? XD
espero que te sirva

[Tecna]

Buenas,

el height 100% de barra-lateral al estar flotado puede causar problemas y también el display table pero el arreglo no será fácil para todos los navegadores porque el código está muy enrevesado, cuanto más sencillo sea el código más fácil es que sea compatible. Conviene tener algunas cosas en cuenta que te ahorrarán muchos problemas, por ejemplo:

- poner un doctype y validar el código, esto resuelve muchos porblemas sobre todo con explorer.
- no usar elementos vacios de contenido sólo por motivos estéticos, usar reglas de estilo que son para eso. y usar cada elemento para lo que es, esto hace el código más semantico y entendible. Por ejemplo usar listas para los menús, o si realmente son datos tabulados usar una tabla mejor que un híbrido.
- Hacer la página accesible, la página debe ser accesible y funcional aunque no se use javascript por ejemplo, en tu caso sin javascript no se ve ni la cabecera ni el menú pero curiosamente los divs de las imagenes se colocan bien.
- Separar el código css y js en archivos independientes permite trabajar más comodamente y es más fácil hacer cualquier modificación.

[IsaBelM]

en #menubody quita el width