Foros del Web » Creando para Internet » CSS »

Problema con CSS y Safari

Estas en el tema de Problema con CSS y Safari en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/04/2009, 10:50
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 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[/
  #2 (permalink)  
Antiguo 04/04/2009, 15:11
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: Problema con CSS y Safari

¿Nadie tiene alguna solución?
__________________
}8[/
  #3 (permalink)  
Antiguo 04/04/2009, 17:05
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Problema con CSS y Safari

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
__________________
Al final del día hablar es gratis, codificar no lo es
  #4 (permalink)  
Antiguo 06/04/2009, 08:42
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: Problema con CSS y Safari

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
__________________
}8[/
  #5 (permalink)  
Antiguo 08/04/2009, 15:45
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Problema con CSS y Safari

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
__________________
Al final del día hablar es gratis, codificar no lo es
  #6 (permalink)  
Antiguo 08/04/2009, 16:14
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: Problema con CSS y Safari

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.
__________________
}8[/
  #7 (permalink)  
Antiguo 08/04/2009, 22:01
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Problema con CSS y Safari

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

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #8 (permalink)  
Antiguo 09/04/2009, 02:34
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: Problema con CSS y Safari

Bueno. Pues gracias de todos modos. Seguiré investigando.
__________________
}8[/
  #9 (permalink)  
Antiguo 09/04/2009, 02:59
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Respuesta: Problema con CSS y Safari

Cita:
Iniciado por gorkreg Ver Mensaje
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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Última edición por webosiris; 09/04/2009 a las 03:04
  #10 (permalink)  
Antiguo 09/04/2009, 10:33
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Problema con CSS y Safari

Un pantallazo para que calmes tus dudas:



Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #11 (permalink)  
Antiguo 09/04/2009, 17:16
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Respuesta: Problema con CSS y Safari

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:
Ver original
  1. #main_nav a {
  2. height:29px;
  3. line-height:29px;
  4. padding:0 20px;
  5. color: #FFFFFF;
  6. text-decoration: none;
  7. display: block;
  8. background: url(../img/backgrounds/b_tabs.jpg) repeat-x left top;}
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #12 (permalink)  
Antiguo 10/04/2009, 08:11
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: Problema con CSS y Safari

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.
__________________
}8[/
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




La zona horaria es GMT -6. Ahora son las 08:32.