...

View Full Version : Getting rid of link underline in Firefox?



Mechphisto
02-23-2011, 07:54 PM
On my site I'm putting links around some images, like this page:
http://www.girlscoutsmoheartland.org/pages/shop.php
where the HTML looks like this example:
<a href="/docs/shop/Shop Order Form.pdf" target="_blank"><img src="/images/files_tiny.gif" alt="retail form" width="18" height="19" border="0" align="absmiddle" />Use this one</a> for <strong>printing</strong> and filing out by hand,<br />

The thing is, in Chrome and IE 7 and 8, the little image in the link shows no underline, which is what I want. But in Firefox, there's an annoying underline under the image.
Unfortunately, we want the image next to the link to be linked as well, so I can't just move the image out of the anchor.
Is there some CSS I can use to tell the browser don't underline a linked image?
(I assume "text-decoration: none" would have no effect.)

Thanks for any suggestions!

VIPStephan
02-23-2011, 07:58 PM
The CSS would be to float the image or make it display as block element. However, you can also apply a negative margin to the image to drag it out of the anchor.

Mechphisto
02-23-2011, 08:27 PM
Oh, byu the way:
The link text itself needs to stay underlined! (I'd prefer it wasn't, but I do what my boss says.) Just the image needs to not have the underline (like it shows in IE and Chrome).
Sorry for the confusion. :)

Pepe, the bull
02-23-2011, 08:45 PM
a img {text-decoration: none;}

I think this tells all images in anchor tags to no have underlining, but the text still should. Firefox is blocked at my work, so I can't really check anything.

Mechphisto
02-23-2011, 09:02 PM
a img {text-decoration: none;}

I think this tells all images in anchor tags to no have underlining, but the text still should. Firefox is blocked at my work, so I can't really check anything.

Thanks for the suggestion; unfortunately, that didn't change anything. :(

blue52
02-23-2011, 11:03 PM
a.img {text-decoration: none;}

Mechphisto
02-23-2011, 11:41 PM
a.img {text-decoration: none;}

That was actually the first thing I tried, and it doesn't work. :(
Thanks for the reply, though. :)

Pepe, the bull
02-24-2011, 12:13 AM
You could put the image and the text in two different anchor tags and style them separately. One with underlining and one without.

html:
<a href="/docs/shop/Shop Order Form.pdf" target="_blank" class="nounderline"><img src="/images/files_tiny.gif" alt="retail form" width="18" height="19" border="0" align="absmiddle" /></a><a href="/docs/shop/Shop Order Form.pdf" target="_blank">Use this one</a>

css:
.nounderline {text-decoration:none;}

VIPStephan
02-24-2011, 03:56 AM
Patient: “Why does everybody ignore me?”
Doctor: “Next please!”

Mechphisto
02-24-2011, 03:24 PM
You could put the image and the text in two different anchor tags and style them separately. One with underlining and one without.

html:
<a href="/docs/shop/Shop Order Form.pdf" target="_blank" class="nounderline"><img src="/images/files_tiny.gif" alt="retail form" width="18" height="19" border="0" align="absmiddle" /></a><a href="/docs/shop/Shop Order Form.pdf" target="_blank">Use this one</a>

css:
.nounderline {text-decoration:none;}

Thanks for the suggestion!
That would work, but it would complicate things by requiring me to make sure I link twice which is a. something not easily remembered and b. clutters the HTML a bit. Also, it would mean having to also either put separate style or class attributes into the HTML.
Instead, I just tried as a work-around, putting a -2px margin-bottom in the CSS. Seems to sorta solve that problem, and also puts the image more centered to the text so that's a plus.

Not the most elegant solution, but it has the least side-effects.

Thanks; I appreciate the reply!!

Oh, VIPStephan, sorry I forgot to validate your existence. :) As you can see, I used your negative margin idea, I was waiting to thank you until I had a chance to implement it and give it a good try.

Patient: Why do people find me annoying?
Doctor: Well, you see--
Patient: Nownownow tell me now!
;)

quartzy
02-27-2011, 04:14 PM
I have had a lot of problems with this issue. I find that
a img{
border-style: none;
display: block;
margin: 0 auto;
}

works the best. The display block moves the image to the baseline and so the underline.

Mechphisto
02-28-2011, 03:52 PM
I have had a lot of problems with this issue. I find that
a img{
border-style: none;
display: block;
margin: 0 auto;
}

works the best. The display block moves the image to the baseline and so the underline.

Well, I used:
a img{
border-style: none;
margin: 0 auto;
}
and that seems to be working well enough; thanks. :) If I use the "display: block" I can't have the image on the same line as text, unless I start doing weird things with floats -- and that's just too much complexity to deal with.
Thanks for the suggestion. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum