I have a page that has a bunch of thumbnail images for a photo gallery at [URL]http://www.fitnessfusionpa.com/photo-gallery[/URL]. If you mouseover the bottom of the images, outside the border, the link seems to extend past the borders of the images. Using Firebug, if I select the <a> tag around the images, it shows at the bottom of the images, and not actually around the entire image (but yet you can click the image and it works fine). How do I get the link to not extend past the bottom border of the images?
@r3plicaMar 21.2011 — #It is working correctly, despite what FireBug says. The problem you have is that you have padding and margins on the image, which is causing the issue you are describing. If you wish the link to be at the very edges of the image itself, then you must remove the padding and margins.
If you want to have the nice border, then consider doing it this way instead:
<i> </i> <style> .image_container { display: block; //Or you can use float: left; border: 1px solid #FF7600; margin: 5px; padding: 3px; }