Safari: IFRAME nested in table

[jstakel]

Debugging a page at:

http://www.triwisconsin.org/2005.html

If you view this page in Safari, you'll notice the lower right quadrant is a big red, blank square. However, there's an IFRAME element there, as the sole bit of content within a table cell, that isn't showing. It's width and height are both set to 100%.

Some debugging has led me to believe that Safari considers the dimensions of the IFRAME element to be 0, when width and height are set to percentages. If I change the width and height to pixel dimensions, then the IFRAME shows, at those dimensions, and the background of the table cell shows as planned. If I add other content to the table cell which contains the relatively-dimensioned IFRAME, then that content shows up and the table cell expands just enough to contain this content.

Anyone know how to format an IFRAME (with CSS and/or HTML) and a containing table so that it is dimensioned to the mx of the containing block? I figure I can do it with javascript but I'd rather use that as a last resort.

Thanks!

Best,
John

[PeOfEo]

Try something like this:

style="position:absolute; top:0px; left:0px; right:0px; width:auto; height:500px;"

The reason why you are going to need to specify a height is because IE and other browser act very differently towards stretching elements vertically on the page. I had a cleaver hack to allow for min height of content, but it no longer works with newer version of mozilla*.

The code I gave you is what I think will do it. If it fails I play around with the code and try to get it to work. I am going to have to use a mac viewer site though because I am on a pc.


*I came up with this beautiful manipulation of owen's hack and now It will no longer work due to changes in mozilla source code with the release of firefox.


ps: your best bet for accessibility is ditching the iframe.