Comments on: Firefox underlining images

By: Ted Swanson

Ted Swanson — Thu, 22 Jul 2010 22:59:29 +0000

billyjacks solultion is the best. shaun's solution, while it works, does not work (as presented) for instances when the image comes AFTER the text. shaun's solution has the added benefit that when hovering over the image the link text STILL lights up (provided you've styled the link text to change colors). additionally, using padding between the image and the link text allows one continuous link when mousing between the text and the image.

By: C. Scott Asbach

C. Scott Asbach — Thu, 25 Feb 2010 20:59:26 +0000

Actually, I had accidentally looked at Chrome instead of Firefox when I thought that worked…(I develop with at least 3 browsers open all th time)

So you can disregard the above, but I did just find what I think is a more elegant solution @ http://www.zen-cart.com/forum/showthread.php?t=116460

a img{vertical-align:middle}

My interpretation is that this hides the underline behind the image, so if you have transparency or something else that might expose the underline again, you might want to go with your original solution.

By: C. Scott Asbach

C. Scott Asbach — Thu, 25 Feb 2010 20:50:11 +0000

The solution that worked for me was:

a:link img{text-decoration:none}

Put that after your other a:link,a:visited,a:hover rules and it should work for you too.

I'd be interested to know if there was a reason this didn't work for somebody.

By: Toby

Toby — Fri, 22 May 2009 15:35:28 +0000

Thank you for this solution! The image-underline thing has been bugging me for a while…

By: Igor

Igor — Wed, 11 Mar 2009 00:05:15 +0000

This is eating image links so here we go again:

[a href=""][img src="" /]Text[br/][/a]

By: Jennifer

Jennifer — Wed, 05 Mar 2008 16:09:53 +0000

Had to add a little more stuff to get it right – but that works – here's what I added:

a.gecko {
background: transparent url(gecko.gif) no-repeat left top;
padding: 0 0 0 38px;
display: block;
height: 32px;
line-height: 32px;
}

(the gecko image is 32px x 32px)

(I've updated the example to include and show this)

By: matt

matt — Wed, 05 Mar 2008 06:32:42 +0000

Give the anchor tag a padding to the left.
Set the background of the anchor tag to the image required, eg

a.example{background: transparent url(gecko_icon.gif) no-repeat scroll left}

By: TaeKwonJoe

TaeKwonJoe — Thu, 11 Oct 2007 01:19:34 +0000

Now try putting two links side by side with
a img {
display:block;
border: none;
float: left;
}
See in FireFox how the icon floats below the first icon? Looking for another solution for this type of scenario

By: Shaun

Shaun — Thu, 29 Mar 2007 14:08:54 +0000

a img {
display:block;
border: none;
float: left;
}

By: billyjacks

billyjacks — Sat, 24 Mar 2007 05:21:09 +0000

There is no pretty way to do this.

A little better than creating double the links would be setting the "text-decoration: none;" for all links, not just the "a img" like you have above. Set a span to underline text and then mark up your link text with that.

It saves you from changing out the url x2 for each instance like in your 2nd example and comment.

This method also gets rid of the ugly underline butting up against your image in IE that gets created when it also underlines the space preceding your nonspace text of the link.

The only down side of this is that you have to wrap all plain old regular link text in that span even on links you aren't using the picture… unless you wanted set classes for your links that didn't have images + text. Like I said, it's probably just a little bit cleaner than making pictures and text each their own links…