...

View Full Version : Link area doesn't line up with image float margin



sfraise
11-08-2010, 09:31 PM
I'm floating a div with 4 images in it, each image is linked to a content page.
The problem is the clickable link area on the images don't seem to move along with the actual image resulting in only a portion of the images able to be clicked on.

Here is the css I'm using to float it:
.nametags {
position:relative;
float:right;
margin-right:75px;
margin-top:-175px;
}

And here is how the html looks:


<a title="Myself" href="/index.php?option=com_content&amp;view=article&amp;id=48:myself&amp;catid=14&amp;Itemid=148"><img alt="Get help for myself" src="/images/Myself.png" /></a>

It doesn't make sense to me why an image wrapped in an a tag wouldn't have the linkable area line up with the actual image.

Only a portion of the bottom of the images can be clicked on, it seems the images are being floated but the link area does not float with them for some reason. If the images aren't floating the entire image can be clicked on as it should be.

Why would the linkable area not float along with image, and how do I fix it?

You can see the images in question at erecoverydev.com, it's the name tag images that the issue is with.

teedoff
11-08-2010, 09:40 PM
I'm floating a div with 4 images in it, each image is linked to a content page.
The problem is the clickable link area on the images don't seem to move along with the actual image resulting in only a portion of the images able to be clicked on.

Here is the css I'm using to float it:
.nametags {
position:relative;
float:right;
margin-right:75px;
margin-top:-175px;
}

And here is how the html looks:


<a title="Myself" href="/index.php?option=com_content&amp;view=article&amp;id=48:myself&amp;catid=14&amp;Itemid=148"><img alt="Get help for myself" src="/images/Myself.png" /></a>

It doesn't make sense to me why an image wrapped in an a tag wouldn't have the linkable area line up with the actual image.

Only a portion of the bottom of the images can be clicked on, it seems the images are being floated but the link area does not float with them for some reason. If the images aren't floating the entire image can be clicked on as it should be.

Why would the linkable area not float along with image, and how do I fix it?

You can see the images in question at erecoverydev.com, it's the name tag images that the issue is with.

Can you provide a link to your page? Or your entire code please.

sfraise
11-08-2010, 09:48 PM
It's www.erecoverydev.com, i left the www out in the first post, wasn't sure on the rules on posting an actual link.

sfraise
11-09-2010, 05:05 PM
Never mind, I figured it out.
Turns out to be a z-index thing, I didn't even think about it since the image was visible so thought it had to be something with the float. Anyway, just set the z-index and all is fine.

DrDOS
11-09-2010, 05:09 PM
It's just a guess, but the invisible background image may be covering up the rest of the link.

teedoff
11-09-2010, 05:21 PM
My God thats alot of divs! lol....you sure it isnt the fact that you dont close your <a> tag AFTER your img src?

They seem to work in IE8 correctly, but not in firefox.

ahhh nevermind..lol I do see your closing <a> tags...sorry I was blinded by all that code..lol



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum