Margin-bottom no se aprecia en IE.

Azer · #1 (**permalink**) 12/06/2012, 20:31

Hola usuarios de Foros del web. Espero que estén muy bien. Hoy se me presento un inconveniente al chequear mi página web en IE.

Le aplico un margin-bottom a mi <div> "footer" y este se visualiza perfectamente en chrome, pero no en IE. Probe de varias formas, intentando colocarlo en otros divs, pero no hubo caso. Dejo un fragmento de mi código.

Fragmento código 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" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<link href="/favicon.ico" rel="shortcut icon" />
	<title>Gwallpapers</title>
</head>
	<body>
		<div class="cuerpo">
			<div class="header">
				<div class="logo">
				<a href="index.html"><img class="logo" src="images/logo5.png" alt="logo"/></a>
				</div>
			</div>
			<div class="contenido">
				<div class="espaciowallpapers">
				</div>	
				<div class="sidebar">
				</div>	
				<div class="footer">
					<p>Gwallpapers - 2012</p>
				</div>
			</div>	
		</div>	
	</body>
</html>

Partes de mi código css que considero importantes:

Código HTML:

.cuerpo{
	width:1191px;
	margin:auto;
	position:relative;
}

.footer{
	width:914px;
	height:30px;
	background:#434d6e;
	margin-bottom:10px;
	float:left;
	overflow:hidden;
	border-radius: 0px 0px 10px 10px;
	border-left:1px solid #434d6e;
	border-right:1px solid #434d6e;
}

Todo seria más fácil si podría agregarle un margin-bottom al .cuerpo, pero le di un margin:auto para que la página quede centrada.

La verdad no se me ocurre una solución al problema, espero que ustedes puedan ayudarme. Muchisimas gracias por su tiempo, que tengan un buen día!

pzin · #2 (**permalink**) 12/06/2012, 20:58

Cita:

Iniciado por Azer

Todo seria más fácil si podría agregarle un margin-bottom al .cuerpo, pero le di un margin:auto para que la página quede centrada.

Código CSS:

Ver original.cuerpo{
    margin: 0 auto 10px auto; // en orden: arriba, derecha, abajo e izquierda
}

No sé si solucionará el problema. Ya me iba a dormir y tengo los párpados que me ganan la batalla.

kseso? · #3 (**permalink**) 13/06/2012, 04:49

Muchas veces estas situaciones se deben a herencias o por las propiedades de los contenidos.
Colocar un enlace a la página del problema ayudaría.

Azer · #4 (**permalink**) 13/06/2012, 11:06

Hola kseso, muchas gracias por responder. Lamentablemente no me funciono tu sugerencia, pero luego me di cuenta que la solución era tan simple como agregar el margin-bottom a mi .contenido y eliminando el float de mi .footer (de lo segundo me di cuenta simplemente probando, no lo deduje).

Mi código quedo así:

Código:

.cuerpo{
	width:1191px;
	margin:auto;
	position:relative;
}

.contenido{
	width:1221px;
	margin-bottom:10px;
}

.footer{
	width:914px;
	height:30px;
	background:#434d6e;
	overflow:hidden;
	border-radius: 0px 0px 10px 10px;
	border-left:1px solid #434d6e;
	border-right:1px solid #434d6e;
}

Porque crees que eliminando el float pude aplicar el margin-bottom? Gracias por tu tiempo.

kseso? · #5 (**permalink**) 13/06/2012, 11:12

busque información sobre los conceptos:
flujo html
limpiar float

Por eso le mencionaba lo de "herencias o por las propiedades de los contenidos".

Azer · #6 (**permalink**) 13/06/2012, 11:52

Muchas gracias, voy a leer algo sobre eso. Que tengas un buen día!