Altura de DIV mala en FF pero no en IE

arleyb · #1 (**permalink**) 19/05/2007, 20:51

Bueno, resulta que tengo un problemita con FF cosa que me extraña, mientras que el IE me lo muestra como debería ser, cosa que realmente me sorprende. Resulta que tengo un DIV el cual contiene un titulo H1, una imagen que tiene un borde y un parrafo. El problema sucesde que la altura de este div no se ve ajusta correctamente al tamaño de la imagen como debería ser. Pero para que quede mas claro les dejo una muestra del problema y el codigo tanto HTML como CSS que estoy usando:

Codigo CSS:

Código HTML:

/***** FORMATEO DE LAS MARGENES *****/

html, body, p {
	border:0;
	margin:0;
	padding:0;
}
 
body {
	font:100%/1.25 Verdana, Geneva, Arial, Helvetica, sans-serif;
}
 
 
h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	margin:0;
	padding:0;
}
 
 
/*------------FIN RESETEO------------*/


/*----- ESTRUCTURA DE LA PAGINA -----*/

#img_sup {
	background: url(bg-top.gif) center no-repeat;
	/*border: 1px solid #444;*/
	height: 35px;
	left: 0;
	position: absolute;
	text-align: left;
	top: 0;
	width: 100%;	
	z-index: 0;
}

#wrapper {
	background: url(bg.gif) center repeat-y;
	margin: 35px auto 0 auto;
	position: relative;
	width: 740px;
}

#head {
	width:637px;
	height:191px;
	margin:0 auto;
	position:relative;
	background:url(head_img.png) no-repeat;
}


.noticia {
	background: #E1E6CC;
	height: auto;
	margin: 20px 51px 5px 49px;
	width: 637px;
	padding: 2px;
}

.noticia h1 {
	color: #7DA61E;
	font-weight:bold;
	font-size: 110%;
	letter-spacing:-1px;
	padding: 5px 0 0 5px;
	clear: both;
}

.noticia h1 img {
	margin-left: 5px;
}

.noticia p {
	font-size: 70%;
	text-align: justify;
	margin: 5px;
}

.Imagen_Dot{
	padding:6px;
	background:url(dotted.gif) repeat;
	float: left;
	margin: 0 5px 0 0;
}


#foot {
	color: #fff;
	text-align: center;
	font-size: 65%;
	font-weight: bold;
	width: 637px;
	height: auto;
	margin: 25px auto 0 auto;
	position: relative;
	background: url(bg_footer.png) repeat-x;
}

#foot p {
	padding: 8px 0;
}

#img_inf {
	background: url(bg-bottom.gif) top center no-repeat;
	/*border: 1px solid #FF0000;*/
	heigth: 50px;
	left: 0;
	top: auto;
	width: 100%;
}
/*------------FIN ESTRUCTURA------------*/

Codigo HTML:

Código HTML:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="es" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="copyright" content="Design 4 Web" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<title>  Columna VIP - Boletin </title>
</head>
<body>
<div id="wrapper">
	<div id="head">
	</div>
	<div class="noticia">
		<h1>Noticia 1 <img src="bullet_img.png" /></h1>
		<p><img src="jaime.jpg" class="Imagen_Dot"/>Lorem ipsum pri ei oportere reformidans, eos ut diam solum. Eos id repudiandae definitiones. Nonumy facilisis pro at, eu assentior efficiendi his, qui urbanitas concludaturque ex. Pri suas adhuc cu, regione accusamus quo at, an mel apeirian periculis philosophia. An audiam temporibus eos, te ridens sanctus mei. Adhuc harum no duo, et per simul liberavisse.
		Eu senserit incorrupte vis, duo et dico corpora, brute ignota latine mei no. Pri suscipit partiendo id. Mea no agam soluta. Id putant commodo adipisci per, his fabulas incorrupte ei. His veniam doctus labores ad.</p>
	</div>
	<div class="noticia">
		<h1>Noticia 2 <img src="bullet_img.png" /></h1>
		<p>Lorem ipsum pri ei oportere reformidans, eos ut diam solum. Eos id repudiandae definitiones. Nonumy facilisis pro at, eu assentior efficiendi his, qui urbanitas concludaturque ex. Pri suas adhuc cu, regione accusamus quo at, an mel apeirian periculis philosophia. An audiam temporibus eos, te ridens sanctus mei. Adhuc harum no duo, et per simul liberavisse.
		Eu senserit incorrupte vis, duo et dico corpora, brute ignota latine mei no. Pri suscipit partiendo id. Mea no agam soluta. Id putant commodo adipisci per, his fabulas incorrupte ei. His veniam doctus labores ad.</p>
	</div>
	<div class="noticia">
		<h1>Noticia 3 asdf sadf sadf sadf <img src="bullet_img.png" /></h1>
		<p>Lorem ipsum pri ei oportere reformidans, eos ut diam solum. Eos id repudiandae definitiones. Nonumy facilisis pro at, eu assentior efficiendi his, qui urbanitas concludaturque ex. Pri suas adhuc cu, regione accusamus quo at, an mel apeirian periculis philosophia. An audiam temporibus eos, te ridens sanctus mei. Adhuc harum no duo, et per simul liberavisse.
		Eu senserit incorrupte vis, duo et dico corpora, brute ignota latine mei no. Pri suscipit partiendo id. Mea no agam soluta. Id putant commodo adipisci per, his fabulas incorrupte ei. His veniam doctus labores ad.</p>
	</div>
	<div id="foot">
		<p>DESIGN 4 WEB &copy;<br> Columna VIP de Julio Betancur C., se autoriza su reproducci&oacute;n total o parcial por toda clase de medios electr&oacute;nicos, la internet, radio, prensa y televisi&oacute;n, citando su fuente.<br> Medellin - Colombia</p>
	</div>
</div>
<div id="img_sup"></div>
<div id="img_inf">
	<p>Imagen Inf</p>
</div>
</body>
</html>

Espero me puedan ayudar con este problema, muchas gracias.

Genetix · #2 (**permalink**) 21/05/2007, 16:37

Hola
prueba aumentando esta propiedad a tu estilo .noticia
.noticia h1 {
color: #7DA61E;
font-weight:bold;
font-size: 110%;
letter-spacing:-1px;
padding: 5px 0 0 5px;
clear: both;
overflow:hidden;
}

saludos