need CSS help - linked images wrongly getting link styles

Discussion in 'CSS' started by Pixelrage, Mar 30, 2008.

  1. #1
    This is a general problem with CSS that I have with basically every site I own. Whenever I place an image that is hyperlinked, it inherits the regular link "a:hover" style. So, if I set regular links to be highlighted in black or underlined, then all of the hyperlinked images will also have that style when hovered over. It's so frustrating and I've seemingly tried everything to get it to stop doing this, but nothing works.

    On top of that, sometimes the images move upward a few pixels when hovered over. Worse yet, they REALLY look bad in IE - the entire image turns black, which is the hover value of the regular hyperlinks I use.

    I'd greatly appreciate it if anyone knows how I can stop it from doing this!!!

    For instance, this is what I tried:

    
    a.imglink:link img, a.imglink:visited img {
    border: none;
    }
    
    a.imglink:hover img {
    border: none;
    }
    
    a.imglink:active img {
    border: none;
    }
    Code (markup):
    <img src="http://www.mysite.com/images/image.gif" class="imglink" border="0"></a>
    Code (markup):
    yet, images still display a border when hovered :/ I must have edited this code a million times, trying so many different things, and nothing even shows a result on the live site. There are no other image/link declarations in the stylesheet.
     
    Pixelrage, Mar 30, 2008 IP
  2. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #2
    i just use like this, and works for me always:

    .imglink a {
    border: none;
    margin:0;
    border:0;
    }

    .imglink a:hover {
    border: none;
    margin:0;
    border:0;
    }

    <img class="imglink" src="http://www.mysite.com/images/image.gif" alt="describe image"></a>
     
    HDaddy, Mar 30, 2008 IP
  3. mr_wonderful

    mr_wonderful Peon

    Messages:
    128
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    a.imglink:hover img {border: none;}

    Yea, pretty sure that ^ isn't valid.

    Try:

    .imglink a:link, .imglink a:visited, .imglink a:hover, .imglink a:active {border:0;}

    or

    .imglink a:link {border:0;}
    .imglink a:visited {border:0;}
    .imglink a:hover {border:0;}
    .imglink a:active {border:0;}

    A good thing to remember is that the link-state (a:link) must stay intact.
     
    mr_wonderful, Mar 31, 2008 IP
  4. Pixelrage

    Pixelrage Peon

    Messages:
    5,083
    Likes Received:
    128
    Best Answers:
    0
    Trophy Points:
    0
    #4
    thanks! I'll try both of these suggestions.
     
    Pixelrage, Mar 31, 2008 IP
  5. arwen54

    arwen54 Active Member

    Messages:
    632
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    60
    #5
    wrong wrong wrong!

    all you need is this:

    a img {
    border:none;
    }
     
    arwen54, Mar 31, 2008 IP
  6. mr_wonderful

    mr_wonderful Peon

    Messages:
    128
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #6
    wrong? LOL.
     
    mr_wonderful, Mar 31, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Now now, no fighting. Border: 0 is truly just a shorter way of saying border: none. Border happens to be one of those properties that accepts both. There are others that you cannot use "none" on like background-color (you must use "transparent" for that one).

    I dunno what else you're using the class of imglink for, but if it's only for link properties you don't need it. We all have images in links that we don't want showing up in our images. It's a common problem.

    <a href="foo"><img src="mars.gif"></a>

    This is actually all the html you need.

    
    a {
      border: none; (or 0, whichever floats your boat)
      text-decoration: none;
    }
    a:hover {
      some awesome hover stuff here;
    }
    a img {
      refute the awesome hover stuff here;
    }
    (if the above isnt' enough, you can also add this:)
    a:hover img {
      refute the awesome hover stuff here;
    }
    
    Code (markup):
    But usually we can ignore :hover with images because unless there's a border showing up, the text colour should not affect the image in any way. At all.

    If the above doesn't do the trick, you'll need to post your whole CSS (and maybe HTML if you have any inline styles, cause they'll override any external CSS sheet), because the above works unless something else is overriding it (which is always possible in CSS).
     
    Stomme poes, Apr 1, 2008 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Do we SEE a problem here - you have the class on the image - NOT the anchor. As such a.imglink is targeting nothing. In that case you'd want "a .imglink" - pay attention to the space between them... though as others have said, "a img { border:0; }" should be all you need - though I so rarely ever want borders around images I kill them on ALL images.

    Uhm, that's backwards, the anchor is around the image, not the other way around.

    Oh and SP, yours is wrong too - the border:0; declaration should be in "a img", not "a".
     
    deathshadow, Apr 2, 2008 IP
    mr_wonderful likes this.
  9. mr_wonderful

    mr_wonderful Peon

    Messages:
    128
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #9
    oh whoops, good point.
     
    mr_wonderful, Apr 2, 2008 IP