Problema con menu en firefox

adexedl · #1 (**permalink**) 24/01/2008, 14:40

Hola amigos,

Tengo un problema con el este menú que esta en esta url http://www.taxigrancanaria.com/index1.php en firefox. En explorer se ve perfecto, pero en firefox no hace bien el hover.

Saludos y gracias de antemano

hades87 · #2 (**permalink**) 24/01/2008, 18:14

te refieres a que el hover quieres que fuese de toda la linea? pondrias el css y el html?

adexedl · #3 (**permalink**) 25/01/2008, 03:12

Hola hades87,

exactamente me refiero a que la linea ocupe lo mismo que la primera. Pongo los códigos

el html

Código PHP:

 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> 
<body> 
<p> 
  <?php 
$menu=array('pagina1.php'=>'Home', 'servicios.php'=>'Servicios', 
'reservas.php'=>'Reservas', 'hoteles.php'=>'Hoteles', 'vuelos.php'=>'Vuelos', 
'meteorologia.php'=>'Meteorología', 'contactar.php'=>'Contactar'); 
 
 
foreach($menu as $pagina => $nombre) 
{ 
    if(ereg($pagina, $_SERVER['SCRIPT_NAME'])) 
        $clase='clase1'; 
    else 
        $clase='clase2'; 
                 
    echo '<div id="content" class="'.$clase.'" ><a 
href="'.$pagina.'">'.$nombre.'</a></div>';         
} 
?> 
</body> 
</html>

El css

Código HTML:

.clase1 {
background-color: #79C93C;
height: 18px;
width: 234px;
} 
#content a{
text-decoration: none;
padding-left: 30pt;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
line-height: 25px;
}
#content a:link{
text-decoration: none;
padding-left: 30pt;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
line-height: 25px;
}
#content a:visited{
text-decoration: none;
padding-left: 30pt;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
line-height: 25px;
}
#content a:hover{
text-decoration: none;
padding-left: 30pt;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
line-height: 25px;
background-color: #79C93C;
height: 18px;
width: 234px;
}

Saludos y gracias de antemano

hades87 · #4 (**permalink**) 25/01/2008, 03:31

el a:hover es tan ancho como quieres que sea?

adexedl · #5 (**permalink**) 25/01/2008, 04:33

Hola Hades,

este es el ancho y alto que le tengo al hover y es el que tiene
height: 18px;
width: 234px;

Saludos y gracias nuevamente

hades87 · #6 (**permalink**) 25/01/2008, 04:45

y si el menú lo sacas fuera del php?

adexedl · #7 (**permalink**) 25/01/2008, 04:55

El motivo de poner el menú en php, es si vas a servicios lo podrás ver, te marca la url donde está en ese momento, con el mismo estado del hover.

No se si me entiendes lo que te quiero decir.

Saludos

hades87 · #8 (**permalink**) 25/01/2008, 05:21

no te acabo de entender :S

elbecerro · #9 (**permalink**) 25/01/2008, 07:59

Hola, te recomiendo que instales la extensión web developer para firefox si es que no la tienes intalada ya.

Usándola puedes editar tu css y ver el resultado en tiempo real. Yo conseguí (creo) lo que pretendes con este código:

#content{
line-height:25px;
}
.clase1 a {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-decoration: none;
padding-left: 30pt;
color:#fff;
background-color: #79C93C;
display:block;
height: 18px;
width: 234px;
}
.clase2 a, .clase2 a:visited{
text-decoration: none;
padding-left: 30pt;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
width: 234px;
}

.clase2 a:hover{
background-color: #79C93C;
display:block;
}

Eso sí, tendrás que darle altura a ese td... y deberías considerar abandonar las tablas y diseñar con estándares.

Un saludo.

adexedl · #10 (**permalink**) 26/01/2008, 07:28

Hola El becerro,

justo lo que necesitaba, funciona bien. Ahí estoy empezando con los estándares, poco a poco.

Saludos y gracias