Foros del Web » Creando para Internet » CSS »

Linea fantasma en CSS

Estas en el tema de Linea fantasma en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/11/2011, 10:21
 
Fecha de Ingreso: septiembre-2010
Mensajes: 33
Antigüedad: 9 años, 4 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?
  #2 (permalink)  
Antiguo 15/11/2011, 11:08
Avatar de MarioMX  
Fecha de Ingreso: agosto-2011
Ubicación: Distrito Federal
Mensajes: 7
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Linea fantasma en CSS

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.
  #3 (permalink)  
Antiguo 15/11/2011, 12:11
 
Fecha de Ingreso: septiembre-2010
Mensajes: 33
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Linea fantasma en CSS

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.
  #4 (permalink)  
Antiguo 15/11/2011, 12:49
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 12 años
Puntos: 181
Respuesta: Linea fantasma en CSS

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
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #5 (permalink)  
Antiguo 15/11/2011, 13:36
 
Fecha de Ingreso: septiembre-2010
Mensajes: 33
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Linea fantasma en CSS

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

Última edición por EduardoP737; 15/11/2011 a las 14:08 Razón: Solucion

Etiquetas: fantasma, firefox, hover, fondo, capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:54.