Solution: Annoying underline under linked images in Firefox

I lost 3 hours this morning searching everywhere to find a fix for this. Finally found it through a search on google and thought I would share with you guys, might help someone and prevent them for loosing their precious time!

Insert this in your stylesheet.css :

a img {
    border: none;
    vertical-align: middle;
}

The border property removes the box around the linked image but in Firefox there is still an annoying underline under the linked image. BTW will only remove boxes for linked images because it is under the "a" tag .

The important part is the vertical-align statement, which "drops down" the image a bit from what I've read to probably disassociate the image from the link in Firefox, anyways it works!

Tried in both Firefox 3.0 and Internet Explorer 7.0 and works/displays perfect for me without that annoying underline in FF!

Have fun!

Thanks for the post - but the default stylesheet already contains the border: none for the img tag... must have gotten lost somewhere?

Kim:

Thanks for the post - but the default stylesheet already contains the border: none for the img tag... must have gotten lost somewhere?

Even with the "border: none" in Firefox it displays a underline under an image with a link attached. The "magic part" really is the "vertical-align" property.

Search Google on "removing image link underline firefox" it returns 50,000 hits ;) And the solution I posted here isn't on the 1st page believe me.

If vertical-align fixes the issue, then it was never an underline -- in the strict sense of underlined text -- in the first place. However much it may have looked like an underline, it was a gap of some sort.

But strange are the ways of browsers -- and their bugs. :P

Incidentally, a Google search on "removing image link underline firefox" now brings up this thread in number 1 spot. :laugh:

Rob

Usually, it's actually the text-decoration:none that is missing. No reason to use vertical-align here.

yellow1912:

Usually, it's actually the text-decoration:none that is missing. No reason to use vertical-align here.

From what I've read text-decoration:none is for links and as no effect on images? If you guys get a chance try linking an image and text in the same href and see the results with firefox :)

Happy new year!

I just performed that test. I set up a new doc with only this in the body...

<div class="test">
<a href="somewhere.html"><img src="someImage.jpg" />Some Text</a>
</div>

...and this in the head...

<style type="text/css" title="text/css" media="screen">
	.test a { text-decoration: none; }
	img { border: 0; }
</style>

The result? The image and text appeared without any underlining below either of them. (And no border on the image, which I do by habit.)

Tested in Firefox, Safari and Opera, in Mac OS X. ALso Firefox and IE8 in Win XP.

Rob

I get your point rstevenson, but how can you have an underlined link with an image next to it, both actually within the same link, but only the text underlined?
So if you make a mouseover on the image or the text, the text should be underlined, but not the image.

Actually none of the solutions shown here work. The idea with the vertical-align: middle doens't really work as someone already mentioned - it only shifts the image down a bit. So if the image has a bit of transparency, it doesn't work at all because you can see the line behind the image (very ugly).

Also for a good design, imho the image should have somehow 4 pixels margin to the text - which should not be underlined! In internet explorer it interestingly works perfectly with just a normal image and link, but not in firefox :-(.

Does someone has a solution for this problem?

I found a workaround to solve the problem which doesn't work perfectly, but best solution I know till now:

Set the text-decoration for the A-Tag to none.
Put a SPAN-Tag only around the text, not the image with class="underline_by_hover".
Set this code in your css-file (or the page-header):

span.underline_by_hover:hover
{
     text-decoration: underline;
}

Now we have the underline only at the text, but arrrwhh if we move over the image - there is no underline. :frusty:
Sure, we could manage that by setting the underline-property of the SPAN-Tag with Javascript, but we don't want to break a butterfly on a wheel, do we? :no:

Remain gratefully in search for help ...

Wadi:

I get your point rstevenson, but how can you have an underlined link with an image next to it, both actually within the same link, but only the text underlined?

The simplest way would be to put the link around the image and the same link separately around the text. Make sure both are classed and apply the none style to the image link and the underline style to the text link.

Rob

Here is the problem I was facing with image underlining in Firefox:

<a href=""><img src="" /><br />Some Text</a>

In other words, classic table layout with text under the image where text should show underline but the image should not.

Here is the solution I am using:

a img	{
		display:	block;
}
a br		{
		display:	none;
}

Perhaps someone else will find it usefull.

Suggestion to use double links is completely wrong because using two links hinders accessibility (10 links become 20 links which you have to tab through if using keyboard for navigation).