scriptygoddess

1 | piniyini

February 22nd, 2007 at 4:53 pm

heres what u gotta do, when u add a character have another link for it (that way you'll have two links, one for the image and one for the text) and when u have it for the image sure there are no spaces

2 | Jennifer

February 22nd, 2007 at 5:06 pm

That's what I'm doing in the second example (when it *doesn't* show up. But with the idea of wanting to simplify things, I wanted to keep it as one anchor tag. (And actually spaces don't matter – it's adding a character that causes the problem). When I discovered the problem, I was creating a page where these links that may change on a regular basis… and while it's only two links each time… imagine that x50 links or so… it really becomes a pain for something that just doesn't make any sense.

3 | xrestassuredx

February 26th, 2007 at 10:15 am

This might be a useful trick, depending on how you plan to use it.

On the assumptions that this is some sort of menu with a certain number of link images that are reused, and the link icon (and its alt-text) are not crucial content, it might be easier to display the images with css and then only have to change each link once.

For example:

a.geckolink {
line-height: 36px;
padding-left: 36px;
padding-top: 20px;
background: transparent url(gecko.gif) no-repeat center left;
}

and then:
Test

This shows up properly in FF and IE, although it can get a bit hacky if you're using differently sized or large images, and can cause display problems in FF with decreased display font sizes. It does also allow you to easily create new links with the same image, if that's your intent.

Hope that helps.

4 | billyjacks

March 23rd, 2007 at 10:21 pm

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…

5 | Shaun

March 29th, 2007 at 7:08 am

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

6 | TaeKwonJoe

October 10th, 2007 at 6:19 pm

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

7 | matt

March 4th, 2008 at 11:32 pm

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}

8 | Jennifer

March 5th, 2008 at 9:09 am

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)

9 | Igor

March 10th, 2009 at 5:05 pm

This is eating image links so here we go again:

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

10 | Toby

May 22nd, 2009 at 8:35 am

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

11 | C. Scott Asbach

February 25th, 2010 at 1:50 pm

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.

12 | C. Scott Asbach

February 25th, 2010 at 1:59 pm

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.

13 | Ted Swanson

July 22nd, 2010 at 3:59 pm

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.

14 | DanShea

February 16th, 2012 at 10:06 am

billyjacks you had the easiest and least intrusive solution.

just wrap a span around text you want the underline applied to and the rest has no underline.

Cheers!

sample:
a:hover span{ text-decoration:underline}

[a href="#"][img src="some.png"][span]Text[/span][/a]