Problema con CSS y Safari

[gorkreg]

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

[gorkreg]

¿Nadie tiene alguna solución?

[baccxus]

Así como lo muestras está como díficil ver el problema. Puede haber heredado propiedades y cosas por el estilo. Porque no muestras tu página y de esa manera poder ayudarte.

Saludos

[gorkreg]

Gracias baccxus. No puedo mostrar la página pues se trata de un cliente. He copiado y pegado el código HTML y CSS que puede estar relacionado con el menú en cuestión.

Se trata de un menú horizontal con un menú desplegable vertical. Además del citado menú, en la división llmada "div_nav" hay una imágen que es el logo de la empresa. La imágen se sitúa a la izquierda y el menú en la derecha inferior (de ahí el margin-top: 41px;). La div class="container" es para centrar la página y se repite dentro de cada una de las divisiones ("content", "footer", etc).

Espero que sirva de ayuda. Ahí va el código en cuestión:

Código HTML:

<div id="main_nav">
	<div class="container">
		<img src="img/logo.gif" />
		<ul>
			<li><a class="inicio">Inicio</a></li>
			<li><a class="servicios">Servicios</a>
				<ul>
					<li><a href="servicio01.html">servicio01</a></li>
					<li><a href="servicio02.html">servicio02</a></li>
					<li><a href="servicio03.html">servicio03</a></li>

					<li><a href="servicio04.html">servicio04</a></li>
		                </ul></li>
			<li><a class="sectores">Sectores</a>
				<ul>
					<li><a href="sectores01.html">sectores01</a></li>
					<li><a href="sectores02.html">sectores02</a></li>
					<li><a href="sectores03.html">sectores03</a></li>
				</ul></li>
			<li><a href="clientes.html" class="clientes">Clientes</a></li>
			<li><a href="contacto.html" class="contacto">Contacto</a></li>
		</ul>
	</div>
	</div> 

Código:

* {
	margin: 0px;
	padding: 0px;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	color: #292929;
}
.container {
	width: 930px;
	margin-right: auto;
	margin-left: auto;
}
#main_nav {
	height: 70px;
}
#main_nav img {
	margin-top: 10px;
	float: left;
}
#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;
}

Gracias

[baccxus]

Viejo, lo ví en firefox (ubuntu), firefox (xp), chrome (xp), opera (xp), safari (xp) y explorer 6, en todos el menú se ve completamente igual.

Saludos

[gorkreg]

En mi PC usando XP con la versión de Safari 3.525.27.1 el menú horizontal (las pestañas) no llegan a tocar la línea negra (hay 1 píxel de margen). ¿No pasa en el tuyo?

Con el resto de navegadores que comentas no tengo ningún problema. Es solo Safari.

[baccxus]

Definitivamente no veo ese problema en ninguno de los navegadores que te mencioné.

Saludos

[gorkreg]

Bueno. Pues gracias de todos modos. Seguiré investigando.

[webosiris]

Iniciado por gorkreg

En mi PC usando XP con la versión de Safari 3.525.27.1

que versión de safari es esa? Porque la última estable para windows es la 3.2.2...

de paso te digo que con el codigo que copiastes, yo tambien lo veo igual. Lo mejor es que pongas el ejemplo online y 2 screenshots de como lo ves tu

[baccxus]

Un pantallazo para que calmes tus dudas:



Saludos

[webosiris]

por lo que vi, lo que pasa es que cambia el alto de la letra, y como no le estas dando un alto a los A los li miden 1px menos de alto y por lo tanto te muestra esa separación.

Posible solución (no lo testié, pero intuyo que es esto).
en #main_nav a eliminá:
- el padding bottom y top

en #main_nav a agregá:
- height:29px;
- line-height:29px;

quedaría así:

Código css:

#main_nav a {
height:29px;
line-height:29px;
padding:0 20px;
color: #FFFFFF;
text-decoration: none;
display: block;
background: url(../img/backgrounds/b_tabs.jpg) repeat-x left top;}
 

[gorkreg]

Lo de dar una altura al ancla ya lo había probado y se ve perfecto en Firefox y Safari pero no funciona en IE6. El ancla, al ser elemento en bloque ocupa todo el espacio horizontal. Es por eso que había usado el hack "_width: 1px", para darle una anchura. Vamos, que así funciona en Safari pero no en Explorer 6.

No se si va a ser posible arreglarlo siendo las pestañas de diferentes tamaños.