Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post

    Question Getting rid of link underline in Firefox?

    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!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,672
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    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.

  • Users who have thanked VIPStephan for this post:

    Mechphisto (02-24-2011)

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post
    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.

  • #4
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Code:
    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.
    Pepe, the bull

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Pepe, the bull View Post
    Code:
    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.

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    76
    Thanks
    10
    Thanked 0 Times in 0 Posts
    a.img {text-decoration: none;}

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by blue52 View Post
    a.img {text-decoration: none;}
    That was actually the first thing I tried, and it doesn't work.
    Thanks for the reply, though.

  • #8
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    You could put the image and the text in two different anchor tags and style them separately. One with underlining and one without.

    html:
    Code:
    <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:
    Code:
    .nounderline {text-decoration:none;}
    Last edited by Pepe, the bull; 02-23-2011 at 11:16 PM.
    Pepe, the bull

  • Users who have thanked Pepe, the bull for this post:

    Mechphisto (02-24-2011)

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,672
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Patient: “Why does everybody ignore me?”
    Doctor: “Next please!”

  • #10
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Pepe, the bull View Post
    You could put the image and the text in two different anchor tags and style them separately. One with underlining and one without.

    html:
    Code:
    <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:
    Code:
    .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!

  • #11
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    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.

  • Users who have thanked quartzy for this post:

    Mechphisto (02-28-2011)

  • #12
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by quartzy View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •