Question

This is really weird and can’t seem to understand it. I have a header fixed position so it always stays at top of the screen and for some reason this is causing fancybox not to open..here’s my code:

css

 #header{background:#fff; width:100%; height:80px; margin:0; padding:0; position:fixed; top:0;}

fancybox jquery(latest version 2):

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".various").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
        });
    });
</script>

html

<div id="header">
    <div class="content">
    <img src="img/logo.png" align="left" alt="CSL Peru" />
    <div class="clear"></div>
    </div>    
</div>
    <!--end HEADER-->
<div id="container">
         <a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
    </div>

when i take “position:fixed” out then it works again but breaks my whole design..

Answer 1

Take a look in Firebug to the actual code when the fancybox gets appended. It might add a #header id to one of its wrappers as well