Take the 2-minute tour ×

I'm working on an homepage with this html/css: http://jsfiddle.net/2qWYf/5/

I can't figure out why the shadows I applied to the images are start to showing some pixels under the image bottom line.

In the right side instead it's ok (!?!) Why?

How to fix this?

Many thanks, Alessandro

share|improve this question
add comment

3 Answers

That is because you are applying the shadow to the element that surrounds the image (and the link), and that is the size of that element.

The reason, in turn, why that element is that size, is because the image is an inline element which is placed on the base line of a text block. The space below the image is the gutter below the baseline for hanging characters like g and j.

The most stable way to handle this is to turn the images into block elements:

.homepageimage img { display: block; }

(The surrounding anchor element is already a block element as you have applied float: left; to it, otherwise you would need to turn that into a block element too.)

share|improve this answer
Great fix! Thank You very much! –  Alessandro Jul 16 '11 at 11:15
add comment

Add line-height: 0px to .homepageimage a (demo).

share|improve this answer
@Matt Ball - Not everything in the world needs a demo! :) –  zyklus Jul 14 '11 at 23:54
Lies, damned lies. And statistics. –  Matt Ball Jul 15 '11 at 0:42
Why was this down-voted? –  zyklus Jul 16 '11 at 5:26
Ah crap, my profile says I downvoted you, but I don't even remember doing so (or see any reason why). Might have been an accident, apologies. –  Duopixel Jul 17 '11 at 5:10
@Duopixel - lol –  zyklus Jul 17 '11 at 5:36
add comment

There are probably many ways to fix this, however, two stand out for me:

Simply add a height of 200px to .homepageimage. Example:

.homepageimage {
    height: 200px;

...or add margin-bottom: -3px; to .homepageimage a. Example:

.homepageimage a {
    text-decoration: none;
    float: left;
    margin-bottom: -3px;
share|improve this answer
Downvoter: Mind letting me know what's wrong? –  Shaz Jul 14 '11 at 23:50
I didn't down-vote, but this is a hack that isn't guaranteed to work should other things be changed (like body font size) –  zyklus Jul 14 '11 at 23:52
@cwolves: Using the "height method" seems to work properly, even with a font change –  Shaz Jul 14 '11 at 23:57
That wasn't there before! :) Still not a great solution since it relies on the image being 200px tall. Better to fix the problem than to patch it –  zyklus Jul 15 '11 at 0:01
add comment

Your Answer


