Hi guys,
I have a div container which I am displaying when hovering over a link:
My div is:
<div id="uniquename" style="display: none; position:absolute;
height: 155px; width: 400px; border: 2px solid #666;float:none; clear:both; background-color: white; z-index: 10; padding: 5px;">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td
style="width: 100px; height: 49px; font-size: 75%;"><img
width="91" height="36" border="0"
src="pastedGraphic.gif" /></td>
<td> </td>
<td style="padding: 3px 10px; font-size: 75%">On Visa, MasterCard
and Discover cards,etc.</td>
</tr>
<tr>
<td style="font-size: 60%;"><b>Visa, MasterCard and Discover</b></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td
style="width: 100px; height: 49px; font-size: 75%;"><img
width="91" height="36" border="0"
src="PastedGraphic2.gif" /></td>
<td> </td>
<td style="padding: 3px 10px; font-size: 75%">On American Express
cards, etc.</td>
</tr>
<tr>
<td style="font-size: 60%;"><b>American Express</b></td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
The link which triggers the mouseover event is:
<a id="cvv" style="float:right;" onmouseover="ShowContent('uniquename'); return true;"
onmouseout="HideContent('uniquename'); return true;" href="#">[show/hide]
</a>
The java script:
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
The problem is that while it works just fine in firefox, the displayed div flickers when i move my cursor over the link.
Is there a way to fix this issue? Please help.
Thanks.