Problemas de compatiblidad IE/Firefox: botonera rebelde

Capitanspam · #1 (**permalink**) 01/09/2011, 13:34

Hola foreros, traigo una duda sobre compatiblidades con navegadores, a ver si alguien me pudiera ayudar. De momento no es algo muy critico.

El caso es que estoy haciendo una web, pero lo he probado en otro ordenador y no aparece de la misma manera (es un mac y el fallo aparece en todos los navegadores, firefox, internet explorer...)

Ahora mismo a mi se me ve asi

y en el otro ordenador se ve asi

Como podeis observar, la botonera no llega hasta el final de donde derberia llegar. Estaba pensando cual seria la manera de concebirla como un bloque ella entera y aplicar un valor de porcentaje de largada (así, se ajustaria sola si tuviera la necesidad).

El código CSS que he usado para la botonera es el siguiente

Código:

<style type="text/css">

* {padding: 0; margin: 0;}

p {color:#7D7E7C;}
body {font:11px Verdana,Arial; background:#FFFFFF;}
ul.menu {list-style:none; margin: 0 auto; padding:0px; width: 782px; }
ul.menu * {margin:0; padding:0; font:11px Verdana,Arial; background:#FFFFFF;}
ul.menu a {display:block; color:#FFFFFF; text-decoration:none;}
ul.menu li {position:relative; float:left; margin-right:0px;  border-left:1px solid #005622;}
ul.menu ul {position:absolute; top:26px; left:0; background:#008A00; display:none; opacity:0; list-style:none;}
ul.menu ul li {position:relative; border:1px solid #005622; border-top:0px; width:160px; margin:0;}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#008A00;}
ul.menu ul li a:hover {background:url(images/header_over.gif);}
ul.menu ul ul {left:148px; top:-1px;}
ul.menu .menulink { border:0px solid #aaa; padding:5px 22px 7px 22px; font-weight:bold; background:url(images/header.gif)}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
ul.menu .sub {}
ul.menu .topline {border-top:1px solid #aaa}


</style>

Si alguien me pudiera ayudar estaria muy agradecido, las compatiblidades entre navegadores son una verdadera pesadilla!

Un saludo, y gracias de antemano. Adiós!

emprear · #2 (**permalink**) 01/09/2011, 18:30

Como no veo tu html, tengo algunas dudas

ul.menu ul ul {left:148px; top:-1px;}
Tenés 3 listas anidadas?

En principio tenes un problema porque tu lista tiene un ancho específico, por lo cual, siendo el contenido de tus menues tan dispar, ya no podés usar porcentajes
como sea este ejemplo e solo para que te orientes

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
ul#menu {
margin: 0px;
padding: 0px;
height: auto;
background-color: cyan;
width: 782px;
}
 
ul#menu li {
float: left;
list-style-type: none;
background-color: #413A25;
margin: 0px;
padding: 0px;
}
 
ul#menu li a{
display :block;
text-decoration: none;
background-color: #958657;
padding: 2px;
height: 26px;
width:122px;
font-family: arial; 
font-size: 12px;
text-align: center;
line-height: 30px;
vertical-align: middle;
}
ul#menu li a:hover{
background-color: #64BD2F;  
}
 
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">inicio</a></li>
<li><a href="#">información corporativa</a></li>
<li><a href="#">serveis</a></li>
<li><a href="#">presupuesto</a></li>
<li><a href="#">treballa amb nosatres</a></li>
<li><a href="#">contacto</a></li>
</ul>
</body>
</html>

Si ejecutas este ejemplo vas a ver que en todos los navegadores se comporta igual, pero con un defecto, el texto de "información corporativa" se trunca y desplaza hacia abajo, ya que obviamente no entra en los 122px de ancho, asi que vas a tener que sacar un par de cientas para restar a tus menues inicio, serveis, presupuesto y contacto, algunos pixeles para asignarlos a "información corporativa". a la hora de calcular nunca olvides que los paddings, en este caso de los tag <a>, se deben de sumar al width para calcular sobre los 782px del total de tu ul

Saludos

Capitanspam · #3 (**permalink**) 03/09/2011, 12:19

Hola emprear, en primer lugar, gracias por tu rapida respuesta.

El tema es que no sé muy bien si solucionas el problema. Lo que haces es designar un valor fijo para cada casilla, pero eso ya está hecho en mi version, es decir:

Tus casillas ocupan cada una 122px, y si no cabe el texto lo sigue abajo (como es el caso de informacion corporativa). En el mio lo que ocurre es que cada casilla ocupa lo que ocupe el texto + padding:5px 22px 7px 22px; así que también se trata de un valor fijo, a su manera...

Lo cierto es que no veo que eso solucione el problema. Seguiré indagando.... por mi parte he hecho un cambio que no sé si resultará aún, y es cambiar

Código:

ul.menu {list-style:none; margin: 0 auto; padding:0px; width: 782px; }

por

Código:

ul.menu {list-style:none; margin: 0 auto; padding:0px; width: 100%; }

Quizás es un poco patillero, pero a ver si resulta... Mientrastanto, a alguien se le ocurre alguna otra solución al problema?

P/D: sí, tengo 3 listas anidadas. Es que el menu era un menu por defecto de una web y preferi no tocarlo demasiado.

Capitanspam · #4 (**permalink**) 04/09/2011, 13:55

Nada, sigue igual... Alguien puede echarme un cable?

Gracias de antemano, un saludo.

Edit: Estoy indagando un poco más en el tema. Por lo visto, en mi navegador, la cabecera mide 797px de ancho, lo cual es correcto. Pero para sorpresa mia, cuando la llevo a otros navegadores, éstos la redimensionan haciendo que ocupe 822px. Entonces normal que la botonera se desajuste, claro...

A alguien se le ocurre que puede estar pasando? me estoy volviendo loco!