Foros del Web » Creando para Internet » CSS »

Altura de DIV mala en FF pero no en IE

Estas en el tema de Altura de DIV mala en FF pero no en IE en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/05/2007, 21:51
 
Fecha de Ingreso: marzo-2006
Ubicación: Medellín
Mensajes: 93
Antigüedad: 11 años, 8 meses
Puntos: 0
Altura de DIV mala en FF pero no en IE

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.
__________________
"Conocimiento adquirido y no compartido se perderá para siempre" :cool:
  #2 (permalink)  
Antiguo 21/05/2007, 17:37
Avatar de Genetix  
Fecha de Ingreso: febrero-2002
Ubicación: Lima - Perú
Mensajes: 1.600
Antigüedad: 15 años, 10 meses
Puntos: 43
Re: Altura de DIV mala en FF pero no en IE

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
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




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