Making iframe's CSS completely independent from parent frame

Question

context: I am loading an S6 slideshow from my web page inside an iframe loaded in a fancybox. The code in my parent web page is

<a id='presentation' href='/my/server/my-big-presentation?iframe'>
    Launch presentation
</a>

<script type="text/javascript">
$(document).ready(function() {
    $("a#presentation").fancybox();
});
</script>

I am experiencing two problems --

1. The presentation is not firing once the iframe is loaded. I reckon that is because of race conditions. I have added the following code in the presentation web page, and that seems to help some in Firefox, but doesn't work in Safari. In any case, it seems fragile.

   <script type="text/javascript">
   $(document).ready(function() {
       setTimeout(S6.init, 100);
   });
   </script>
   

   What alternative do I have to make the above more robust?

2. This is a more pernicious problem. Seems like once the iframe is loaded in the fancybox, its CSS is conflicting with the parent page's CSS. Put another way, the parent and the child CSS are still affecting each other as they are loaded in the same parent browser window. Some symptoms, such as one CSS definition over-riding the other, can be worked around with pseudo-namespaces (by the way, any pointers to good tutorials on that would be very helpful). The one problem that is making my life quite difficult is that absolute positioning inside the iframe is getting positioned relative to the browser window. So, for example, a CSS code such as #div {position: absolute; right: 0; bottom: 0;} is getting placed at the bottom right of the browser window instead of the bottom right of the iframe. What can I do?