The Problem:
I recently came across this CSS ‘bug’ where if you place an <img /> tag inside your <a></a> tags you will get an underline for not only the text inside the <a></a> tags but for the image as well. This ‘bug’ only occurs in Firefox however. I put bug in quotes because it seems that the way Firefox handles this is as specified by the W3C. A test case would look like this:
<a href="#"><img src="yourImage.url" />Some link text with underline.</a>
The other browsers I have tested (IE8,7,6 and Chrome) don’t give the image an underline.
Solution(s):
For most of you the answer might be as simple as not putting your <img /> tag inside the <a></a> tags:
<img src="yourImage.url" /><a>Some link text with underline.</a>
This would get rid of the underline but would also mean your image is no longer a part of the link.
If you wanted the image and the text to both be links you could make a separate link for the image and the text like this:
<a><img src="yourImage.url" /></a><a>Some link text with underline.</a>
Because for some reason the underline only shows up if there is text inside the <a></a> tags along with the image, by itself it is fine.
Of course, now you have made two different links which is usually undesired. It is redundant, sloppy semantics and you have two separate roll-over actions.
So what do you do if you want to have an image share roll-over with some text and you want at least one of the link states to have text-decoration:underline? Add this to your style sheet:
a img{vertical-align:middle}
If you want to use more specificity (I know I do) then you should counter the specific rule (including pseudo class) that is adding the text-decoration:underline with a vertical-align:middle rule for img elements like so:
If you have: a:hover{text-deccoration:underline}
Then add: a:hover img[vertical-align:middle}
Like magic your image underlines are gone. (if your image links were in list markup you will be pleased to note that the bullets are aligned to the vertical centers of your images now too) The only caveat here is that the underline is only hidden behind the image because now it is at vertical center of and behind the image, if you are using any kind of transparency you might still see the underline.
This kind of minor browser inconsistency is the sort of thing that will drive a designer crazy so I hope this will keep some of you out there saner than I am.
