Foros del Web » Creando para Internet » CSS »

color en firefox

 Estas en el tema de color en firefox en el foro de CSS en Foros del Web. Hola, tengo un problema curioso, he hecho una barra de navegación con listas. El código es simple: Código: #menu{ list-style:none; margin:0 0 0 10; padding:0px; ...
  #1 (permalink)  
Antiguo 14/04/2011, 14:11
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 17 años, 9 meses
Puntos: 1
color en firefox
Hola, tengo un problema curioso, he hecho una barra de navegación con listas. El código es simple:

Código: 
#menu{
	list-style:none;
	margin:0 0 0 10;
	padding:0px;	
}
#menu li{
	margin:-2 7 0 0;
	padding:0px;
	float:left;
}
#menu li a.enlace{ 
	height:21px;
	font-family: arial, helvetica;
	font-size:8pt;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	vertical-align: middle; 
	display: table-cell;
}
#menu li a.enlace:hover{ 
	color:#FF0000;
	text-decoration:none;	
}
#menu li.rojo{
	height:21px;
	font-family: arial, helvetica;
	font-size:8pt;
	color:#FF0000;
	font-weight:bold;
	padding-top:3px;
}

y la barra sería algo sencillo como: INICIO * GALERÍA * ENLACES
Entonces cuando se está, por ejemplo, en INICIO, éste tiene clase rojo y no es pinchable.

El caso es que se ve así en Explorer y Chrome, pero no en Firefox, donde en lugar de rojo, el #FF0000 se ve de color azul. Alguien sabe el motivo?

Gracias por adelantado.
  #2 (permalink)  
Antiguo 14/04/2011, 15:42
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: color en firefox
por las pruebas que he hecho, es normal lo que ocurre. lo extraño es que solo ocurra en ff. inténtalo con este código. fíjate en el html
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#menu{

margin:0 0 0 10px;
padding:0px;
}


#menu ul{
font: bold 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 0;
padding: 0;
padding-left: 0px;
list-style-type: none;
}


#menu li{
margin:-2px 7px 0 0;
padding:0;
display: inline;
}



#menu li a{
height:21px;
font-family: arial, helvetica;
font-size:8pt;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
vertical-align: middle;
}
#menu li a:hover{
color:#FF0000;
text-decoration:none;
}
#menu li.rojo{
height:21px;
font-family: arial, helvetica;
font-size:8pt;
color:#FF0000;
font-weight:bold;
padding-top:3px;
}
</style>
</head>

<body>
<div id="menu">
<ul>
<li class="rojo">link</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>

</ul>
</div>
</body>
</html>
  #3 (permalink)  
Antiguo 14/04/2011, 21:12
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 17 años, 9 meses
Puntos: 1
Respuesta: color en firefox
Gracias por la respuesta.
He copiado tu código y... el rojo en ff se ve azul. Me estaré volviendo daltónico?

Lo más curioso no es eso. Lo mejor es que ese mismo color en .hover ff lo ve correctamente.
Última edición por cuideru; 15/04/2011 a las 02:23
  #4 (permalink)  
Antiguo 15/04/2011, 03:54
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 13 años, 8 meses
Puntos: 9
Respuesta: color en firefox
Hola

te dejo un ejemplo de un menu espero que te sirva,
Código HTML: 
Ver original
  1. <ul id="navbar">
  2.             <li id="nhome">
  3.                 <a href="/index.php" title="home">HOME</a>            
  4.             </li> 
  5.             <li id="naboutus">
  6.                 <a href="/index.php" title="aboutus">ABOUT US</a>            
  7.             </li> 
  8.             <li id="nmygolf">
  9.                 <a href="/index.php" title="mygolf">MYGOLF</a>            
  10.             </li> 
  11.             <li id="nhotels">
  12.                  <a href="/index.php" title="hotels">HOTELS</a>         
  13.             </li> 
  14.             <li id="nclub">
  15.                  <a href="/index.php" title="club">CLUB</a>          
  16.             </li> 
  17.             <li id="npackages">
  18.                  <a href="/navbar.png" title="packages">PACKAGES</a>
  19.             </li> 
  20.             <li id="nservice">
  21.                  <a href="/index.php" title="service">SERVICE</a>          
  22.             </li> 
  23.             <li id="nshop">
  24.                  <a href="/index.php" title="shop">SHOP</a>          
  25.             </li> 
  26.             <li id="ncontact">
  27.                  <a href="/index.php" title="contact">CONTACT</a>          
  28.             </li> 
  29.         </ul>
Código CSS: 
Ver original
  1. #navbar {
  2.     width:782px;
  3.     height:29px;
  4.     padding:0;
  5.     margin: 0;
  6.     background:url(../imagenes/fondobar.gif)
  7.     }
  8. #navbar li {
  9.     padding:0;
  10.     list-style:none;
  11.     display: block;
  12.     
  13. }
  14. #navbar li a {
  15.     text-decoration:none;
  16.     float:left;
  17.     display:block;
  18.     font-family:"myriad pro";
  19.     font-weight:bold;
  20.     font-size:13px;
  21.     
  22.     text-align:center;
  23.     border-left:1px solid #cbcbcb;
  24.     border-right:1px solid #ffffff;
  25.     border-top:1px solid #cbcbcb;
  26.     border-bottom:1px solid #cbcbcb;
  27.     line-height:25px;
  28.     }
  29. li#nhome a {
  30.     width:96px;
  31.     height:28px;
  32.     color: #C66;
  33.     }
  34. li#naboutus a {
  35.     width:99px;
  36.     height:28px;
  37.     }               
  38. li#nmygolf a {
  39.     width:86px;
  40.     height:28px;
  41.     }
  42. li#nhotels a {
  43.     width:75px;
  44.     height:28px;
  45.     }
  46. li#nclub a {
  47.     width:69px;
  48.     height:28px;
  49.     }
  50. li#npackages a {
  51.     width:94px;
  52.     height:28px;
  53.     }
  54. li#nservice a {
  55.     width:82px;
  56.     height:28px;
  57.     }
  58. li#nshop a {
  59.     width:66px;
  60.     height:28px;
  61.     }
  62. li#ncontact a{
  63.     width:96px;
  64.     
  65.     height:28px;
  66.     }
  67. #navbar li a:hover {
  68. color: #F00;
  69.     }

No olvides de poner tu hoja de reset
  #5 (permalink)  
Antiguo 15/04/2011, 06:31
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 17 años, 9 meses
Puntos: 1
Respuesta: color en firefox
Mi código no tiene ninguna ciencia, creo:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<HTML>
<HEAD>
<STYLE type="text/css">

BODY{
	background:white;
}
.contenedor{
	width:932px;
	height:1024px;
	margin-left:-466px;
	position:absolute; 
	top: 0px;
	left:50%;	
}
.cajabarra{
	width:300px;
	height:30px;
	margin:305px 0px 0px 54px;
	padding-top:10px;
	position:absolute;
}
#menu{
	list-style:none;
	margin:0px 0px 0px 10px;
	padding:0px;	
}
#menu li{
	margin:-2px 4px 0px 0px;
	padding:0px;
	float:left;
}
#menu li a.enlace{ 
	height:21px;
	font-family: arial, helvetica, san serif;
	font-size:8pt;
	color:#CCCCCC;
	font-weight:bold;
	text-decoration:none;
	vertical-align: middle; 
	display: table-cell;
}
#menu li a.enlace:hover{ 
	background-color: transparent;
	font-weight:bold;
	color:#FF0000;
	text-decoration:none;
	vertical-align : middle; 
	display: table-cell;
}
#menu li.rojo{ 
	height:21px;
	font-family: arial, helvetica, san serif;
	font-size:8pt;
	color:#FF0000;
	font-weight:bold;
	vertical-align: middle; 
	display: table-cell;
	padding-top:3px;
}
</style>

</HEAD>

<body>
	<div class="contenedor">
			<div class="cajabarra">
				<ul id="menu">
					<li class="rojo">PROFILE</li>
					<li><a href="#" class="enlace">GALLERY</a></li>
					<li><a href="#" class="enlace">LINKS</a></li>
				</ul>
			</div>
	</div>

</body>
</HTML>
Si lo copias y lo pegas verás que la clase "rojo" aunque tiene el mismo color que el .hover, en FireFox se ve azul (¿?)
Pero lo mejor de todo es que ésto sólo sucede con el color rojo -como decía la colega IsabelM, es decir, si le pongo a la clase "rojo" un color verde, FF no lo cambia. A que es curioso?

Voy a probar tu código.
Última edición por cuideru; 15/04/2011 a las 06:42
  #6 (permalink)  
Antiguo 15/04/2011, 07:07
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: color en firefox
en la versión 4 se visualiza correctamente
  #7 (permalink)  
Antiguo 15/04/2011, 07:08
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 17 años, 9 meses
Puntos: 1
Respuesta: color en firefox
Cita:
Iniciado por IsaBelM Ver Mensaje
en la versión 4 se visualiza correctamente
Gracias IsabelM. Era de lo más curioso.

Etiquetas: color, firefox
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:07.