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
