Safari CSS issues

[johnnystorm]

I'm attempting to integrate reCaptcha into my site and am having
issues in Safari (3.1.2)

my page is made up of three parent divs:

#header
#wrapper
#footer

When I add recaptcha to the #wrapper div, it causes a 14 pixel gap to
appear between wrapper and footer

I have a screen cap here:

http://www.johnnystorm.com/images/gap.jpg

Thanks

[johnnystorm]

While inspecting the elements in safari I found this a specific iFrame
that is being generated for Safari that might be causing the problem:

// safari
if (navigator.userAgent.indexOf("KHTML") > 0) {
var iframe = document.createElement('iframe');
iframe.src = "about:blank";
iframe.style.height = "0px";
iframe.style.width = "0px";
iframe.style.visibility = "hidden";
iframe.style.border = "none";
var textNode = document.createTextNode("This frame prevents back/
forward cache problems in Safari.");
iframe.appendChild(textNode);
document.body.appendChild(iframe);
}

[johnnystorm]

Yup, that's the problem alright. I set the User Agent of Safari to
Firefox and the issue went away... now the issue is how to get the
iframe into the content div because right now its coming up:

<div id="wrapper"></div>
<iframe>
<div id="footer"></div>

[johnnystorm]

Well, since I seem to be the only one having the problem, I fixed it,
rather inelegantly, by adding the following to my css styles:

body iframe {display:none;}

This successfully hides the iFrame and gets rid of the gap, however, I
then had to add CSS styles for all of my banner ad iFrames:

#ad iframe, #skyscrapper iframe { display:inline; }

Again, not the most elegant solution... if anyone from reCaptcha is
reading this, adding a specific id to the safari specific iframe would
be great.

ie:

<iframe id="recaptcha_safari" style="border: medium none ; height:
0px; width: 0px; visibility: hidden;" src="about:blank">This frame
prevents back/forward cache problems in Safari.</iframe>

Then I could just use:

#recaptcha_safari { display:none; }