Problemas con div (IE vs Firefox)

ThunderFx · #1 (**permalink**) 29/01/2007, 01:39

Hola brothers .. pues aqui hechandole los kilos tratando de aprender CSS ... Espero que me puedan ayudar, he aprendido mucho a base de mis problemas y bueno sigo aprendiendo ..

Si checan el siguiente enlace con IE lo ven perfectamente
http://www.dimayo.com.mx/categoria.htm

Pero si lo hacen con el firefox completamente incorrecto... Espero me puedan ayudar a pensar un poquito brother .. Se los agradeceré

Muchas gracias

Mikmoro · #2 (**permalink**) 29/01/2007, 17:55

Prueba este código:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>Categoria</title>
  <style type="text/css">
#ultart { background-color: rgb(226, 226, 226);
font-family: Verdana;
font-size: 11px;
text-align: justify;
overflow: auto;
height: 1%;
}
span { padding: 2px 0px;
background-color: rgb(168, 0, 11);
margin-left: 0px;
font-weight: bold;
margin-bottom: 5px;
display: block;
}
.izq1 { float: left;
padding-bottom: 20px;
padding-right: 4px;
}
.dimg { float: left;
padding-left: 2px;
padding-right: 3px;
width: 106px;
}
.dimgT { float: left;
padding-left: 2px;
padding-right: 3px;
width: 102px;
position: relative;
height: 106px;
}
.dimgT img { position: absolute;
bottom: 0pt;
right: 2px;
}
.corte { clear: both;
}
  </style>
</head>
<body>
<div id="ultart">
<div class="izq1"><span>&nbsp; Categoria</span>
<div class="dimg"><img
 style="width: 106px; height: 106px;" src="img/img_articulo.jpg"
 alt="articulo" /></div>
<div class="dimgT">
Ya tenemos display para motorola modelo 5550 de la bla bla bla
para ver que sakamos.
<img src="img/mas.gif" alt="mas informacion"
 height="10" width="38" /></div>
</div>
<div class="izq1"><span>&nbsp; Categoria</span>
<div class="dimg"><img
 style="width: 106px; height: 106px;" src="img/img_articulo.jpg"
 alt="articulo" /></div>
<div class="dimgT">
Ya tenemos display para motorola modelo 5550 de la bla bla bla
para ver que sakamos.
<img src="img/mas.gif" alt="mas informacion"
 height="10" width="38" /></div>
</div>
<div class="corte"></div>
<div class="izq1"><span>&nbsp; Categoria</span>
<div class="dimg"><img
 style="width: 106px; height: 106px;" src="img/img_articulo.jpg"
 alt="articulo" /></div>
<div class="dimgT">
Ya tenemos display para motorola modelo 5550 de la bla bla bla
para ver que sakamos.
<img src="img/mas.gif" alt="mas informacion"
 height="10" width="38" /></div>
</div>
<div class="izq1"><span>&nbsp; Categoria</span>
<div class="dimg"><img
 style="width: 106px; height: 106px;" src="img/img_articulo.jpg"
 alt="articulo" /></div>
<div class="dimgT">
Ya tenemos display para motorola modelo 5550 de la bla bla bla
para ver que sakamos.
<img src="img/mas.gif" alt="mas informacion"
 height="10" width="38" /></div>
</div>
</div>
</body>
</html>

Tienes que acostumbrate a validar tu código.
Hay muchos cambios con respecto a tu código, así que estúdialo bien, a ver qué sacas de esto.

Mikel.

ThunderFx · #3 (**permalink**) 30/01/2007, 15:44

Hola brother!!! Muchas gracias por todo..
Lo de válidar codigo creo te refieres a que todo este cumpliendo normas, trato de hacerlo, nada más en esta ocasión no lo habia hecho, de hehco tengo una aplciacion en el firefox que me marca cuando todo esta correcto o no ..

Análize el código y lo interesante es "clear" que pone lo que esta debajo de él a los lados, depende de como lo quieras, algo asi investigue .. Tambien sobre no usar unas listas sino un span, que funciona solo para una linea y no como un div como bloque??? Otra cosa que igual miré es que en vez de ponerle id al div le puse class ... Eso no entendi ..

Gracias brother, habner si ya pronto me salgo de dudas, por el momento pues aprendi algo valioso. Muchas gracias

Mikmoro · #4 (**permalink**) 30/01/2007, 16:26

Cita:

Iniciado por ThunderFx

Hola brother!!! Muchas gracias por todo..
Lo de válidar codigo creo te refieres a que todo este cumpliendo normas, trato de hacerlo, nada más en esta ocasión no lo habia hecho, de hehco tengo una aplciacion en el firefox que me marca cuando todo esta correcto o no ..

Sí, me refería ver que tu código sea válido para la W3C. Eso te ayuda a corregir muchos errores tontos que cometemos a veces.

Cita:

Análize el código y lo interesante es "clear" que pone lo que esta debajo de él a los lados, depende de como lo quieras, algo asi investigue ..

Clear, lo que hace es hacer obligatoriamente un corte de línea y forzar a que lo que venga pase a la siguiente línea. Si hay capas flotadas y las que pongas después aparecen a su derecha, con el clear consigues que ya no se pongan más a la derecha (o izquierda) aunque tengan sitio; les obliga a ir a la siguiene línea hacia abajo.

Cita:

Tambien sobre no usar unas listas sino un span, que funciona solo para una linea y no como un div como bloque??? Otra cosa que igual miré es que en vez de ponerle id al div le puse class ... Eso no entendi ..

Las listas es bueno usarlas cuando son necesarias, pero en tu caso no lo era. Por ejemplo, listas de elementos, de enlaces, etc. sí, pero para una lista de recuadros con contenidos dentro de cada uno no.

Id es como en cualquier lenguaje, para un artículo único, un identificador. Es recomendable no usarlo más de una vez, porque identifica el elemento que sea. En css se pone con #tuidentificador.

Class se usa para cuando un elemento se repetirá, apareciendo varios de las mismas características. Por ejemplo, para todos los párrafos de texto rojo, 14px y centrados, lo mejor es hacer una clase con esas características y aplicarla a cada elemento que quieres que sea así. Se usa en css como .miclase.

Espero haberte resuelto algunas dudas.

Mikel.