Question:how do i get rid of the space shown in first image?more info and code:i have a list of contacts that i want arranged on above the other. when the user mouses over the contact's name, a contact card pops up. on the contact card, i want to have an e-mail icon.when the email icon is in the right top corner - there are no problems. however, when i add padding to move it to the bottom right corner of the contact card, a weird space appears between the contact names when the page first loads. however, after i mouse over and the contact card appears, the weird space disappears and the contact list appears the way i want it to appear - here are some images to help:as soon as the page is loaded(with padding-top set):
after i mouse over the contact (onmouseover onmouseout events called):
what the contact card looks like when the list first loads properly:
how i want the contact card to appear:
here is my code:html:\[code\]<div id="ballboarder"> <div id="thisisatest" onmouseover="showIt('/images/em.png', 'jerryJustice')" onmouseout="hideIt('jerryJustice')" > <img src="http://stackoverflow.com/images/bluesquare.png" height="15" width="15" ></img> Jerry Justice <img src="" id="jerryJustice" style="margin-left: auto; overflow:hidden; padding-top: 20%" onclick="showIt('/images/card22.png', 'jerryJustice2')" onmouseout="hideIt('jerryJustice2')"> <img src="" id="jerryJustice2" style="display:none"></img> </br> </div>... other contacts</div>\[/code\]css:\[code\]#thisisatest:hover{ width:250px; height:150px; padding-top:10px; background-position: center; margin-left: auto; margin-right: auto; text-align: center; overflow:hidden; background-image:url('/images/contactcard.png');}#ballboarder{ width: 100%; }\[/code\]