Error wrapping an image in an <a> tag for lightbox

Question

I'm running a wordpress site that has a thumbnail gallery feature. Each thumb is inside an <a> tag so that the full image pops in a lightbox. The problem is that, for some reason, the a zone is behind the image and only 16px high (the thumb is 96 x 96). I can't see anything in the css that is causing this.

An example of this can be seen here

<a rev="http://www.pinksandgreen.co.uk/wp-content/uploads/2010/09/WALDE-XC14_1-200x200.png" class="wpscimg" rel="lightbox Funky paper mache deer heads" href="http://www.pinksandgreen.co.uk/wp-content/uploads/2010/09/WALDE-XC14_1.png">
    <img width="96" height="96" src="http://www.pinksandgreen.co.uk/wp-content/uploads/2010/09/WALDE-XC14_1-96x96.png" class="attachment-gold-thumbnails" alt="WALDE-XC14_1">
</a>    

I can't seem to do anything to alter the height of the through HTML or css and it's driving me mad!

Answer 1

Yeah, kind of. You can click the whole image, right?

It's because an anchor is by itself an inline element. If you really want it to be as wide/high as the image (the only reason why that's totally necessary is when you want to give styling to the a) let it be an (inline-)block:

a.thumbnail-a { display: inline-block; }
/** OR **/
a.thumbnail-a { display: block; }

Answer 2

You need to change the size of the links.

.wpscimg {
  display: block;
  float: left;
}

and the result will be: