Слишком большая кликабельная область под изображением ⇐ Html

[Anonymous]

Я понятия не имею, почему под каждой миниатюрой моей галереи есть кликабельное пространство. Если я использую float:left в pcs div, то лишняя кликабельная область исчезает, но фон тоже исчезает. Нигде не могу найти ответ. Я новичок в веб-дизайне. Ваша помощь очень приветствуется.
HTML



var obj = document.getElementById("rect");
obj.style.width = screen.availWidth / 1.2509 + 'px';
obj.style.left = screen.availWidth / 10.50769 + 'px';

• Pradžia
  
• Galerija

var obj = document.getElementsByClassName("pic");
var size = obj.length;
var wdth = (parseInt(document.getElementById("rect").style.width) - 800) / 8;
for(var i = 0; i < size; i++)
{
obj.style.margin = wdth - 2 +'px';
};



$(document).ready(function() {
$(".fancybox").fancybox();
});





CSS
#rect
{
margin: 0px;
padding: 0px;
position:absolute;
top:0%; left:130px;
width:1092px;height:100%;
}

#logo
{
background-image: url(em.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;
height:247px;
margin:0px;
padding:0px;
}

#menu ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
padding-top: -20px;
padding-bottom: 0px;
}

#menu ul a
{
margin: 0px;
padding: 0px;
float: left;
display: inline;
width: 50%;
background-image: url(h_b1.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
position:relative;
text-align: center;

}

#menu ul a li
{
margin: 0px;
padding: 0px;
font-size: 18px;
color: #300;
}

#vertical_div
{
margin:3px;
width:3px;
background-color:silver;
}

#text
{
width: 600px;
}

.pic
{
display:inline;
}


Подробнее здесь: https://stackoverflow.com/questions/182 ... elow-image