Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/04/2009, 09:50
Avatar de gorkreg
gorkreg
 
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 15 años, 8 meses
Puntos: 8
Problema con CSS y Safari

Pues eso, Safari. No logro encontrar solución a este problema.

Tengo un menú horizontal al que no le puedo dar un ancho pues no todas las cajas tienen la misma anchura. He optado por convertir a las anclas en elemntos de bloque y dar un relleno por todos los lados. Funciona perfectamente en todos los navegadores, incluído IE6, pero no en Safari, donde, tras aplicarle el relleno superior e inferior, tiene una altura de 28px en vez de 29px y queda un espacio inferior de 1 píxel..

He probado a darle a las anclas la altura de la caja pero, para que entonces funcione en IE6, tengo que darle también un ancho, algo que no puedo.

He conseguido aplicar esta regla con la que se vería bien en IE6 también pero que no me validaría el código (_width: 1px;). Que valide es importante.

Os incluyo la parte del código CSS que afecta a ese menú. Este es el código que funciona bien en todos los navegadores menos en Safari:

#main_nav ul {
float: right;
margin-top: 41px;
font-size: 15px;
font-weight: bold;
}
#main_nav li {
list-style-type: none;
float: left;
margin-left: 1px;
}
#main_nav a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding-right: 20px;
padding-left: 20px;
background-image: url(../img/backgrounds/b_tabs.jpg);
background-repeat: repeat-x;
background-position: left top;
padding-top: 6px;
padding-bottom: 5px;
}
#main_nav a:hover {
background-image: url(../img/backgrounds/b_tabs.jpg);
background-position: right bottom;
background-repeat: repeat-x;
}

Gracias
__________________
}8[/