Foros del Web » Creando para Internet » CSS »

Zona vacia entre encabezado y h1 en Iexplorer

Estas en el tema de Zona vacia entre encabezado y h1 en Iexplorer en el foro de CSS en Foros del Web. Hola, tengo un pequeño problema en esta web: Web donde tengo un div encabezado que mide 166 px de alto y con una imagen dentro ...
  #1 (permalink)  
Antiguo 25/04/2006, 07:10
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Zona vacia entre encabezado y h1 en Iexplorer

Hola, tengo un pequeño problema en esta web:

Web

donde tengo un div encabezado que mide 166 px de alto y con una imagen dentro que mide lo mismo y luego debajo buene un h1, y no deberia de haber ningún problema ni dejar espacios ni nada como ocurre en todos los navegadores, sin embargo en Iexplorer parece que si deja un hueco entre estos dos como se ve en la imagen:



Al igual en esa misma imagen en la flecha de la derecha tambien indico que al poner el texto en p justificado (text-align: justify;) me desplaza el border fuera del contenido y por más que lo intento en uno y en otro en Iexplorer no hay manera de solucionarlo.

He probado con margin a 0 en todos, tambien con padding y algunas pruebas más y no lo consigo, posiblemente se me habrá pasado alguna acción que aún no he probado.

Este es el css que estoy utilizando:

Código HTML:
html,body{
	margin:0;
	padding:0;
	height:100%;
	background-color: #b8976e;
	background-image: url(imagenes/fondo_web.jpg);
	background-repeat: repeat-x;	
	}
	#contenedor{
	width:770px;
	margin:0 auto;
	}
#encabezado{
	background-color:inherit;
	height:166px;
	border-top: 10px solid #f5f3e5;
	border-right: 10px solid #f5f3e5;
	border-left: 10px solid #f5f3e5;
	width:750px;
}
h1 {
	text-align: left;
	color: #FFFFFF;
	padding:3px 15px 0px 30px;
	margin:0;
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	border-right: 10px solid #f5f3e5;
	border-left: 10px solid #f5f3e5;
	background-image: url(imagenes/fondo_h1b.jpg);
	width:705px;
	}
h2 {
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #A6866D;
	margin:0px 10px 10px 30px;
	padding-top: 10px;
}
h3{
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 0.9em;
	color: #38302b;
	margin:10px 10px 10px 30px;
	
}
#contenido {
	background-color:#fff;
	border-right: 10px solid #f5f3e5;
	border-left: 10px solid #f5f3e5;
	padding-bottom: 5%;
	width:750px;
	}
#menu {
	float:right;
	width: 200px;
	margin: 10px 5px 10px 20px;
	background-image: url(imagenes/fondo_menu_hoja0.jpg);
	background-repeat: no-repeat;
	height:440px;
	}
	#menu ul {
	margin: 0;
	margin-top:10px;
	padding: 0;
	list-style-type: none;
	color: #ECE9D8;
	}
	#menu li a {
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	text-decoration: none;
	margin-left:15px;
	margin-right:15px;
	padding:1px 5px;
	}
	#menu li a:link, #menu li a:visited {
	color: #524233;
	display: block;
	padding:1px 5px;
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:0.9em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #524233;
	height:23px;
	}
	#menu li a:hover {
	color: #937359;
	padding:1px 5px;
	}
	#menu li a:active {
	color: #937359;
	padding:1px 5px;
	}
	.menu2 {color:#fff;
	padding:1px 5px;
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:0.9em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #524233;
	height:23px;
	display:block;
	margin-left:15px;
	margin-right:15px;
	padding:1px 5px;}
	p {
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	color: #2D241D;
	margin:10px 30px;
	text-align: justify;
	}
	.texto{
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	color: #38302b;
	margin:10px 10px 10px 30px;
	text-align: justify;}
	.pie{
	border-left: 10px solid #f5f3e5;
	border-bottom:10px solid #f5f3e5;
	border-right: 10px solid #f5f3e5;
	width: 730px;
	height: 5%;
	margin: 0 auto;
	text-align:center;
	padding:10px;
	background-image: url(imagenes/fondo_pie.jpg);
	background-repeat: repeat-x;
	}
	.pie ul{margin:0;}
	.pie li{display:inline;}
    .pie li a {
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #a08461;
	text-decoration:none;}
	.pie li a:hover{text-decoration:underline;}
    .linea{font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #a08461;
	margin:3px;}
	.imagen{margin:10px;
	float:right;
	padding:10px;
	border: 1px solid #ece9d8;
	}
	.imagen2{margin:10px;
	float:left;
	padding:10px;
	border: 1px solid #ece9d8;
	}
	.imagen3{
	margin:10px;
	clear:both;
	padding:10px;
	border: 1px solid #ece9d8;
	}
	.imagen_solo{margin:10px;
	padding:10px;
	border: 1px solid #ece9d8;}
	.enlace_imagen {border: 0;
	margin:0;
	padding:0;}
	a.enlace_imagen {border: 0;
	margin:0;
	}
	a.enlace_imagen:hover {border: 0;
	margin:0;
	}
¿Alguna solución? Gracias
  #2 (permalink)  
Antiguo 26/04/2006, 11:30
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
overflow: hidden???

hay un 'bug' en internet explorer que te muestra algunos pixeles de más en elementos que tienen imagen de fondo... agrégale al h1 la propiedad overflow: hidden y nos cuentas

Saludos
  #3 (permalink)  
Antiguo 26/04/2006, 12:11
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Pues sí era eso , solo que en vez de h1 he tenido que agregarla en el encabezado para que no se desborde y luego en el contenido para que tampoco se desborde a la derecha y así mato dos pajaros de un tiro

Código HTML:
<style type="text/css">
#encabezado{
	background-color:inherit;
	height:166px;
	border-top: 10px solid #f5f3e5;
	border-right: 10px solid #f5f3e5;
	border-left: 10px solid #f5f3e5;
	width:750px;
	overflow:hidden;
#contenido {
	background-color:#fff;
	border-right: 10px solid #f5f3e5;
	border-left: 10px solid #f5f3e5;
	padding-bottom: 5%;
	width:750px;
	overflow:hidden;
</style> 
Gracias jesusbet, problema resuelto , saludosss
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 01:20.