CSS - Tough One For Me...

I am adding an <a> around an image within a floated <li>. Thing is by adding the <a> the image seems to have been "stretched" to take up more space in it's container. I do not know if this can be styled "back" or if it's more fundamental. It might be http://acdor.barleytwist-services.c...d=90&Itemid=205 in FFox firebug but here is the html:

<div class="galleryItemBox">
<div class="galleryItem">
<ul>
<li class="pic">
<p>
<a class="advert" target="_self" href="http://www.barleytwist-services.co.uk">
<img width="170" height="170" title=" Advertisement" alt=" Advertisement" src="http://<mydomain>/images/stories/adverts/btsAdvert.png"/>
</a>
</p>
</li>
</ul>
</div>
</div>

AND the CSS:

.gallery{overflow:hidden;margin:5px 0 0 0;padding:0;min-width:400px;}
.galleryItemBox{overflow:hidden;float:left;width:33.3%;}
.galleryItem{height:180px;margin:0 auto;width:180px;border:1px solid #f0027f;}
.galleryItem ul{position:relative;list-style-type:none;margin:0;padding:0;}
.galleryItem li.title{height:15px;left:4px;overflow:hidden;position:absolute;text-align:center;text-transform:uppercase;top:2px;width:171px;}
.galleryItem li.pic{position:absolute;left:5px;top:5px;}
.galleryItem li.link{position:absolute;left:4px;top:162px;width:171px;height:15px;text-align:center;}
.pic p{text-align:center;}
.clear{clear:both;}
a.advert {color:#000;}

Thanks for your time.