Margin-bottom (en FF si, iE no) ayuda.

Saminai · #1 (**permalink**) 14/06/2007, 02:09

Buenos días a todos,

tengo un ligero problema con el margin-bottom de un DIV:

3uvesDobles.manualslleida.com/

si os fijáis en el centro, aparecen unos DIV's con una base ROJA (si lo miráis desde Firefox), en cambio en Explorer no aparece ese margin de 23px. Deseo poner el margin para luego tener separación entre las fichas de producto, podría solucionarlo poniendo un div más alto que la propia ficha para arreglarlo, pero creo que no es la solución más adecuada...

el código CSS:

#fichaProductoContenedor{
width:270px;
height:145px;
background-color:#FFF;
float:left;
border-color: #b8bed0;
border-style: solid;
border-width: 5px 1px 1px 1px;
margin-bottom: 500px;
}

el código XHTML:

<div id="llistatEsquerra">
<div id="fichaProductoContenedor">
<div id="fichaProductoContenedorTitulo">Cashel marmoleada azul </div>
<div id="fichaProductoContenedorExplica">Colocar aquí el contenido de la nueva etiqueta Div</div>
</div>
</div>

También me doy cuenta, que el DIV de la FOTO DEL PRODUCTO, en explorer sale desplazada hacia abajo, y en Firefox sale perfectamente. ARG !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

A ver si me podéis dar una ayuda, llevo ya varias horas con ésto, buscando y probando HACKS y nada, no consigo solucionarlo.

Mil gracias!!!

g05l21 · #2 (**permalink**) 14/06/2007, 04:46

Hola Saminai!

Lo primero de todo, IMHO, creo que tienes un problema de concepto con el tema de los divs, parece que eres de los que estás empezando a pasar de diseñar con tablas a diseñar con CSS, me equivoco¿? Si es asi enhorabuena y adelante

El problema es q tienes un poco caótico el código. Es seguro que se puede hacer sin abusar tanto de los divs ya que tienes un diseño bastante simple y muy muy elegante (me gusta bastante

)

Por cierto, si vas a usar más de uno, te recomiendo que uses "class" en vez de "id"

Mira a ver si esto te viene mejor:

Código HTML:

<html>

  <head>


<STYLE TYPE="text/css">

.fichaProductoContenedor{

width:270px;
height:145px;
background-color:#eee;
float:left;
border-color: #b8bed0;
border-style: solid;
border-width: .5em .1em .1em .1em;
margin: 0 0 10em;
pading:0;
}


.fichaProductoContenedor h3{
color:red;
background-color:blue;
margin: 1em 0;
padding:0;
}

</STYLE>
</head>
<body>

<div class="fichaProductoContenedor">
<h3>Cashel marmoleada azul</h3>
Colocar aquí el contenido de la nueva etiqueta Div
</div>

<div class="fichaProductoContenedor">
<h3>Cashel marmoleada azul</h3>
Colocar aquí el contenido de la nueva etiqueta Div
</div>


<div class="fichaProductoContenedor">
<h3>Cashel marmoleada azul</h3>
Colocar aquí el contenido de la nueva etiqueta Div
</div>


<div class="fichaProductoContenedor">
<h3>Cashel marmoleada azul</h3>
Colocar aquí el contenido de la nueva etiqueta Div
</div>


<div class="fichaProductoContenedor">
<h3>Cashel marmoleada azul</h3>
Colocar aquí el contenido de la nueva etiqueta Div
</div>


</BODY>

</HTML>

Mucha suerte y buen diseño!