Comunidad de diseño web y desarrollo en internet online

Desplazamiento al pasar por encima de un enlace

Citar            
MensajeEscrito el 29 Mar 2007 03:16 pm
Hola, a ver si alguien me puede echar una mano con esto.

Resulta que al pasar el raton por encima de un enlace, ocurre un desplazamiento raro del div donde esta contenido.

http://www.sosfactory.com/webdesign/sosfactoryV3/services.html

Pasen por encima de los links en azul (SOLO EN IE).

Tengo el problema aislado, parece que la causa son los botones rollover del header:

Código :

.home{
background: url(../images/headerlover.jpg) no-repeat;
width: 61px;
height: 45px;
float: left;
}

.home a {
display: block;
width: 61px;
height: 45px;
}

.home img
{
width: 61px;
height: 45px;
border: 0
}

* html a:hover
{
visibility:visible
}

.home a:hover img
{
visibility:hidden
}

.contact{
background: url(../images/headerrover.jpg) no-repeat;
width: 60px;
height: 45px;
float: left;
}

.contact a {
display: block;
width: 60px;
height: 45px;
}

.contact img
{
width: 60px;
height: 45px;
border: 0
}

.contact a:hover img
{
   visibility:hidden;
}


Concretamente esta parte es la que me provoca el desplazamiento:

Código :

* html a:hover
{
visibility:visible
}


A ver si hay alguna solucion, o alternativa.
Saludos.
Sergio

Por sosfactory

135 de clabLevel

1 tutorial

 

msie
Citar            
MensajeEscrito el 29 Mar 2007 04:39 pm
Al final decidi no complicarme y lo resolvi de esta manera:

Código :

<div id="home"><a href="index.html" id="home"></a></div> 


Código :

#home{
height: 45px;
width: 61px;
background: url(../images/home.jpg) top left no-repeat;
display: block;
float: left;
}
            
#home:hover{
background-position: bottom left;
}


Y problema resuelto :)

Por sosfactory

135 de clabLevel

1 tutorial

 

msie
Citar            
MensajeEscrito el 29 Mar 2007 04:56 pm
El problema ahora es q no puedo usar Alt para esas imagenes... ahora q hacemos?

Por sosfactory

135 de clabLevel

1 tutorial

 

msie
Citar            
MensajeEscrito el 29 Mar 2007 10:11 pm
Usa title en la etiqueta a, alt es para la etiqueta <img />, ahí no la necesitas

Código :

<a href="index.html" id="home" title="Home">Home</a>

Y en el css

Código :

#home { 
height: 45px;
width: 61px;
background: url(../images/home.jpg) top left no-repeat;
display: block;
float: left;
text-indent: -9999px; // esto para ocultar el texto
}
            
#home:hover{
background-position: bottom left;
} 

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 29 Mar 2007 10:50 pm
Ah perfecto :)

Muchas gracias Ramm, te debo una ;)

Por sosfactory

135 de clabLevel

1 tutorial

 

msie

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.