IE y barra de enlaces - se mueven en 'hover'

[AlvaroG]

Gente,
Estoy participando en un concurso de diseño web en Uruguay, para la empresa estatal AFE y uno de los requisitos es que el sitio funcione correctamente con IE 6 (*).

Tengo ya todo listo, excepto por un detalle:
los enlaces de la barra lateral izquierda se desplazan al pasarles el puntero por encima.
Es un efecto exclusivo de IE, ya que ni en Opera (Win/Linux) ni en Firefox (Linux) me sucede lo mismo.

Además ya me ha sucedido antes, fíjense sino en la barra izquierda de
www.cartarinet.com
(es un sitio todavía no terminado, en el que tengo el mismo problema)

¿alguien me podría tirar alguna idea?

el código html es el siguiente (les paso solamente el de la barra)

Código HTML:

<div class="botonera2">
<a href="itinerarios_tarifas.html">Itinerarios y Tarifas</a>
<a href="compras_y_ventas.html">Compras y ventas</a>
<a href="servicios_pasajeros.html">Servicios de Pasajeros</a>
<a href="servicios_carga.html">Servicios de Carga</a>
<a href="otros_servicios.html">Otros<br />servicios</a>
<a href="proy_especiales.html">Proyectos especiales</a>
</div> 

y el código css relacionado es:

Código:

div.botonera2 {
 position : absolute;
 width : 13%;
 top : 8em;
 left : 2px;
 padding : 0.25em;
 text-align : center;
 border : 1px solid rgb(238,201,0);
 border-top : 1px solid white;
 border-left : 2px solid rgb(238,201,0);
 }

div.botonera2 a {
 display : block;
 width : 100%;
 font-size: 1em;
 background-color : rgb(98,153,205);
 color : white;
 margin-bottom : 2%;
 }

div.botonera2 a:hover {
 background-color : rgb(230,230,250);
 color : black;
 text-decoration : none;
 }

div.botonera2 a:visited {
 color : white;
 text-decoration : none;
 }

Saludos.

(*) Nota: todos los comentarios que se les ocurran sobre este requisito, ya se me ocurrieron a mí.

[orochies]

Hola me parece que tu error esta en el CSS ya que se te ah ido una propiedad que esta demas y es quien te da el error.

div.botonera2 {
position : absolute;
width : 13%;
top : 8em;
left : 2px;
padding : 0.25em;
text-align : center;
border : 1px solid rgb(238,201,0);
border-top : 1px solid white;
border-left : 2px solid rgb(238,201,0);
}

div.botonera2 a:link { <---- Solo una sugerencia, aplica el p-seudo elemento :link
display : block; <-- ¡Y ACA EL ERROR! borra esa propiedad y veras
width : 100%;
font-size: 1em;
background-color : rgb(98,153,205);
color : white;
margin-bottom : 2%;
}

div.botonera2 a:hover {
background-color : rgb(230,230,250);
color : black;
text-decoration : none;
}

div.botonera2 a:visited {
color : white;
text-decoration : none;
}

[AlvaroG]

1.- ya probé cambiar el selector a
div.botonera2 a, div.botonera2 a:link
y no funcionó.

2.- ¿viste acaso cómo queda si le quito "display:block"? a un elemento en línea no se le aplican anchos, y además no hace automáticamente el salto de línea.
Además no es un "error", fue absolutamente a propósito.

Gracias por la respuesta y por la sugerencia, pero no va por ese lado.


Saludos.

[orochies]

Bien tienes toda la razon no es así...

No me fije en el width: de los enlaces ok pero ya he descubierto otra cosilla que me a sucedido con imagenes bueno pasa muy a menudo con los elementos in-line...

Y esto es que a la hora de escribir el codigo y al final de estos le das un salto de line ejemplo:

Código:

<a href="itinerarios_tarifas.html">Itinerarios y Tarifas</a> <-- fijese en el salto de linea que proboca un espacio en blanco como poner el code &nbsp;
<a href="itinerarios_tarifas.html">Itinerarios y Tarifas</a>

Entonces al poner los codes de vinculos uno bajo de otro quedan con un espacio en blanco a cada lado y que con la propiedad display: block; de CSS no tendria que importar pero parece que IE no sabe de ello... O al menos eso creo yo porque eh allí el problema...

Eh puesto los vinculos de la forma:

Código:

<a href="itinerarios_tarifas.html">Itinerarios y Tarifas</a><a href="compras_y_ventas.html">Compras y ventas</a><a href="servicios_pasajeros.html">Servicios de Pasajeros</a><a href="servicios_carga.html">Servicios de Carga</a><a href="otros_servicios.html">Otros<br>servicios</a><a href="proy_especiales.html">Proyectos especiales</a>

Osea uno despues de otro sin espacio alguno, y el problema se me ah resuelto satisfactoriamente...

espero me entiendas y sino ya veremos que mas puede ser pero aca en mi pc el problema a desaparecido...

Nota:

El codigo css utilizado es el mismo que tu has posteado ningun cambio se a realizado en el...

_Saludos...

[AlvaroG]

lo voy a probar, mañana te cuento. ahora estoy en el trabajo y en téoría no debería estar haciendo esto

Saludos y gracias.

[AlvaroG]

el problema surgió por los márgenes inferiores, al parecer no eran interpretados como yo quería.

Lo que al final hice fue cambiar el margen inferior por 2px, y eliminar los saltos de línea luego de cada enlace.

Con esto logré que dejara de desplazarse.

Gracias orochies, nunca pensé que algo tan insignificante como un salto de línea pudiera causar ese comportamiento del IE.


Saludos.

PD: sí, ya sé que para el DOM no es lo mismo con el salto que sin el salto de línea.