Foros del Web » Creando para Internet » CSS »

Problema para maquetar un catalogo de producto

 Estas en el tema de Problema para maquetar un catalogo de producto en el foro de CSS en Foros del Web. Hola, tengo un problema con maquetar un catalogo de productos solo con internet explorer 6 , en el resto se ve bien: firefox 2.0, ie ...
  #1 (permalink)  
Antiguo 10/01/2007, 14:59
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 20 años, 4 meses
Puntos: 8
Problema para maquetar un catalogo de producto
Hola,

tengo un problema con maquetar un catalogo de productos solo con internet explorer 6, en el resto se ve bien: firefox 2.0, ie 7 y opera.

El problema ocurre al final, abajo del ultimo producto, las imagenes de info, agregar al carro y lleer mas se corren hacia abajo en la siguiente linea, no queda bien en la misma linea como en los otros productos. Muy extraño sólo ocurre con el ultimo producto

Para ver el problema ver en la siguiente dirección con IE 6.

Problema con IE6

El codigo de la página lo dejé en el post de más abajo.

Gracias y saludos
Última edición por zsamer; 11/01/2007 a las 09:20
  #2 (permalink)  
Antiguo 11/01/2007, 09:18
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 20 años, 4 meses
Puntos: 8
Re: Problema para maquetar un catalogo de producto
Aquí dejo el codIgo css y html.

Agradecería mucho alguna idea o luz para solucionar el problema.

css:
Código PHP:
*{
    margin: 0;
    padding: 0;
}

body{
    text-align: center;
    font-size: small;
    font-family: Georgia, "Times New Roman", serif;
    background: #369;
}

img{
    display: block;    
    margin: 0;
    padding: 0;
    border: 0;
}

#home-productos-destacados{
    width: 438px;
    height: 420px;
    margin: 15px auto 0 auto;
    padding: 0px 0px 0px 0px;
    background-color:#ccc;
    text-align: center;
    clear: both;
    overflow: hidden;
}

.producto-destacado{
    width: 207px;
    height: 119px;
    background-color:red;
    float: left;
    overflow: hidden;
    padding: 0px;
    margin: 0 12px 12px auto;
}

.producto-destacado-header{
    width: 207px;
    height: 11px;
    background-color:#fff;
    text-align: left;
    margin: 0px;
    padding: 0px;
    clear: both;
}

.producto-destacado-codigo{
    width: 207px;
    height: 11px;
    background-color:#fff;
    margin: 0px;
    padding: 0px;
}

.producto-destacado-codigo p{
    font-family: Verdana, Arial, Helvetica, Sans Serif;
    font-size: 9px;
    color: #333;
    margin: 0px;
    padding: 0px;
    line-height: 8px;
}

.producto-destacado-center{
    width: 207px;
    height: 93px;
    margin: 0px;
    padding: 0px;
    background-color:#fff;
    text-align: left;
    clear: both;
}

.producto-destacado-img{
    width: 108px;
    height: 93px;
    margin: 0px;
    padding: 0px;
    background-color:#ccc;
    float: left;
}

.producto-destacado-resumen{
    width: 99px;
    height: 93px;
    margin: 0px;
    padding: 0px;
    background-color:#fff;
    float: left;
}

.producto-destacado-resumen h3{
    font-family: Verdana, Arial, Helvetica, Sans Serif;
    font-size: 11px;
    FONT-WEIGHT: bold;
    color: #AE0D01;
    margin: 0px;
    border: 0;
    padding: 5px;
    line-height: 11px;
}

.producto-destacado-resumen p{
    font-family: Verdana, Arial, Helvetica, Sans Serif;
    font-size: 11px;
    color: #333;
    margin: 0px;
    padding: 0px 5px 0px 5px;
    line-height: 11px;
}

.producto-destacado-footer{
    width: 207px;
    height: 15px;
    margin: 0px;
    padding: 0px;
    background-color: #ccc;
    text-align: left;
    overflow: hidden;
}

.imagen-zoom{
    width: 17px;
    height: 15px;
    margin: 0px;
    padding: 0px;
    border-right: 1px solid #fff;
    background-color: #fff;
    float: left;
    clear: none;
}
.producto-info{
    width: 37px;
    height: 15px;
    margin: 0px;
    padding: 0px;
    border-right: 1px solid #fff;
    background-color: #fff;
    float: left;
    clear: none;
}

.producto-add{
    /*width: 26px;*/
    width: 104px;
    height: 15px;
    margin: 0px;
    padding: 0px;
    /*border-right: 78px solid #fff;*/
    background-color: #999;
    float: left;
    clear: none;
}

.ver-mas{
    width: 47px;
    height: 15px;
    margin: 0px;
    padding: 0px;
    background-color: #fff;
    float: left;
    clear: none;
} 
html:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Banquete</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css" />
</head>
<body>

<div id="home-productos-destacados">
<!-- INICIA LOOP PRODUCTOS DESTACADOS -->

    <!-- INICIA PRODUCTO -->
    <div class="producto-destacado">
    
        <div class="producto-destacado-header">
            <div class="producto-destacado-codigo">
                <p>COD: 123456</p>
            </div>
        </div>
        
        <div class="producto-destacado-center">
            <div class="producto-destacado-img">
                <img src="productos-001.jpg" alt="Producto Titulo" title="Producto Titulo" />
            </div>
            <div class="producto-destacado-resumen">
                <h3>CARAMELO Y HELADO</h3>
                <p>Ideal para este verano es este exisito postre con helado de vainilla y ...</p>
            </div>
        </div>
        
        <div class="producto-destacado-footer">
            <div class="imagen-zoom">
                <img src="productos-img.jpg" alt="Agrandar Imágen" title="Agrandar Imágen" />
            </div>
            <div class="producto-info">
                <img src="productos-info.jpg" alt="Detalle Producto" title="Detalle Producto" />
            </div>
            <div class="producto-add">
                <img src="productos-add.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
            </div>
            <div class="ver-mas">
                <img src="productos-leermas.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
            </div>
        </div>
        
    </div>
    <!-- FIN PRODUCTO -->            
    <!-- INICIA PRODUCTO -->
    <div class="producto-destacado">
    
        <div class="producto-destacado-header">
            <div class="producto-destacado-codigo">
                <p>COD: 123456</p>
            </div>
        </div>
        
        <div class="producto-destacado-center">
            <div class="producto-destacado-img">
                <img src="productos-001.jpg" alt="Producto Titulo" title="Producto Titulo" />
            </div>
            <div class="producto-destacado-resumen">
                <h3>CARAMELO Y HELADO</h3>
                <p>Ideal para este verano es este exisito postre con helado de vainilla y ...</p>
            </div>
        </div>
        
        <div class="producto-destacado-footer">
            <div class="imagen-zoom">
                <img src="productos-img.jpg" alt="Agrandar Imágen" title="Agrandar Imágen" />
            </div>
            <div class="producto-info">
                <img src="productos-info.jpg" alt="Detalle Producto" title="Detalle Producto" />
            </div>
            <div class="producto-add">
                <img src="productos-add.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
            </div>
            <div class="ver-mas">
                <img src="productos-leermas.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
            </div>
        </div>
        
    </div>
    <!-- FIN PRODUCTO -->
    <!-- INICIA PRODUCTO -->
    <div class="producto-destacado">
    
        <div class="producto-destacado-header">
            <div class="producto-destacado-codigo">
                <p>COD: 123456</p>
            </div>
        </div>
        
        <div class="producto-destacado-center">
            <div class="producto-destacado-img">
                <img src="productos-001.jpg" alt="Producto Titulo" title="Producto Titulo" />
            </div>
            <div class="producto-destacado-resumen">
                <h3>CARAMELO Y HELADO</h3>
                <p>Ideal para este verano es este exisito postre con helado de vainilla y ...</p>
            </div>
        </div>
        
        <div class="producto-destacado-footer">
            <div class="imagen-zoom">
                <img src="productos-img.jpg" alt="Agrandar Imágen" title="Agrandar Imágen" />
            </div>
            <div class="producto-info">
                <img src="productos-info.jpg" alt="Detalle Producto" title="Detalle Producto" />
            </div>
            <div class="producto-add">
                <img src="productos-add.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
            </div>
            <div class="ver-mas">
                <img src="productos-leermas.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
            </div>
        </div>
        
    </div>
    <!-- FIN PRODUCTO -->
    <!-- INICIA PRODUCTO -->
    <div class="producto-destacado">
    
        <div class="producto-destacado-header">
            <div class="producto-destacado-codigo">
                <p>COD: 123456</p>
            </div>
        </div>
        
        <div class="producto-destacado-center">
            <div class="producto-destacado-img">
                <img class="producto-destacado-img2" src="productos-001.jpg" alt="Producto Titulo" title="Producto Titulo" />
            </div>
            <div class="producto-destacado-resumen">
                <h3>CARAMELO Y HELADO</h3>
                <p>Ideal para este verano es este exisito postre con helado de vainilla y ...</p>
            </div>
        </div>
        
        <div class="producto-destacado-footer">
            <div class="imagen-zoom">
                <img src="productos-img.jpg" alt="Agrandar Imágen" title="Agrandar Imágen" />
            </div>
            <div class="producto-info">
                <img src="productos-info.jpg" alt="Detalle Producto" title="Detalle Producto" />
            </div>
            <div class="producto-add">
                <img src="productos-add.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
            </div>
            <div class="ver-mas">
                <img src="productos-leermas.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
            </div>
        </div>
        
    </div>
    <!-- FIN PRODUCTO -->
    
    
<!-- FINALIZA LOOP PRODUCTOS DESTACADOS -->
</div>
    
</body>
</html> 
  #3 (permalink)  
Antiguo 13/01/2007, 06:03
Avatar de kahlito
Colaborador
  
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 1 mes
Puntos: 65
Re: Problema para maquetar un catalogo de producto
Hola zsamer, mirando así por encima desde los navegadores no veo la diferencia , es decir los veo igual en Firefox como en Ie7 e Ie6.

¿Podrías poner una captura de tu problema?
  #4 (permalink)  
Antiguo 14/01/2007, 10:02
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 20 años, 4 meses
Puntos: 8
Re: Problema para maquetar un catalogo de producto
Cita:
Iniciado por kahlito Ver Mensaje
Hola zsamer, mirando así por encima desde los navegadores no veo la diferencia , es decir los veo igual en Firefox como en Ie7 e Ie6.

¿Podrías poner una captura de tu problema?
Aveces en IE 6, tienes que resfrescar o recargar la pagina una a dos veces para que se descuadre y se vea el problema, es muy extraño.



Gracias y salu2
  #5 (permalink)  
Antiguo 14/01/2007, 12:49
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: Problema para maquetar un catalogo de producto
Creo que tienes un problema con los comentarios en html. Bórralos todos y creo que todo volverá a su sitio. No sé si los habrás metido con algún editor concreto, pero puede ser que tengan algún código que no vemos pero que te produce el problema.

Mikel.
  #6 (permalink)  
Antiguo 15/01/2007, 12:50
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 20 años, 4 meses
Puntos: 8
Re: Problema para maquetar un catalogo de producto
Cita:
Iniciado por Mikmoro Ver Mensaje
Creo que tienes un problema con los comentarios en html. Bórralos todos y creo que todo volverá a su sitio. No sé si los habrás metido con algún editor concreto, pero puede ser que tengan algún código que no vemos pero que te produce el problema.

Mikel.

Justamente, eran los comentarios, muy extraño.

Pero ¿porqué sucede este problema en IE con los comentarios?

super extraño, se supone que los comentarios son para comentar el codigo y no deberia interferir en la funcionalidad del codigo.

hay alguna razon?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:52.