Foros del Web » Creando para Internet » CSS »

Posible problema con overflow

Estas en el tema de Posible problema con overflow en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/04/2016, 18:07
 
Fecha de Ingreso: abril-2016
Mensajes: 1
Antigüedad: 5 años, 7 meses
Puntos: 0
Pregunta Posible problema con overflow

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!

Etiquetas: background, color, float, header, overflow, posible, width
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 15:56.