Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fancybox Iframe bug with internet explorer

I'm getting a bug with Internet Explorer. The iframe doesn't have correct size and it is displayed on the top left of the page instead of the center.

In Firefox and Chrome, everything is working perfectly.

Tried many things but I couldn't find a solution :(

Please help me.

You can see the bug in IE8 here: http://www.ni-dieu-ni-maitre.com/v2/index_v2.php Click link labelled "iframe" on top left

Here's a screenshot of what it looks like:

enter image description here

Here's my code:

<head>
    <script type=\"text/javascript\" src=\"http://www.$domain/scripts/jquery-1.8.2.min.js\"></script>
    <script type=\"text/javascript\" src=\"http://www.$domain/scripts/jquery.fancybox.js?v=2.1.1\"></script>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"http://www.$domain/scripts/jquery.fancybox.css?v=2.1.1\" media=\"screen\" />

    <script type=\"text/javascript\">
        $(document).ready(function() {
            $('.fancybox').fancybox();

            $('.fancybox').click(function() {
                $.fancybox.open({
                    href : 'iframe.html',
                    type : 'iframe',
                    padding : 5,
                    autoScale : false
                });
            });

    $(\".contactbox\").fancybox({

        openEffect : 'elastic',
        openSpeed  : 150,
        closeEffect : 'elastic',
        closeSpeed  : 150,
        closeClick : true,
        'overlayShow'    :    false,
        href : 'contact.php',
        type : 'iframe',
        padding : 5,
        autoScale : true,
        scrolling : 'no'
        frameWidth : 430,
        frameHeight : 380
    });

        });
    </script>

</head>
<body background=\"$background\" id=\"top\">

<a class=\"contactbox\" href=\"http://$domain/contact.php\">Iframe</a>
like image 767
Jon87 Avatar asked Oct 07 '22 09:10

Jon87


1 Answers

Your page is rendered in quirks mode because you don't have a correct HTML DTD declaration.

F12 screenshot

If you bring up IE dev toolbar (F12), you can see it renders correctly in standards modes.

like image 167
Oleg Avatar answered Oct 09 '22 01:10

Oleg