CODEWITHSUNDEEP
htmlcssxhtmlhyperlinkimage
Brownbay
Brownbay

Reputation: 5500

Why does the <a> tag sit BELOW an <img> on screen (Firefox 4 + Chrome only!)

I'm not sure if this is a glitch/quirk in the latest Firefox and Chrome, but I've got a <img> tag that's been encapsulated by an <a> tag to turn the image into a link.

The problem arises in that the click box for the link sits below the image. The image is also clickable, but the dead space under the image is clickable as well.

The <img> has a left and bottom margin rule applied to it, which I think is what's causing the issue, but I don't understand why... I've also tried using explicit </img> closing tags as that didn't solve the issue either.

Internet Explore 8 works as expected! Does not display the issue below. It shows the box below the image, but the dead space is not clickable in IE 8. Which is how I think it should work.

Here's an image to clarify what I mean: Image

I've just added a rule to border all <a> tags.

And here's the code... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    a
    {
        text-decoration: none;
        border: 1px solid #F00;
    }

    #testimg        {
        margin-left: 20%;
        margin-bottom: 25px;
    }
</style>
</head>
<body>
<div><a href="#"><img id="testimg" alt="" src="imgs/landing/popup_sendbtn.png" /></a></div>
</body>
</html>

This is driving me crazy! Any help would be appreciated.

Upvotes: 1

Views: 353

Answers (2)

BoltClock
BoltClock

Reputation: 723538

The clickable area beneath your <img> is where textual content would supposedly go in an <a> element.

If you want only the image area to be clickable, give your <a> the same width and height, make it display: block, and move your margins to the <a>.

a {
    display: block;
    width: /* width of your image */;
    height: /* height of your image */;
    text-decoration: none;
    margin-left: 20%;
    margin-bottom: 25px;
    border: 1px solid #F00;
}

Upvotes: 1

Craig White
Craig White

Reputation: 13992

You have a margin in the img. Move them to the a tag and it might fix it.

Upvotes: 3

Related Questions