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:

here the link area is outlined and highlighted in blue and the relevant markup is highlighted, too:

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!!!

Glad it worked ;). You’re welcome

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 :))

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:


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: 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 :slight_smile: )

Hi, I’m not sure if I understand you entirely.

You have this setup correct?


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 :))

Dude, you’re the bestest ever! Thanks so much!!!

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 :slight_smile:


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 :wink:

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 :slight_smile:

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).

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.