Links en imágenes

[loxc3r]

Hola!!!...

La verdad es que me estoy volviendo loco y no suelo preguntar ya que me leo todos los posts y demás sitios de ayuda cuando tengo algún problema, pero no consigo saber como se hace y lo he probado todo, ya meto cosas hasta por meter :P

El tema es el siguiente tengo unas imágenes linkadas ( botones ) en la web y mi sorpresa es que en ie7 no se me ven las rayas de los links al pasar por encima del botón pero en mozilla firefox 3.0.1 sí.

Os dejo el ejemplo... son los botones de arriba del todo

www.zonalox.com/prueba

Lo he probado en otros ordenadores por si acaso es por diferencia de versiones pero no :P y la verdad estoy un poco desquiciado



Os dejo también el css que tengo más o menos limpito porque no sabias lo que he podido meter ahí con locura ^^

Código:

.loxc3r {
        font-family:tahoma,sans-serif,arial;
        font-size:11px;
        color: #CCCCCC
}

.text1 {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 9px;
	color: #CCCCCC;
}

.text {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10px;
	color: #CCCCCC;
}

.texttit {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10px;
	color: #E59F26;
      border-bottom-style: dashed;
      border-bottom-width: 1px;

}

a:link {
	color: #E59F26;
	text-decoration: none;
      

}
a:visited {
	color: #E59f26;
	text-decoration: none;
}
a:hover {
	color: #E59F26;
	border-bottom-style: dashed;
      border-bottom-width: 1px;


}
a:active {
	text-decoration: none;
      outline: none;
}

BODY {
	scrollbar-3dlight-color: #FFFFFF;
	scrollbar-arrow-color: #2D617D;
	scrollbar-darkshadow-color: #FFFFFF;
	scrollbar-face-color: #E8F4FD;
	scrollbar-highlight-color: #CCE9EC;
	scrollbar-shadow-color: #8CCCCD;
	scrollbar-track-color: #FFFFFF;
}

De verdad muchas gracias por adelantado y a ver si alguien por lo menos me puede dejar alguna idea, ya que el diseño va por tablas y aún no tengo ganas de meterme en el maravillos mundo de las .css

Un saludo

[cehojac]

Hola:

he visto que a tus imágenes no les has agregado una clase de estilos, yo te recomiendo que a los links de imágenes les aplicaras una nueva clase o estilo.


ejemplo:

<a href="index.php" class="nuevo_estilo">
<img src="tu_imagen.png" alt=""/>
</a>


y en el css
/*este estilo es para los links de imágenes*/
.nuevo_estilo a:link, a:visited, a:active, a:hover
{
text-decoration:none;
}
/*fin del estilo para imagenes*/


también sería preferible que uses estilo para tus otros links que contengan el efecto que deseas.

[Mikmoro]

Iniciado por cehojac

<a href="index.php" class="nuevo_estilo">
<img src="tu_imagen.png" alt=""/>
</a>

.nuevo_estilo a:link, a:visited, a:active, a:hover
{
text-decoration:none;
}

Ese selector no funcionaría, porque .nuevo_estilo no contiene un enlace como estás poniendo, sino que es la clase del propio enlace.

En todo aso sería:

a.nuevo_estilo:link, a.nuevo_estilo:visited { etc.

[Mikmoro]

¿Lo de que se mueva toda la web hacia abajo a pasar por lo botones es intencionado?

[loxc3r]

No, es justamente lo que no quiero que ocurra ^^

Que no salga el link en los botones...

Voy a probar eso que me habeis dicho a ver si funciona

Y gracias por cierto

Edited:

Jo, pues no funciona... seguiré mirando gracias ;)

De todas maneras claramente necesitaré crear algún estilo para eso porque cuando elimino del
code:

a:hover {
color: #E59F26;
border-bottom-style: dashed;
border-bottom-width: 1px;

lo que esta en rojo, ya no tengo problema ni en mozilla ni en ie, el tema es que no se que codigo meterle a esa imágen para que no lo coja de esa manera en el mozilla porque el de arriba no funciona.

[Mikmoro]

Iniciado por loxc3r

Que no salga el link en los botones...

Disculpa pero me he perdido. ¿Qué quiere decir "que no salga el link"?

no se me ven las rayas de los links

¿qué son las rayas de los links? ¿te refieres al subrayado?

[Mikmoro]

A ver: tú le estás asignando un borde inferior cuando pasa el ratón:

a:hover {
border-bottom-style:dashed;
border-bottom-width:1px;
}

y eso es lo que se ve. ¿qué es exactamente lo que quieres hacer?

[loxc3r]

Pues justamente si te fijas, perdona que a lo mejor me he explicado mal...

Que ese borde inferior en las imágenes no salga ( si te das cuenta en ie no sale pero en mozilla si ) pues no quiero que en mozilla me salga ese borde pero solo en las imágenes, para los link de texto normales si quiero.

Con IE7 si te fijas no sale nada al pasar el ratón por esos botones pero en cambio en mozilla firefox 3.0.1 al pasar el ratón por los botones sale el link ( linea de debajo ) en las imágenes.

Esa es mi duda, si existe algún code o algo que se pueda modificar para que en mozilla no salga esa linea ( dashed de 1px ) en las imágenes pero siga saliendo en el texto.

Y muchas gracias otra vez :)

[Mikmoro]

Ah, bueno. La solución pasaría porque asignaras una clase a los enlaces que contienen las imágenes, y en la css dieras a esa clase como sin borde al pasar el ratón:

<a href="#" class="noborde"><img sc="... " /></a>

y en la css

a.noborde:hover {border: none;}

[loxc3r]

Dios mío, yo es que flipo O_O

Muchísimas gracias, si te digo que eso ya lo había probado pero con dos fallos...

Primero

a.noborde:hover {border: none;} - Lo ponía separado con espacios en cada parte :P

Segundo ( esto ya no se si es correcto o no son imaginaciones mias

<a href="#" class="noborde"><img sc="... " /></a> - el class lo ponía delante del href

Pues oye mikmoro, muchísimas gracias eres un crack ;)

[Mikmoro]

Iniciado por loxc3r

Segundo ( esto ya no se si es correcto o no son imaginaciones mias
<a href="#" class="noborde"><img sc="... " /></a> - el class lo ponía delante del href

No, el orden ahí no tiene importancia. Sería alguna otra cosilla.

De nada, es un placer.

Saludos.