Problema con lista: no encajan bien en Firefox

PSPforever · #1 (**permalink**) 03/06/2009, 10:05

Hola

Tengo el siguiente problema. Estoy realizando una pagina web que contiene un menu en disposicion horizontal con 8 items o enlaces.

El problema esta en que en IE se ven perfectamente, en el lugar que lo he situado en dreamweaver para que aparezca mientras que en Firefox se ve un poco mas arriba, al borde del DIV que contiene dicho menu.

He probado cambiando medidas y poniendo el valor "0" a todos los margenes

Aqui os dejo el codigo html::

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inicio</title>
<link href="estilo1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="general">
<div id="cabecera"><img src="img/cabecera" alt="cabecera" width="650" height="89" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="574,9,618,21" href="#" target="_top" />
<area shape="rect" coords="626,10,641,25" href="#" target="_top" />
</map></div>
<div id="menu">
//La lista que no me encaja correctamente en firefox
<ul class="menu">
<li class="menu"><a href="#" target="_top" class="menu">Opcion1</a></li>
<li class="menu"><a href="#" target="_top" class="menu">Opcion2</a></li>
<li class="menu"><a href="#" target="_top" class="menu">Opcion3</a></li>
<li class="menu"><a href="#" target="_top" class="menu">Opcion4</a></li>
<li class="menu"><a href="#" target="_top" class="menu">Opcion5</a></li>
<li class="menu"><a href="#" target="_top" class="menu">Opcion6</a></li>
<li class="menu"><a href="#" target="_top" class="menu">Opcion7</a> </li>
<li class="menu"><a href="#" target="_top" class="menu">Opcion8</a></li>
</ul>
</div>

Y aqui el CSS:

Cita:

#general {
background-color: #000000;
margin: auto;
height: 950px;
width: 650px;
}
#cabecera {
width: 650px;
height: 89px;
background-image:url(img/cabecera);
background-repeat:no-repeat;
}
#menu{
width:650px;
height:28px;
background-image:url(img/barra);
background-repeat:no-repeat;
}
ul.menu{
list-style:none;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
}
li.menu{
float:right;
margin: 0px;
}
a.menu{
display:block;
color:#FFFFFF;
font-size:11px;
font-family:"Arial";
text-decoration:none;
margin-right:20px;
font-weight:bold;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
a:hover.menu{
display:block;
color:#FFFFFF;
font-size:11px;
font-family:"Arial";
text-decoration:underline;
margin-right:20px;
font-weight:bold;
}

Gracias por anticipado,espero vuestras respuestas

sattua · #2 (**permalink**) 03/06/2009, 18:59

Hola...no estoy seguro

pero me suena a estandares....pero talves eso ya lo sabias, entonces creo que es eso.

Asegurece q el nivel del CSS sea compatible con Firefox por q IE es medio diferentes a Firefox, opera , safari y chrome de google....

osea la solucion seria cerciorarse que el css que usas sirve bien en firefox y los otros

no se si te ayude en algo pero bueno, mucha suerte.

chao.....

PSPforever · #3 (**permalink**) 05/06/2009, 13:26

hola

antes que nada gracias por responder.

Pues te aclaro que desconozco las razones de que me suceda esto, asi que me gustaria que me dijeras como puedo averiguar si mi css es compatible con firefox y de estandares no tengo ni idea, sinceramente.

espero tu respuesta,gracias por anticipado

kseso? · #4 (**permalink**) 05/06/2009, 14:22

Pasa por las faq´s de css. Ahí encontrarás unos cuantos menús publicados por Mikmoro compatibles con muuuuuuchos navegadores.

Mira su código y compara con el tuyo. Comenzando por cómo nombras en tu css los estilos:

Cita:

a.menu{...}
a:hover.menu {...}

frente a lo que debería ser:

Cita:

.menu a {...}
.menu a:hover {...}

Un saludo

Corneja · #5 (**permalink**) 06/06/2009, 02:59

Yo lo he probado y me lo dibuja perfectamente igual. Lo único que he tenido que cambiar es

Código:

//La lista que no me encaja correctamente en firefox

por

Código:

<!--La lista que no me encaja correctamente en firefox-->

pero ha funcionado perfecto ya que al tener esa línea de texto y debajo el código del menú te desplazaba el menú hacia abajo y como FireFox (al contrario que IE) por defecto no redimensiona el DIV por eso te salia al borde