Margin and Link Problem

[almo136]

Hi,

I have the below code which shows an image with a link. This works fine in FF but in IE7 the margin is counted as part of the link. ie. If I click somewhere in the left margin it will take me to page1.html

Anyone know how to fix this?

Thanks!

<a class="medialinks" href="http://page1.html"><img src="/images/image1.png" /></a>

.medialinks {
margin-left: 50px;
}

[UniverseBoard]

not sure about the solution

but you might want to try to put the "class" tag into <img>

[almo136]

Adding the class to the img tag didn't work.

after some more googling I found a site with a few solutions.

I settled for adding:
display: inline-block;

I would link to the page showing the issue and explaining different fixes but not sure if I'm allowed to?

[rocknbil]

If I click somewhere in the left margin it will take me to page1.html

Before committing to the inline-block, try this:

.medialinks { border: 1px solid #ff0000; }
.medialinks img { border: 1px solid #00ff00; }
....

<a class="medialinks" href="http://page1.html"><img src="/images/image1.png" /></a>

See if the borders reveal anything about your problem. Is padding somewhere pushing the link beyond where you'd expect it to? Is there some other selector in .medialinks causing it to be wider than the image (or something?) You might be able to fiddle with padding and margins to get it to go away.