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:
¿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? /*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%); } /*
Muchas gracias y un saludo!