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