Foros del Web » Creando para Internet » CSS »

Problema con <ul><li><a> en Firefox

Estas en el tema de Problema con <ul><li><a> en Firefox en el foro de CSS en Foros del Web. ¡Hola gente! Me permito molestarlos para consultar con un problema que tengo en una barra de navegación donde los enlaces los tengo definidos con estos ...
  #1 (permalink)  
Antiguo 20/09/2006, 15:11
 
Fecha de Ingreso: septiembre-2006
Ubicación: Buenos Aires
Mensajes: 12
Antigüedad: 11 años, 3 meses
Puntos: 0
Problema con <ul><li><a> en Firefox

¡Hola gente!

Me permito molestarlos para consultar con un problema que tengo en una barra de navegación donde los enlaces los tengo definidos con estos estilos

...
#navNivel2 ul {
clip: rect(auto auto auto auto);
margin: 0px 0px 0px 4px;
padding: 0px;
}

#navNivel2 li {
margin: 0;
padding: 0;
list-style-type: none;
}

#navNivel2 a {
color: #777799;
text-decoration: none;
padding: 0 0 3px 20px;
display: block;
height: 18px;
}

#navNivel2 a:link {
color: #777799;
background-image: url(../im/link.gif);
background-repeat: no-repeat;
background-position: left top;
}
...

El problema lo tengo con el estilo marcado en rojo. Cuando no lo pongo, la barra de navegación se presenta correctamente en todos los navegadores en que la pruebo, pero los espacios entre vínculos se agrandan enormemente y la barra se estira de manera insoportable. Cuando fijo este estilo la barra se presenta muy bien en Explorer y Opera, ya que cuando el vínculo ocupa más de un renglón esos navegadores reacomodan el ítem automáticamente. Firefox no lo hace y me aparecen los textos superpuestos.

Mis preguntas son: ¿Existe otro modo de hacerlo? ¿Se puede ocultar este estilo a Firefox? ¿Debería definir la altura en otro lugar -con <li> no logré lo buscado-?. Cualquier ayuda, sugerencia, vínculo propuesto o lo que sea será muy agadecido. No he sabido buscar en otros hilos y hay aspectos de este tema que me son desconocidos.

Gracias de antemano

Alec
  #2 (permalink)  
Antiguo 20/09/2006, 15:13
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
Intenta con line-height: 18px;
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #3 (permalink)  
Antiguo 20/09/2006, 15:24
 
Fecha de Ingreso: septiembre-2006
Ubicación: Buenos Aires
Mensajes: 12
Antigüedad: 11 años, 3 meses
Puntos: 0
Gracias Braulio por una rapidísima respuesta!

Con la line-height puesta así, funciona perfectamente en Firefox, pero me genera el mismo problema de alargamiento en Explorer. Si pongo ambas vuelvo a la situación anterior. Hice algunas combinaciones (corrí alturas al estilo de LI) y el problema subsiste o empeora ¿Existirá una forma de hacer "browser specific" un estilo (me refiero a sin usar javascript sino dentro de la misma hoja de estilo)?

Gracias nuevamente

Última edición por aleCcowaN; 20/09/2006 a las 15:42 Razón: pregunta poco clara
  #4 (permalink)  
Antiguo 20/09/2006, 19:27
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
Internet explorer no soporta CSS2, siendo asi podrías escribir esto:
Código:
Esto funciona en todos los navegadores, podrías definir el estilo especifico para IE6
#navNivel2 a {
   height: 18px;
}

Esto funciona solo en navegadores que soportan CSS2 (osea IE6 no), la regla anterior cambiaria solo para navegadores con soporte CSS2

#navNivel2 li>a {
 line-height: 18px;
} 
A ver si eso te ayuda y si no entiendes me merezco un cachetadon :P
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #5 (permalink)  
Antiguo 20/09/2006, 23:07
 
Fecha de Ingreso: septiembre-2006
Ubicación: Buenos Aires
Mensajes: 12
Antigüedad: 11 años, 3 meses
Puntos: 0
¡Gracias x 1000, Braulio!

Como tú me dijiste, puse la sección CSS2 en la hoja y en el HEAD del documento la siguiente script para aplicar tu recomendación

<script language="javascript">
if (document.all) {
document.writeln ("<style>#navNivel2 a {height: 18px;</style>");
}
</script>

reconozco que el (document.all) es un método un poco sucio que después puliré, pero ahora funciona bien y se ve perfectamente en mis Explorer 6.0, Firefox 1.5.0.7 y Opera 9.01, y además ¡igualito en todos!

Gracias nuevamente

Alec
  #6 (permalink)  
Antiguo 21/09/2006, 00:21
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
Puedes quitar eso y poner lo siguiente en la declaración CSS2
Código:
#navNivel2 li>a {
 line-height: 18px;
 height: auto;
}
O también puedes usar comentarios condicionales
Código HTML:
<!--[if IE]>
<style type="text/css">
aca el estilo para IE
</style>
<![endif]--> 
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #7 (permalink)  
Antiguo 21/09/2006, 06:21
 
Fecha de Ingreso: septiembre-2006
Ubicación: Buenos Aires
Mensajes: 12
Antigüedad: 11 años, 3 meses
Puntos: 0
Gracias mil otra vez más. No sabía de la existencia de comentarios condicionales para Explorer, y que me puedo hasta importar una hoja de estilo complementario por este método.

Saludos

Alec
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 15:01.