Linea fantasma en CSS

[EduardoP737]

Buenas,

estoy haciedo una web y tengo un problema, de repente de apareció una linea como en color CYAN, como la image Anexa. (vale resaltar que esto solo pasa en Firefox y no en Internet Explorer.



Cuando quíto la capa "encabezadomenu" la linea desaparece

Código PHP:

 <div id="encabezadomenu">
<!--Inicio Capa Menu Listas desplegables-->
<ul class="menu">
<li class="drop">
<a href="#">Elige tu ciudad...</a>
<span class="toggle"> </span>
<ul>
        <?php do { ?>
          <li><a href="index.php?ciudad=<?php echo $row_CiudadIndex['id']; ?>"><?php echo $row_CiudadIndex['nombre']; ?></a></li>
          <?php } while ($row_CiudadIndex = mysql_fetch_assoc($CiudadIndex)); ?></ul></li>
</ul>
<ul class="menu">
<li class="drop">
<a href="#">Elige una categor&iacute;a...</a>
<span class="toggle"> </span>
<ul>
        <?php do { ?>
          <li><a href="index.php?ciudad=<?php echo $ciudad ?>&amp;categoria=<?php echo $row_CategoriaIndex['id'] ?>"><?php echo $row_CategoriaIndex['nombre']; ?></a></li>
          <?php } while ($row_CategoriaIndex = mysql_fetch_assoc($CategoriaIndex)); ?></ul>
</li>
</ul>
<!--FIN Capa Menu Listas desplegables-->
<!--Inicio Capa Buscador-->
<div id="buscador">
   <form id="form1" name="form1" method="post" action="">
     <label>
       <font color="#FFFFFF"><strong>Buscador:</strong></font> 
       <input name="textfield" type="text" size="18" />
       </label>
     <label>
     <input name="Submit" type="image" value="Enviar" src="img/buscar.png" align="top" />
     </label>
   </form>
</div>
<!--Fin Capa Buscador-->
<div id="menu2">
<ul class="menu">
<li><a href="#">Club Insittu</a></li>
</ul>
<ul class="menu">
<li><a href="#">Juegos</a></li>
</ul>
<ul class="menu">
<li><a href="#" title="Información de interes sobre tu ciudad">Info de Inter&eacute;s</a></li>
</ul>
</div>
</div>  

el CSS es:

Código HTML:

#encabezadomenu {
	float:left;
	height: 50px;
	position: relative;
	width:845px;
	top: 20px;
	z-index: auto;
}
#menu2 {
	float:left;
	height: 50px;
	position: relative;
	width:270px;
}

/* menu desplegable*/

ul.menu {
	float: left;
	list-style-type: none;
	margin: 0;
	padding-top: 0;
	padding-right: 3px;
	padding-bottom: 0;
	padding-left: 3px;
}

ul.menu li {
	display: block;
	float: left;
	height: 30px;
	margin: 0;
	padding: 0;
	position: relative;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	z-index: 1;
}

ul.menu li:hover {
-moz-border-radius: 4px;
	background-color: #264E75;
}

ul.menu li a {
	color: #FFF;
	display: block;
	float: left;
	font-weight: bold;
	text-decoration: none;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	line-height: 18px;
}

ul.menu li a span {
	font-weight: normal;
	padding-left: 2px;
}

ul.menu li.drop a {
	padding-right: 1px;
	font-size: 11px;
}

ul.menu li.drop:hover li {
border: none;
}

ul.menu li.drop span.toggle {
	display: block;
	float: left;
	height: 26px;
	padding: 0;
	width: 20px;
	left: 1px;
	right: 1px;
	background-attachment: scroll;
	background-color: transparent;
	background-image: url(img/URL_toggle.png);
	background-repeat: no-repeat;
	background-position: 0 5px;
	margin-right: 1px;
	margin-bottom: 0;
	margin-left: 1px;
	top: 50%;
}

ul.menu li.drop:hover {
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}

ul.menu li.drop:hover ul {
display: block;
padding: 0 0 10px 0;
z-index: 1;
}

ul.menu li ul {
	background-color: #555;
	display: none;
	left: 0;
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 30px;
	width: 100%;
	font-size: 11px;
}

ul.menu li ul li {
border: none;
float: none;
height: auto;
margin: 0;
padding: 0;
}

ul.menu li ul li a {
background-color: transparent;
color: #DDD !important;
display: block;
float: none;
font-size: 13px;
font-weight: normal;
height: auto;
margin: 0;
padding: 5px 15px;
}

.ciudadcategoria {
	font-size: 14px;
	color: #003399;
	text-shadow: #999999 0.05em 0.05em 0.05em;
	font-family: Georgia, "Times New Roman", Times, serif;
}

ul.menu li:hover ul {
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border: none;
background-color: #555;
}

ul.menu li:hover ul * {
-moz-border-radius: 0;
background-color: transparent;
}

ul.menu li ul li:hover {
background-color: #000;
}

Como puedo solucionar esto?

[MarioMX]

Algo parecido me pasó recientemente con una web, lo que apliqué fue una condicional para aplicar un "crack" para FF solo para aplicar un margen negativo en el body.

Código:

<!--[if FF]>
<link rel="stylesheet" href="ff.css" type="text/css" />
<[end if]-->

<!-- o también -->

<!--[if FF]>
<style>
body {margin:-5px 0 0 0;}
</style>
<[end if]-->

espero sea de utilidad.

[EduardoP737]

No sirvió, el margin me lo alplica a otra capa mas abajo.

Es curioso, pero cuando paso el puntero sobre el menú "Elige tu ciudad" y luego lo paso sobre "Elige una categoria" se desaparece la linea, y cuando lo quito, vuelve a aparecer.

[pitufoweb]

Es un poco complicado saber cual es el problema sin ver todo el código de la web...Sube la web a un servidor, muéstranos la URL y en un minuto sabremos cual es problema.



Saludos

[EduardoP737]

Hola muchas graciaspor el interés.

Ya encontré el problema, la cuestion era de la imagen de fondo de la capa "encabezado" estaba en formato PNG, la pasé a JPG y solucionado, aunque tambien hice la prueba poniendole una franja de color un poco mas gruesa en la parte superior.

gracias