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>
Here’s the link and div:
<a onmouseout=”hidePopup(‘test2’)

” onmouseover=”showPopup(‘test2’)” href=”#” id=”tester1″>link</a></span>
<div class=”popup” id=”test2″>Test title</div>
And, finally, here’s the css that makes all the difference:
.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;}
It turns out that Firefox had it right, but I just needed to specify what display setting it would have. Since the div was absolute, it floats above the parent div, not relative to it. So, you have to specify “display: inline;” to make sure your popup shows up in the right spot.

About admin