Buenas noches,
he heredado una pagina web en la que estoy empezando a trabajar y a ponerme al dia (no esta subida, la tengo en local). La idea principal es seguir con el diseño antiguo de la web.
El problema lo tengo a la hora de visualizar el contenizo. La cabecera de la web se muestra de forma diferente en los diferentes exploradores.
Asi se muestra si la cabecera en IE y Chrome (es como se debería de ver)
Y asi se muestra en Firefox (se ve mal, la imagen esta encogida):
Este es el codigo de la parte de la cabecera del style css:
Código:
/*Estilo comunes*/
.cuerpo{ overflow:hidden; font-size:1.3em; color:#492912; }
.contenidoCapas{ max-width:1000px; margin:0 auto; overflow:hidden; } /*Capa interior a 1000*/
p, a, h1, h2, li, td, th{ color:#492912; }
p, h1, h2{ line-height:1.5em; }
a:hover{ color:#B89983; }
.negrita{ font-weight:bold; }
/*
* Cabecera de la página
*/
#cabecera{ position:relative; padding-top:40px; background:url(img/cab.jpg) bottom no-repeat; background-size:100% 100%; }
/*#cabecera #hierba{ background:url(img/hierba.png) no-repeat bottom; }*/
#cabecera #hierba header.contenidoCapas{ position:relative; overflow:visible; }
#cabecera header #tituloWeb{ display:table; color:#ffffff; }
#cabecera header #tituloWeb a{ display:table-cell; width:25%; }
#cabecera header #tituloWeb a img{ width:25%; min-width:200px; margin-right:30px; margin-top:-25px; }
#cabecera header #tituloWeb div{ font-weight:bold; display:table-cell; vertical-align:middle; }
#cabecera header #tituloWeb div h1{ font-size:2.2em; color:#ffffff; }
#cabecera header #tituloWeb div h2{ font-size:1.8em; color:#ffffff; }
#cabecera header #redesSociales{ position:absolute; right:25px; top:70px; }
#cabecera header #redesSociales a{ display:inline-block; }
#cabecera header #redesSociales a:hover{ opacity:0.5; }
#cabecera header #redesSociales a img{ margin-right:15px; }
#cabecera header #search{ position:absolute; top:25px; right:0; padding:3px 5px 3px 5px; border-radius:15px; background-color:#ffffff; border:2px solid #4296B4; }
#cabecera header #search form { width:165px; }
#cabecera header #search form input{ border:none; }
#cabecera header #search form input:first-child{ width:130px; height:20px; margin-left:3px; }
#cabecera header #search form input:last-child{ cursor:pointer; background:url(img/buscadorLupa.png) no-repeat; width:20px; height:15px; background-size:85% 100%; margin-top:2px; float:right; }
/*
* Barra de navegacion
*/
#cabecera div#menuCabecera{ background:url(img/tierra.png); overflow:hidden; border-bottom:1px solid #826550; border-top:1px solid #826550; }
#cabecera div#menuCabecera nav.contenidoCapas{ text-align:center; height:45px; }
#cabecera div#menuCabecera nav.contenidoCapas ul{ list-style:none; }
#cabecera div#menuCabecera nav.contenidoCapas > ul{ display:inline-block; height:45px; }
#cabecera div#menuCabecera nav.contenidoCapas > ul .submenu0{ width:115px; }
#cabecera div#menuCabecera nav.contenidoCapas > ul .submenu1{ width:155px; }
#cabecera div#menuCabecera nav.contenidoCapas > ul .submenu2{ width:210px; }
#cabecera div#menuCabecera nav.contenidoCapas > ul .submenu3{ width:95px; }
#cabecera div#menuCabecera nav.contenidoCapas > ul > li{ float:left; height:45px; }
#cabecera div#menuCabecera nav.contenidoCapas > ul > li a{ color:#ffffff; font-weight:bold; display:block; padding:15px 15px; }
#cabecera div#menuCabecera nav.contenidoCapas > ul > li:hover{ background:-webkit-linear-gradient(top, #826550 7%, #492912 100%); background:linear-gradient(top, #826550 7%, #492912 100%); background:-moz-linear-gradient(top, #826550 7%, #492912 100%); }
/*Submenu*/
#cabecera div#menuCabecera nav.contenidoCapas > ul li ul{ display:none; position:absolute; }
#cabecera div#menuCabecera nav.contenidoCapas > ul li:hover ul.children{ border-radius:0px 0px 5px 5px; display:block; z-index:2; background-image:url(img/tierra.png); background-size:cover; }
#cabecera div#menuCabecera nav.contenidoCapas > ul li:hover ul.children li:last-child{ border-radius:0px 0px 5px 5px; }
#cabecera div#menuCabecera nav.contenidoCapas > ul li ul.children li:hover{ background:-webkit-linear-gradient(top, #826550 7%, #492912 100%); background:linear-gradient(top, #826550 7%, #492912 100%); background:-moz-linear-gradient(top, #826550 7%, #492912 100%); }
/*
¿Que es lo que puede pasar para que Firefox lo visualice mal? ¿Tengo algo mal escrito en el codigo del css? ¿Será cosa del overflow?
Muchas gracias y un saludo!