Links within IFrames are unclickable, but only in Firefox

Here’s a bizarre one. Try visiting this website in Firefox, and then in IE:

[url]http://world-8.net/[/url]

Notice the difference? You can’t click any links in the Firefox version. But you CAN hit TAB to move through all of the elements in the page until you reach the link, then hit ENTER to follow the link. It just doesn’t recognize any mouse input.

I kind of already know the reason: our site is built around inline frames, and in order to position those frames exactly where we want them on the page, we nested them within <div> tags, where each <div> has unique properties. (margin-top, margin-left, postion:relative, etc.) One such block might look like:

[CODE]…
<div id=”frame1″>
<iframe src=”page1.html” height=”100%” width=”100%”></iframe>
</div>
…
[/CODE]

And the properties of the individual iframes (“frame1”) are defined in a separate CSS file.

The problem is that the browser treats the <div> and the iframe in such a way that the <div> gets layered on top of the iframe, so even though you can see all of the content within each iframe, your mouse can only interact with the empty <div>. This apparently has something to do with their z-index values. I tried making a quick javascript script that sets all of the div’s z-index values to negative values (making them lower than the z-indexes of the iframes, no matter what those are) and calling that function in the body tag via onload, but no such luck.

Is there a way to manipulate the z-indexes of these iframes nested within divs so that the browser treats the iframes as the “on top” elements instead of the divs, or are there ways to manipulate the positions of iframes (in relative to one another, not by “plotting coordinates” by manually setting pixel values, which would cause all sorts of problems when considering the vast range of browser resolutions) without nesting them within divs at all?

Also in #HTML _↴