Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/11/2011, 10:21
EduardoP737
 
Fecha de Ingreso: septiembre-2010
Mensajes: 33
Antigüedad: 14 años, 3 meses
Puntos: 0
Linea fantasma en CSS

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?