Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de IE y barra de enlaces - se mueven en 'hover' en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/01/2006, 12:17
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
IE y barra de enlaces - se mueven en 'hover'

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í.

Última edición por AlvaroG; 27/01/2006 a las 13:36
  #2 (permalink)  
Antiguo 27/01/2006, 13:59
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
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;
}
__________________
QMD...
  #3 (permalink)  
Antiguo 27/01/2006, 14:14
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
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.
  #4 (permalink)  
Antiguo 27/01/2006, 15:09
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
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...
__________________
QMD...
  #5 (permalink)  
Antiguo 27/01/2006, 16:14
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
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.
  #6 (permalink)  
Antiguo 28/01/2006, 11:32
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
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.
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

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 02:50.