How can I stop adobe reader in IE7/8 bleeding through my jQuery UI dialogue?

Question

I have a simple setup with http://denishoctor.me/readertest.html (code below aswell). The button opens a dialogue over an embeded pdf. This is fine in everything but IE6/7/8.

Does anyone know how to stop this?

Thanks, Denis

<button type="button">Click Me</button>

<iframe id="iFrameResponse" style="margin-left:250px;height:500px;width:100%" src="http://knowwheretheygo.org/media//static/content/sample.pdf"></iframe>

<div id="InformationDialog" style="display: none;">This is my info</div>

<script type="text/javascript">
  $(document).ready(function() {
      $( "#InformationDialog" ).dialog( {
          title: "Information",
          autoOpen: false,
          hide: "slide",
          show: "slide",
          width: 225,
          position: [100,125],
          height: 400
      } );

      $("button").click(function() {
        $("#InformationDialog").dialog('open'); return false; 
      });
   });
</script>

UPDATE: I've found http://groups.google.com/group/jquery-ui/browse_thread/thread/66c7d2d31feedea9?fwc=1. WHich talks about http://brandonaaron.net/code/bgiframe/docs/. Anyone know what changes would be required to get it to work in IE for PDFs, as mentioned?

Answer 1

OK so of course this isn't ideal but it works and the I've not seen anything else. Also only do this to IE6/7/8, and don't punish the good browsers out there:

Stick an iFrame under the popup and above the PDF. With dragging and resizing turned off for a jQueryUI Dialog this works great. With them turned on there seems to be some flicking due to what I assume is repaints and position.

Example can be found @ http://denishoctor.me/examples/iframepdf/test.html