Hover problem with image links

Discussion in 'HTML & Website Design' started by specialkitty, Nov 20, 2007.

0
  1. #1
    So I've been trying to apply an "a img" and "a:hover img" styling so as to override the "a" and "a:hover" styling since I don't want the text link styling to apply to my image links.

    So I started by writing some simple html:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<link rel="stylesheet" href="global.css" type="text/css"/>
</head>

<body>

<a href=""><img src="image.png" alt="Homepage"></a>

</body>
</html>
    HTML:
    and I used the following styling:


    a{
    color: #006EBF;
    text-decoration: none;
    }

    a:hover {
    color: #fff;
    background-color: #006EBF;
    }

    /* For images */
    img{
    border: 0;
    }

    a img, a:hover img {
    background: none;
    }

    This works just fine in IE7, but when you mouseover the image in Firefox or Opera you end up with a small strip (about 1 to 2px thick) beneath the image. This is not a border, but it's the background styling of the normal "a:hover" tag and not the "a:hover img" tag.

    I've noticed that it works out if I change the doctype from STRICT to TRANSITIONAL (i.e. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">), but I need the doctype to be STRICT.

    Furthermore, I have noticed that if a transparent image is used, the background colour changes to that of the "a:hover" styling and it's not taking into account the styling of the "a:hover img" tag (I want the background to be "none"). This problem exists even when I change it to TRANSITIONAL).

    I am over my head here. This has had me really frustrated. I'd really appreciate it if someone could lend me a hand.

    Thanks,
    -sk
     
    specialkitty, Nov 20, 2007 IP
  2. forelmashi

    forelmashi Peon

    Messages:
    188
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    this is totally just a guess, but did you try img first
    like
    img a

    otherwise you could always just make a class for your non-img links
     
    forelmashi, Nov 20, 2007 IP
  3. specialkitty

    specialkitty Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Well I've tried img a before (in that order), but it didn't do anything.

    I'm currently using a shoddy solution to get around this problem (similar to what you suggested actually). i.e.

    a:hover.image {
    background: none !important;
    }

    and I'm including class="image" in every a link that is an image... this is a way around the problem, but it's just not an elegant/ideal solution.

    Additionally, I'm rather surprised that I haven't been able to find anything about this problem considering that the "a img" method is a common solution.
     
    specialkitty, Nov 21, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Set the display of the images to block inside the style rule where you remove the border. And honestly, why are you embedding the image directly? Would it make sense to use an image substitution technique such as this one instead?

    http://www.pmob.co.uk/temp/navimagereplace.htm
     
    Dan Schulz, Nov 22, 2007 IP