ayuda con DIV y css

dano88 · #1 (**permalink**) 29/12/2006, 09:08

Muy buenas,

Estoy haciendo una página web y al llegar a crear el diseño para las noticias, me he topado con un problema. Al probarlo con firefox, <div class="not_comple"> se situa por encima de los anteriores div, algo que no ocurre en IE (Además de otros errores en firefox). les pongo el código:

Código HTML:

<head>
<style type="text/css">
.titulo_no {
background-image: url(titulo_no.png);
	width:390px;
	height:25px;
	 margin: 0px 0px 0px 22px;
	}
		.tamano{
	width:420px;	}

	.divtitulo{
	 font-size: 10px;
	 color: #FFFFFF; 
	  margin: 5px 0px 0px 26px;
	}
	
	.avatar
	{
	 margin: 5px 0px 0px 35px;
	 float: left;
	}
	.not_con{
	 margin: 5px 18px 0px 35px;
	/* float: right;*/
	 color: #000000;
	 font-size: 10px;
	}
	.not_comple {
	border: 1px dashed #000000;
	width:390px;
	height:16px;
	margin: 5px 0px 0px 35px;
	background-color:#985d39;
	color: #FFFFFF;
	filter:alpha(opacity=50); /* IE */
    -moz-opacity:0.5; /* Firefox, Opera, ... */
	opacity: 0.5; /* CSS 3*/
	
	text-align: center;
	}

</style>
</head>

<body>
<div class="tamano">
<div class="titulo_no">
		<div class="divtitulo">
		  <b>bla bla blabla bla blabla bla blabla bla </b>
		</div>
</div>
	
	<div class="avatar">
	     <img src="avatar.png" alt="ava"  /> &nbsp;
	</div>
<div class="not_con">
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla 
</div>		
	<div class="not_comple">
	  <b> Noticia completa | 0 comentarios </b>
	</div>
	<br /></div>
</body>
</html>

Por favor, a ver si alguien tiene tiempo y lo hecha un vistazo. Muchísimas gracias de antemano.

Shade · #2 (**permalink**) 29/12/2006, 10:52

mmm no se si te refieres encima de top o encima de z-index

Si es de z-index porque no asignas z-index a las cosas y te lo solucionas?

dano88 · #3 (**permalink**) 29/12/2006, 11:19

No, parece ser que me he expresado mal. Os dejo una captura de pantalla:

ww_w.daimonions.c_om/forosdelweb/forosdelweb.JPG

Si os dais cuenta, en internet explorer se ve tal y como quiero que se vea, pero en firefox se me mal. La pregunta era si alguien me puede ayudar modificando el código para que se vea correctamentemente en ambos navegadores.

Muchas gracias por interesarte Shade!"!

PD, No me dejan poner links, para ver la imagen quiten los "_". Gracias.

Shade · #4 (**permalink**) 29/12/2006, 11:37

Mmmm... me he fijado en FF 2 y anda perfecto la verdad... si hace falta porque no pruebas agregar vertical-align: bottom; en el .not_comple ?

Fijate, sino seguire pensando :)

dano88 · #5 (**permalink**) 30/12/2006, 13:55

Pues no, sigue igual :S por cierto, yo lo he probado en firefox 1.5

Mikmoro · #6 (**permalink**) 30/12/2006, 16:53

Buenas.
¿Además de otros errores en FF?

¡Qué gracia! No es que FF no pueda cometer errores, pero respeta los standares. Los errores en este caso los está cometiendo IE, porque no interpreta bien tu código. Si compruebas con otros navegadores, verás lo que te digo.

En el caso que consultas, añade el selector clear: both; a tu clase .not_comple
Es así como debe ser el código para conseguir lo que quieres, que por alguna razón IE interpreta mal y sin estar bien escrito, por suerte te mostraba lo que tú querías.

Hay otras formas de hacerlo pero creo que con esta te valdrá. Ya dirás si va bien

Mikel.