Image link block takes up whole width of the page

Question

I have a main div as a container with a width of 90%. Inside at the top, I have a title (image) with height: 5em, display: block, and margin: auto.

My HTML code is set up like so: <a href=""><img scr=""></a>.

When I click way to the left of the picture, I am still able to click on the link. I am using Chrome for this. I tested this in Safari and Firefox; same result. IE and Opera only registered the link when my mouse was directly over the picture (which is what I want). I'm hoping I can get what I want in all browsers. Thanks.

Edit: Here's an example: http://jsfiddle.net/Bionicrm/dXaAF/.

Answer 1

http://jsfiddle.net/derekstory/K7Vwd/

You can put a wrapper around the entire thing specifying the size you want shown:

Example:

HTML

<div id="wrap"> <a id="test" href="test.com">
        <div id="image">

        </div>
    </a>
</div>

CSS

body, html {
    height: 100%;
}
#test {
    height: 200px;
    width: 200px;
}
#image {
    background: #000 url("http://www.veterinarian.com/uploads/cms/20100622/4c212d6c1ca11.jpg");
    height: 100%;
    width: 100%;
    background-size: 100%;
}
#wrap {
    width: 200px;
    height: 150px;
}

Answer 2

Try giving the link these styles

display:block;
width:100px; //or whatever you want
height:5em;
position:relative;
margin:auto;