Css estilos en vínculos
En html
Tengo un menú acordeón el cual los botones tienen estilo de color gris y cambio de color al rojo al estar "sobre", eso se editó en una hoja css aparte que el DW crea por defecto por elmenu, el asunto es que en IE las imágenes que tienen vínculos se le agrega solo un borde de color gris :/ y la idea es que sean imágenes sin ese borde de vinculo :(
Bueno en el famoso "IE", siempre tendrás problemas al momento de desarrollar, lo que tienes que hacer, es crear una clase para esas imágenes que tienen links, o trata de ponerle el color de fondo, así no se nota que tienes color.
a.link-img{
color:#FFFFFF; ////Esto depende del fondo de la pagina
text-decoration:none; ///Esto es para no subrayar el texto
border:0;
}
Entonces con esa clase puedes agregarla a el link de tu imagen
<a href="#" class="link-img"><img src="img-1.jpg"/></a>
Con eso no debería tener problemas :D
si también pensé que serviría, ingrese los códigos y clase :/
mira ahí esta el código
http://signo0.cl/duplex/index.html
así como aparte,,, la botonera de arriba esta en flash, en IE me cambia el tamaño en opera se ve perfect como quiero :/
Debes agregar la clase a el hipervínculo y a la imagen que tienes dentro para no tener problemas.
¿Eres Chileno?
Saludos! Si no resulta seguimos buscando respuestas :)
@JuanGarciaR
de maipu xd
puse esto así
<a href="enlace.html" class="link-img"><img src="logo.jpg" class="link-img">
y no se modifica
a:link
a:visited
a:active
uno de esos manda más, pero na que ver que me agarre las imágenes igual.
¿Tienes skype o gmail o algo así para conversar mas fluido?
Listo, mande invitación! :)
3 respuestas más de otros expertos
¿Podes subir el menu a algun directorio en la web como para verlo?... asi es mas facil!
http://signo0.cl/duplex/index.html
el menu no es el problema si, el problema son las imágenes (logo) que como son vínculos se les crea ese marco así :/
Si, el tema es que tendrias que estar usando un reset de los estilos para homogeneizarlo lo mas posible entre navegadores desde lo basico. El que usamos aca es http://github.com/necolas/normalize.css
Con eso le decis que de entrada use eso, y despues le sume tus estilos. Es una manera de lograr un "estandar" entre los navegadores. Con eso deberia irse todo problema de esa indole.
Sino, simplemente pone en el CSS externo:
img {border: 0 none;}
Eso andaria tambien.
Pero te recomiendo veas lo del reset.
Cualquier cosa me decis!
Abrazo!
al final cree un estilo para las imágenes,, y le agregue el mismo color que el fondo, y le puse !important
y así ya no se ven los bordes en IE
entonces pensé que la solución era !important después le puse al estilo de las imágenes
img {
color: !important;
text-decoration:none !important;
border:0 !important;
outline:none !important;
}
pero no resultó :(
al final si le pongo el mismo color visualmente no se ve, pero el borde sigue existiendo :/ :/:/
Probalo asi
img {
border: 0 none !important;
outline: none;
}
Ponelo arriba del todo en la hoja... TIENE que andar, yo lo hice con el Firebug sobre tu modelo, el que me pasaste y anduvo!
OJO: otra cosa es si te pone el borde al <a>... aca estamos hablando de IMG... si el estilo lo ves en el <a> deberias ponerle los estilos a ese elemento!
Por ejemplo: viendo el CSS de tu pagina desde IE, veo que los objetos <a> (por ejemplo el logo de arriba del todo a la izquierda) cuando esta como "visited", tiene un borde colorado o algo asi...eso NO ES LA IMG, sino el <a>. Deberias colocarle el estilo que quieras a todas las pseudoclases que necesites... ejemplo:
a:visited {los estilos que necesites;}
a:hover {lo que sea;}
... y demas pseudoclases!
Tene en cuenta esto ultimo, porque lo probe en el IE y se fue cuando, en el "a:visited" le puse "color: transparent"... obviamente usando lo primero de la IMG, que le quita los bordes a TODAS las IMG!
Este tipo de cosas las solucionas seguro con el reset... son problemas tipicos de que cada navegador renderiza a su placer!
Proba y me decis que tal!
Abrazo!
al final cree un estilo para las imágenes,, y le agregue el mismo color que el fondo, y le puse !important
y así ya no se ven los bordes en IE
entonces pensé que la solución era !important después le puse al estilo de las imágenes:
img {
color: !important;
text-decoration:none !important;
border:0 !important;
outline:none !important;
}
pero no resultó :(
al final si le pongo el mismo color visualmente no se ve el borde pero sigue existiendo :/ :/: /
Si le pones "border 0px !important;" NO debería de aparecer ese borde, ya que le estas dando borde 0.
¿La tienes colgada para poder verla?