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

[aleCcowaN]

¡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

[braulito]

Intenta con line-height: 18px;

[aleCcowaN]

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

[braulito]

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

[aleCcowaN]

¡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

[braulito]

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]--> 

[aleCcowaN]

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