Problema CSS y Chrome

allvipdomains · #1 (**permalink**) 19/03/2010, 21:47

Estoy montando un site y tengo unos enlaces de menú con una imagen de fondo al hacer hover. Con Firefox me lo muestra de forma correcta, pero con el Chrome no acepta el CSS de los enlaces... no lo entiendo.

Mi CSS de los enlaces:

Código:

a.menu:link {
	color: #f3f3f3;
	text-decoration:none;
	padding-top:17px;
	padding-bottom:17px;
	padding-left:10px;
	padding-right:10px;
	font-size:16px;
	font-weight:bold;
	}
a.menu:hover {
	color: #EE7f00;
	background-image:url(img/bg_menu2.jpg);
	}

¿Alguna solución?... me estoy volviendo loco.

Lo he subido a mi server para que me podáis ayudar mejor... http://www.allvipdomains.com/test/

alexk · #2 (**permalink**) 20/03/2010, 08:09

yo lo veo exactamente igual :S

allvipdomains · #3 (**permalink**) 20/03/2010, 08:38

Pues yo no lo veo igual... :S:S:S

Adjunto una imagen con FF (izq) y Chrome (der) cuando pongo el cursor sobre el botón CONTACTAR:

Carlangueitor · #4 (**permalink**) 20/03/2010, 13:00

Prueba dejarlo así: a.menu en lugar de a.menu:link. También prueba ponerle display: block en a.menu:hover.

Saludos

allvipdomains · #5 (**permalink**) 20/03/2010, 13:26

Carlangueitor, gracias por tu ayuda... PERO

- Al cambiar esas dos cosas el Chrome me muestra los botones con el formato correcto, pero el hover no funciona.
- Al cambiar esas dos cosas el Firefox deja de mostrarme el menu de forma correcta.

No entiendo mucho, pero pensaba que lo que yo quiero hacer no era algo tan complicado... ¿o en qué me equivoco?.

Espero alguna respuesta que sea la luz al final del túnel... Gracias.

Carlangueitor · #6 (**permalink**) 20/03/2010, 14:14

A ver estuve probando y modifique también tu html (semánticamente los enlaces de un menú van en una lista desordenada y parece que ya se ve bien en los dos navegadores:

Código HTML:

Ver original<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin t&iacute;tulo</title> 
<link href="estilos.css" rel="stylesheet" type="text/css" /> 
</head> 
 
<body> 
<div id="content"> 
<div id="header"> 
 
</div> 
<ul id="menu"> 
<li><a href="#">INICIO</a></li> 
<li><a href="#">SERVICIOS</a></li> 
<li><a href="#">TIENDA</a></li> 
<li><a href="#">CONTACTAR</a></li> 
</ul> 
<div id="main"> 
<p>Texto de muesta para ver la sombra que se pone detrás cuando el fondo está claro</p> 
</div> 
<div id="footer"> 
 
</div> 
</div> 
</body> 
</html>

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
 
body {
    font-family:"Myriad Pro", Myriad, Geneva, Arial, Helvetica, sans-serif, Verdana;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image:url(img/bg.jpg);
    background-position:top;
    background-repeat:no-repeat;
    background-color:#000000;
    color:#CCCCCC;
    text-shadow: 2px 2px 2px #000;
    }
#content{
    margin:auto;
    top:0px;
    width:980px;
    }
#header{
    position:relative;
    background-image:url(img/header_bg.png);
    background-repeat:no-repeat;
    background-position:top;
    height:87px;
    text-align:center;
    opacity:.80;
    filter:alpha(opacity=80);
    filter: "alpha(opacity=80)";
    }
#menu{
    top:85px;
    width:100&#37;;
    height:33px;
    background-image:url(img/bg_menu.jpg);
    color:#999999;
    text-align: center;
    opacity:.80;
    filter:alpha(opacity=80);
    filter: "alpha(opacity=80)";
    padding:3px 0px 20px 320px;
    -moz-border-radius: 4em 2em; 
    -webkit-border-radius: 15px;
    list-style: none;
    }
#menu li {
    margin: auto;
    float: left;
    }
#menu li a{
    text-decoration: none;
    color: #F3F3F3;
    display: block;
    padding: 17px 10px;
    font-size: 14px;
    font-weight: Bold;
    }
#menu li a:hover {
    color: #EE7F00;
    background: url(img/bg_menu2.jpg);
    }
#main {
    float: none;
    clear: both;
    }

Saludos

allvipdomains · #7 (**permalink**) 20/03/2010, 14:30

Pues entonces... algo les pasa a mis dos ordenadores...

Yo veo esto:

No lo entiendo. :(

Carlangueitor · #8 (**permalink**) 20/03/2010, 14:33

Eso es solo el HTML algo hiciste mal y no esta agarrando el CSS, verifica eso.

Saludos

allvipdomains · #9 (**permalink**) 20/03/2010, 14:40

Me voy a volver loco... con el netbook de mier** y no me aclaro.

El html llama al estilos css, pero no lo abre... en ningun navegador.

Perdona que te moleste tanto, pero no me aclaro. :(

Carlangueitor · #10 (**permalink**) 20/03/2010, 14:44

Está en la misma carpeta y con el nombre correcto (estilos.css)??

Saludos

allvipdomains · #11 (**permalink**) 20/03/2010, 14:51

Sí, si... y las imagenes en su sitio y todo correcto... por eso digo que no lo entiendo. He vuelto a crear el documento pero nada, que no quiere leer el css.

Increíble pero cierto.

Carlangueitor · #12 (**permalink**) 20/03/2010, 15:03

Borra la cache, aunque se me hace raro, si tienes firebug en firefox trata de ver si esta mostrando los estilos o dale ver código y has click a la hoja de estilos.

Saludos

allvipdomains · #13 (**permalink**) 20/03/2010, 15:49

Bueno, sigue igual. En teoría (según el codigo) sí lee el CSS, pero a la práctica NO.

Tu lo ves correctamente en los diferentes navegadores??

Que problema pueden tener mis PCs??

Carlangueitor · #14 (**permalink**) 20/03/2010, 16:03

No se que problema pueda tener tu PC, yo digo que hay algo con las rutas, es la única explicación que se me ocurre.

Yo lo puedo ver correctamente, mira lo subí a mi sitio: http://www.charlyroman.com/forosdelweb/menucss/

Saludos

allvipdomains · #15 (**permalink**) 20/03/2010, 16:14

Alucino... ahi lo veo en los dos navegadores... aunque con algun error en FF con el background del div menu, pero bueno, almenos los botones se ven como deben.

Voy a dejarlo y cuando vuelva a casa el lunes lo volveré a intentar... ya te contaré qué pasa con eso.

Agradezco muchisimo tu tiempo, pero no lo entiendo. Ahora me veo colapsado con esto. Y lo mas gracioso es que las rutas son correctas.

Ya saldrá el problema y espero que pueda ayudar a alguien más después con un tema tan sencillo pero que se está alargando tanto.

Saludos y el lunes te digo. Gracias.