SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: link layout

  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    link layout

    the images at the following URLs illustrate the problem I'm having, namely that my link areas don't match up with the images that are being linked, despite the fact that the entire image is clickable.

    here the image area is outlined and highlighted in blue and the relevant markup is highlighted, too: http://www.jamestbaker.com/image.png

    here the link area is outlined and highlighted in blue and the relevant markup is highlighted, too: http://www.jamestbaker.com/link.png

    since the entire image is clickable, my real concern is that the link area is lower than the image area. i solved the problem of the space between the image and the border by bordering the image instead of the linked div--but now the problem has come back to haunt me elsewhere.

    the only css applied to links alone is:
    a {
    color: #676767;
    text-decoration: none;
    }

    a:hover {
    color: #00BDF2;
    text-decoration: underline;
    }

    thanks so much!!!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm not sure if I understand you entirely.

    You have this setup correct?
    Code:
    <a><img></a>
    Semi-pseudo code..but yeah you have that? Or something like that?

    Could you provide a link to the page so I can see what's going on (also tell me where)? Or two pages if this is happening on two different pages (you gave two screenshots )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your reply.

    The screenshots are of the same area of the same page and the syntax does indeed follow the pattern of your semi-pseudo-code.

    This isn't the first time I've noticed this issue on my pages and those of others'. The same issue exists with the sitepoint logo at the top left of the homepage. (For instance, it's noticeable if you right-click on it and select "Inspect Element" in Firefox with Firebug installed).

    Of course, I can't answer questions about the sitepoint page but I can about my own. For instance, this is occuring with my own logo at the top left here: http://www.jamestbaker.com.

    Thanks!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, that's because <img>'s are replaced inline elements and since the anchor is just a plain inline element it can't contain the replaced inline element

    Nothing wrong will come from this, though if for some OCD reason you want this fixed, you can give the anchor display:block (to make it block level and contain the <img> or you could float it left (would make it block level )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry! I keep forgetting to mention i'm using the latest Firefox on Windows. The link area doesn't match up in IE8 or Chrome either, though.

  6. #6
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, thanks. never worried about it before but i'm getting overflow for a div which is making my auto scrollbars appear unnecessarily (they scroll about a millimeter and i presumed it was to account for this link).

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you are getting scrollbars then it's most likely not the result of this behavior (though if the actual image is too wide then yes it will cause scrollbars.

    I'd need to see a page to give my diagnosis

    Why not just remove overflow:auto?

    If you are doing overflow:auto to contain floated elements, then I'd recommend just making it overflow:hidden (does the same job but no worrying about scrollbars
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, you were right. i was trying to do as much of the sleuthing on my own as possible but now i've run out of ideas.

    currently, the link I'm concerned about contains the image. additionally, the image file, the relevant img tag's height attribute, the link, and their containing div are all the same height. however, the vertical scrollbar still appears and i can scroll through about a millimeter of visually-blank space below the image.

    the link is here: http://www.jamestbaker.com. below the "in the past" text, click on "cornell university" on the left. in the lower left of the 'popup' is the image that is scrolling unnecessarily.

    (the reasons for the {overflow-y:auto} relate to some javascript and php functions that would take a while to explain. even if i didn't need this set up this way, i'd still like to learn why an image, link, and div all the same height can produce this scrolling effect )

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you indeed set 270px height (to match the container), however images have by defeault a few extra pixels left under them to leave room for text descenders.

    Remove that by setting the vertical align
    Code:
    img{vertical-align:bottom;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dude, you're the bestest ever! Thanks so much!!!

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked . You're welcome
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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