Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    175
    Thanks
    3
    Thanked 1 Time in 1 Post

    Link area doesn't line up with image float margin

    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:
    Code:
    <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.
    Last edited by sfraise; 11-08-2010 at 08:38 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by sfraise View Post
    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:
    Code:
    <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.

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    175
    Thanks
    3
    Thanked 1 Time in 1 Post
    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.

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Posts
    175
    Thanks
    3
    Thanked 1 Time in 1 Post
    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.
    Last edited by sfraise; 11-09-2010 at 04:16 PM.

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,089
    Thanks
    15
    Thanked 246 Times in 246 Posts
    It's just a guess, but the invisible background image may be covering up the rest of the link.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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
    Last edited by teedoff; 11-09-2010 at 04:25 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •