Query:
Is there a way to remove the space shown in the first image?
Additional Information and Code:
I am working on displaying a list of contacts one above the other. When a user hovers over a contact's name, a contact card appears with an email icon. Everything works fine when the email icon is positioned in the top right corner. However, if I add padding to move it to the bottom right corner, a strange space appears between the contact names when the page initially loads. Once the user hovers over and the contact card displays, the space disappears and the contact list looks as desired.
Here is my code: HTML:
<div id="ball">
<div id="thisisatest" onmouseover="showIt('/images/em.png', 'tomJustice')" onmouseout="hideIt('tomJustice')" >
<img src="/images/bluesquare.png" height="15" width="15" ></img> tom Justice
<img src="" id="tomJustice" style="margin-left: auto; overflow:hidden; padding-top: 20%" onclick="showIt('/images/card22.png', 'tomJustice2')" onmouseout="hideIt('tomJustice2')">
<img src="" id="tomJustice2" style="display:none"></img>
</br>
</div>
... other contacts
</div>