Firefox or Mozilla underline images inside an anchor

- STEFi - 2007-03-06 23:52:36
Quick CSS solution for all browsers.......

Problematic code (presumed valid HTML or XHTML document):


...
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a img { border: none; }
....
<a href="xyz.html"><img src="img.gif" alt="image" />this is image</a>


This code is working in Mozilla or Firefox in different way than IE and Opera (no matter which interpretation is correct). Text and image are both underline in Firefox and Mozilla.


a img { border: none; text-decoration: none; }

Adding image text-decoration to "none" can't help us. Mozilla or Firefox underline all inline elements inside the anchor tag.
Solutions is not very clear but works in all browsers (didn't test IE 7). You have to add span around text and change action of :hover pseudo-class to this span. For IE you have to assign some action to a:hover otherwise anchor won't be underline.


...
a { text-decoration: none; }
a:hover span { text-decoration: underline; }
a img { border: none; }

a:hover{background:transparent;}
....
<a href="xyz.html"><img src="img.gif" alt="image" /><span>this is image</span></a>


It works. All Mozilla and Firefox developers should be roasted in hell :)) It is classical demonstration of strict CSS implementation no matter how stupid is. If you have to read this article to the end you should send invoice to nearest Mozilla developer!


Keywords: CSS, anchor, styles, style, underline image, all browsers, Mozilla, Firefox