Div floats left in Firefox but fine in IE

I have a page with hyperlinks that simply popup content. I used a javascript code to mave a div with the content visible onmouseover and hidden onmouseout. There was a problem, however. In firefox, the div would pop up as if it were floating left (regardless of the absolute positioning and text-align settings. I couldn’t find the solution anywhere on the web, so when I figured it out I thought I’d share:

Here’s the javascript that goes in the head tag:

<script language=”javascript” type=”text/javascript”>
function showPopup(popup){
var popup1 = document.getElementById(popup);

var link1 = document.getElementById(‘tester1′);
popup1.style.visibility=’visible’;
}
function hidePopup(popup){
var popup1 = document.getElementById(popup);
popup1.style.visibility=’hidden’;
}
</script>

<a onmouseout=”hidePopup(‘test2’)

” onmouseover=”showPopup(‘test2’)” href=”#” id=”tester1″>link</a></span>
<div class=”popup” id=”test2″>Test title</div>

.popup {position:absolute; display:inline; margin-left:20px; margin-top:-100px; z-index:100; padding:20px; border:solid 1px #7D4739a; visibility:hidden; width:300px; font:Arial;}