Pido perdón a todos por responder algo que está ya respondido, pero me he
dado cuenta de que tienes un pequeño fallo en la asignación de algún valor
en CSS. Más concretamente te hablo del 'height: 12px' que asignas a '
ul.menulateral li a'. Siendo así, en el caso de que el texto del enlace 'a'
superara el ancho de el 'ul', el texto de la segunda línea (en los
navegadores no-IE) se superpondría con el del enlace inmediatamente inferior
a este (prueba a poner un par de palabras más en cualquiera de los enlaces y
verás de lo que te hablo). Lo correcto en este caso sería cambiar este
'height' por 'line-height' y darle un valor que te resulte adecuado (por
ejemplo, '1.4' queda bastante bien).
El caso es que haciendo esto, nuestro querido IE pierde un gnomo que tiene
por dentro llamado 'hasLayout' (
http://www.satzansatz.de/cssd/onhavinglayout.html) y tiende a encontrar
huecos donde no existen. Esto no es mucho problema, porque ya M$ nos dice
como hacer que un elemento que no tiene 'hasLayout' pueda tenerlo (
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp).
Si leemos con un poco de atención, vemos que existen unas propiedades CSS
que, al asignarles unos determinados valores, hacen que el elemento al que
se aplican vuelva a tener 'hasLayout'. Como podemos apreciar, una de estas
propiedades es, oh magia, la que acabamos de eliminar: 'height', a la que
podemos asignar cualquier valor, siempre y cuando SOLO lo vea IE (seguro que
algún hack ya te sabes). Si no te apetece andar aplicando hacks, siempre
puedes utilizar una de las propiedades que solo ve IE y que hacen que se
asigne 'hasLayout'. Esta propiedad es 'zoom' a la que simplemente asignando
el valor de '1' podrás hacer que todo churrufle como antes "sin que se
note".
Otra cosilla. Como te comentan, es posible eliminar el espacio que deja IE
en la parte inferior de los enlaces si eliminas los espacios en el código
HTML. El único problema es que si la lista de enlaces es muy larga, este
código se te puede quedar un tanto engorroso de tratar. Puedes evitar tener
que juntar todos los <li>...</li><li>...</li> si haces que el texto de los
'ul' tenga tamaño '0'.
Entonces, todo el código que hay que añadir/cambiar, y que yo propongo,
quedaría tal que:
ul.menulateral { font-size: 0; }
ul.menulateral li a { line-height: 1.4; zoom: 1; } /* Aparte, elimina el
'height' */
Ufff, menudo rollo. Espero no haberte aburrido mucho ;)
Un saludo, David Merino Ogando
P.D.: Ya me dirás si te funciona bien, pq no me da tiempo a probarlo mucho,
lo siento.
On 1/1/06, Alicia Urrea <[EMAIL PROTECTED]> wrote:
>
> Hola a todos,
>
> Llevo un par de días con un problema que es bien sencillo, pero que no
> atino a resolver. Os lo cuento a ver si alguien me da una solución. Gracias
> por adelantado.
>
> Tengo el siguiente menú:
>
> <ul class="menulateral">
> <li><a href="#">Empleo y P. Operativo</a></li>
> <li><a href="#">Inclusión Social</a></li>
> <li><a href="#">Educación</a></li>
> <li class="bottom"><a href="#">Voluntariado</a></li>
> </ul>
>
> Le aplico los siguiente estilos:
>
> * {margin:0px; padding:0px;}
>
> ul.menulateral {
> clear:both;
> border: 3px solid #6A85AB;
> width:136px;
> padding:5px 0px;
> margin:20px;
> list-style-type:none;
> background-color: #DAE1EB;
> }
>
> ul.menulateral li {
> border-top: 1px solid #bac7d8;
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size:9px;
> }
> ul.menulateral li a {
> display:block;
> height:12px;
> padding:0px 0px 2px 3px;
> text-decoration: none;
> color: #171411;
> }
> ul.menulateral li a:hover {
> background-color:#91A6C1;
> color: #FFFFFF;
> }
>
> li.bottom {
> border-bottom: solid 1px #bac7d8;
> }
>
> Cuando lo visualizo en explorer (en Firefox se ve bien) queda entre cada
> elemento de la lista y el borde azul un espacio en blanco que no consigo
> eliminar. ¿Alguna idea?
>
> Muchas gracias!
>
> Alicia
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
