IMG no subrayada

monorendon · #1 (**permalink**) 31/07/2006, 11:33

Hola, alguien me puede ayudar con esto??? Tengo un hipervínculo que es imagen y texto, pero no quiero que la imagen se me subraye, estoy haciendo así:

<A href="paginita"><IMG src="/images/utils/Users.png"> Administración de Grupo de Usuarios </A>

La palabra está bien que se subraye pero no la imagen, cuando el mouse no esta encima no pasa nada, pero cuando el mouse pasa por encima de la imagen, pues esta se subraya junto con el texto, lo que quiero que ocurra es que se subraye el texto solamente, sin subrayarse la imagen.... como hago eso???? me imagino que se lo puede arreglar con CSS verdad???

monorendon · #2 (**permalink**) 31/07/2006, 11:54

Segun yo el problema lo estoy teniendo es apartir de esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML LANG="en">

Porque sin eso, no hay problema y la imagen no se subraya con CSS que aplica que no tenga text decoration, pero con ese DTD hace que se subraye.... como soluciono eso

PD: no puedo quitar ese

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML LANG="en">

tiene que estar de obligacion

webosiris · #3 (**permalink**) 31/07/2006, 12:03

Cita:

Iniciado por monorendon

tiene que estar de obligacion

si, eso no se puede quitar... y además el que pones está incompleto. Debería decir

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Ahora, si nos mostraras el css que tenés sería más fácil... probá a agregar a tu CSS

Código:

a img {text-decoration:none}

GoRaK · #4 (**permalink**) 31/07/2006, 12:19

Cita:

Iniciado por monorendon

<A href="paginita"><IMG src="/images/utils/Users.png"> Administración de Grupo de Usuarios </A>

Cambio lo que tienes por:

<a href="paginita" title="algo"><img src="/images/utils/Users.png" title="algo" alt="algo" style="border:0;"/> Administración de Grupo de Usuarios </a>

monorendon · #5 (**permalink**) 31/07/2006, 12:56

ok my css es este:

BODY,A,TH,SELECT,INPUT,TEXTAREA,FONT,TD,H1,H2,H3,H 4,H5,H6 {
font: 11.5px tahoma, arial, sans-serif;
}

BODY {
margin: 0 0 0 0;
background: #FFFFFF;
color: #3d3d3d;
}

A IMG {
border: 0px;
text-decoration:none;
}

A:link,A:visited {
color: #000080;
text-decoration: none;
}

A:hover,A:active {
text-decoration: underline;
color: #ff4400;
}

SELECT,INPUT,TEXTAREA {
color: rgb(27, 25, 131);
font-size:11px;
}

FONT,TD,TH {
color: #3d3d3d;
}

Y no sirve como dices GoRaK, lo mismo que nada...

webosiris · #6 (**permalink**) 31/07/2006, 13:02

hola, tenés un pequeño problema con la cascada y la herencia... lo que yo te dije ponelo DESPUÉS de

Código:

A:hover,A:active {
    text-decoration: underline;
    color: #ff4400;
}

ya que esto último lo sobreescribe y entonces claro, no funciona.

PD: acostumbrate a escribir todas las etiqeutas y atributos (a, img, h1..) en minúscula.
PD 2: por favor, disminuí tu firma, solo se permiten 4 líneas. Gracias.

monorendon · #7 (**permalink**) 31/07/2006, 13:30

Perdón... no igual me sigue subrayando... Es como si no le hiciera caso a la clausula text-decoration: none;

Bueno, no se si este dato sirva, pero el <a> está dentro de un <td> y este dentro de varias tablas... y a la final dentro de un div llamado <main> el cual está contenido dentro del <body>, beno, espero que sirva esta info....

monorendon · #8 (**permalink**) 31/07/2006, 18:35

Acaso nadie sabe como resolver este problema??

webosiris · #9 (**permalink**) 31/07/2006, 18:57

a lo que yo te dije, agregale !important.. así:

Código:

a img {text-decoration:none !important;}

Cita:

dentro de varias tablas.

No tiene que ver con tu problema pero ya que lo comentás... lee porque diseñar con tablas es estúpido (el título suena "fuerte" pero es una traducción bastante literal de un art. en inglés)

monorendon · #10 (**permalink**) 31/07/2006, 19:36

Pues hombre, dejame decirte que tampoco funciona...

webosiris · #11 (**permalink**) 31/07/2006, 19:41

pasa entonces el enlace a ver...

monorendon · #12 (**permalink**) 31/07/2006, 20:02

que enlace???

webosiris · #13 (**permalink**) 31/07/2006, 20:20

Cita:

Iniciado por monorendon

que enlace???

no lo tenés subido a algún lado para poder verlo online?

También probá a validar tu CSS, a ver si no te falta ningún ;

monorendon · #14 (**permalink**) 31/07/2006, 20:26

pues no...

jesusbet · #15 (**permalink**) 31/07/2006, 20:32

<A href="paginita"><IMG style="text-decoration: none; border: 0" border="0" src="/images/utils/Users.png"> Administración de Grupo de Usuarios </A>

NopalStudio · #16 (**permalink**) 31/07/2006, 23:41

Hola monorendon

La respuesta a tu problema ya te la han dado, lo unico que voy hacer es resumirla;

1.- Debes agregar en tu img la opcion de border="0"

Código:

Ejemplo:
<img src="images/utils/Users.png" border="0">

2.- Debes cambiar en tu CSS la opcion de text-decoration: underline; por la siguiente text-decoration: none;

Código:

Ejemplo:
A:hover,A:active {
text-decoration: none;
color: #ff4400;
}

monorendon · #17 (**permalink**) 01/08/2006, 10:22

mm... como que no se entiende... pero weno, me voy hacer explicar otra vez...

Lo que tengo es esto: un hipervínculo de la siguiente manera:

<A href="paginita"><IMG src="/images/utils/Users.png"> Administración de Grupo de Usuarios </A>

Ahora, mi CSS es este:

BODY,A,TH,SELECT,INPUT,TEXTAREA,FONT,TD,H1,H2,H3,H 4,H5,H6 {
font: 11.5px tahoma, arial, sans-serif;
}

BODY {
margin: 0 0 0 0;
background: #FFFFFF;
color: #3d3d3d;
}

A IMG {
border: 0px;
text-decoration:none;
}

A:link,A:visited {
color: #000080;
text-decoration: none;
}

A:hover,A:active {
text-decoration: underline;
color: #ff4400;
}

SELECT,INPUT,TEXTAREA {
color: rgb(27, 25, 131);
font-size:11px;
}

FONT,TD,TH {
color: #3d3d3d;
}

IMG {
border: 0px;
}

y tiene por encabezado HTML esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML LANG="en">

En ie me aparece así:

Imagen Click aqui para irse a no se donde...

Pero al cambio en Firefox me aparece así:

Imagen Click aqui para irse a no se donde...

con "Imagen" estoy haciendo referencia que allí está hubicada una imágen...

Lo que yo quiero es que en Firefox no se subraye la Imagen...

Ahora si... como hago eso????

MaXaC · #18 (**permalink**) 01/08/2006, 10:51

y si pruebas con esto, en vez de border 0 le pones none

Código:

<A href="paginita"><IMG style="text-decoration: none; border: none" src="/images/utils/Users.png"><br>Administración de Grupo de Usuarios<br></A>

monorendon · #19 (**permalink**) 01/08/2006, 11:04

No, se sigue subrayando... la única solución que encontrado a esto es eliminar esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML LANG="en">

Pero si lo elimino se me dañan otras cosas que hice... entonces no lo puedo eliminar... Ya dijo esto solo me ocurre en Firefox...

ePorroa · #20 (**permalink**) 01/08/2006, 11:28

Hola, podrias probar con esto.

Código:

span{
    text-decoration:underline;
}
a img, a{
    text-decoration:none;
}

<a href="paginita"><img style="border:0;" src="/images/utils/Users.png"><br><span>Administración de Grupo de Usuarios</span><br></a>

Agrego el span para poder aplicar el underline a este mas no a la imagen, seria bueno que actualices tu web :D (quizas a HTML 4.1 transitional) ..

Salu2

monorendon · #21 (**permalink**) 01/08/2006, 13:04

Es que no se que es el HTML 4.1 transitional y además no encuentro un manual como HTML 4.1 para tontos... jeje...

Pues bueno, tu solución es un poco más práctica... pero va a tocar incluir a los que quiero que son vinculos se subrayen... he allí el gran problema... Pero ahora se me ocurre una mejor solución, que tal si es a la imagen que va dentro del span.... para que no se subraye??? jeje... es una opinión...

ePorroa · #22 (**permalink**) 01/08/2006, 14:09

De todas formas creo que esta es la solucion que mas rapido podria hacer parar un dolor de cabeza :D

Salu2
PD: Mas sobre el elemento span.
http://webdesign.about.com/od/htmlta...ltags_span.htm

GoRaK · #23 (**permalink**) 01/08/2006, 16:49

En IE funciona como te había respondido antes. Pero en firefox parece que no hay solución posible. De todas formas puedes probar con algún "truquillo" bajando un poco la imagen de manera que oculta el borde.

<a href="paginita" title="algo"><img src="/images/utils/Users.png" title="algo" alt="algo" style="display:block;margin-bottom:-3px;"> Administración de Grupo de Usuarios </a>

Saludos!