WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Not Working in Internet Explorer? (14 posts)

  1. jmcgill
    Member
    Posted 3 years ago #

    I really like the plug-in and it works wonderfully on my draft home page in FireFox, but displays a blank screen when testing in Internet Explorer.

    See http://www.quantapoint.com/test2/ and click on the small image in the first tab.

    Any help is greatly appreciated!

    http://wordpress.org/extend/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    Looking at the source code of your page, I notice that the code starts with :

    <!--[if IE]>
    	<style type="text/css">
    		#fullcontentwrap {display:table;height:100%}
    		#quotearea {height: 140px;}
    		#footer {margin-top: -20px;}
    	</style>
    <![endif]-->
    
    <!--Updated Home page-->
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    
    <head profile="http://gmpg.org/xfn/11">

    I that is likely to cause problems. Please move EVERYTHING (including all blank lines) that is currently above <!DOCTYPE... to BELOW the <head... line.

  3. jmcgill
    Member
    Posted 3 years ago #

    I have made the change as requested, but still have the same issue.

  4. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    The source code still looks the same from here... Open the page in IE and right-click on an empty part like left or right of the main content. Select "View source..." (or similar, in your language) and tell me what you see at the top of the document that opens in Wordpad.

  5. jmcgill
    Member
    Posted 3 years ago #

    My apologies, I had not committed the update. It is now changed, but with the same white window.

    The first several lines of the source are below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

    <head profile="http://gmpg.org/xfn/11">

    <!--[if IE]>
    <style type="text/css">
    #fullcontentwrap {display:table;height:100%}
    #quotearea {height: 140px;}
    #footer {margin-top: -20px;}
    </style>
    <![endif]-->

    <link rel="icon" type="image/png" href="http://www.quantapoint.com/v2/favicon.png">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title> » TEST2 - Digital Facilities™ that Improve Safety and Decision-Making for Building, Managing and Upgrading Facility Assets</title>

    <meta name="generator" content="WordPress 3.0.5" /> <!-- leave this for stats -->
    <meta name="description" content="Quantapoint - Laser Scanning Technology and Services for Zero-Defect Projects" />
    <meta name="keywords" content="Quantapoint - Digital Facilities™ that Improve Safety and Decision-Making for Building, Managing and Upgrading Facility Assets" />
    <link rel="stylesheet" href="http://www.quantapoint.com/v2/wp-content/themes/qptheme/style.css" type="text/css" media="all" />
    <link rel="alternate" type="application/rss+xml" title="Quantapoint RSS Feed" href="http://www.quantapoint.com/feed/" />
    <link rel="pingback" href="http://www.quantapoint.com/v2/xmlrpc.php" />
    <script type="text/javascript" src="http://www.quantapoint.com/v2/wp-content/themes/qptheme/sleight.js"></script>
    <style type="text/css" media="screen">

    </style>

  6. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    It's weird... I do not see any errors in console nor in the FancyBox markup. So I'm guessing the problem stemms from somewhere else. If you open http://validator.w3.org/check?uri=http%3A%2F%2Fwww.quantapoint.com%2Ftest2%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 you will notice there are a lot of XHTML errors. Please take care of the first two (marked with a red X button) to see if that will take away many of the other errors there. And hopefully get the FancyBox working in IE too.

  7. jmcgill
    Member
    Posted 3 years ago #

    I corrected the two "x"'s, but the other problems are still listed. It looks as if it is mis-interpreting the JavaScript as errors.

    Unfortunately, this did not fix the issue. I really do appreciate your time and efforts.

  8. jmcgill
    Member
    Posted 3 years ago #

    Note that I inspected the fancybox using the Firebug plug-in and it looks as if the image name itself is not being passed (when compared to FireFox).

    I will re-enable for the page, if this will help you.

  9. jmcgill
    Member
    Posted 3 years ago #

    In Firebug, I am getting an "Access to restricted URI denied." for the Fancybox script. I looked it up at http://jquery-howto.blogspot.com/2008/12/access-to-restricted-uri-denied-code.html, but am not sure what it means.

  10. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    That "Access to restricted URI denied" error is supposed to prevent cross-site scripting. I have no idea why IE thinks there is something like that going on.

    It looks as if it is mis-interpreting the JavaScript as errors.

    I noticed that too. You can prevent that in the following way. Wrap all javascript like this:

    <script type="text/javascript">
    /* <![CDATA[ */
    ... (all javascript here) ...
    /* ]]> */
    </script>

    My plugin does this already for it's own code but if you can make that happen for the other scripts in your header, we should get rid of most of the 170 errors... And hopefully closer to discovering what's going wrong.

  11. touchnova
    Member
    Posted 3 years ago #

    Ok, not sure if I'm interpreting properly where your problem is occurring, but try adding this to your stylesheet:

    #fancybox-content img {
        visibility: visible !important;
        }

    What's happening is IE is picking up some weird style that is forcing the image within the overlay to have a visibility: invisible;...which is hiding your pics. As soon as I delete that line, they appear in IE. Test it out and let me know what you come up with.

  12. touchnova
    Member
    Posted 3 years ago #

    Oh yeah, I guess you could use this too:

    #fancybox-content img {
        visibility: inherit !important;
        }

    Visible vs. inherit...in your case it won't make much difference, the results should be the same. Good luck!

  13. jmcgill
    Member
    Posted 3 years ago #

    That did it!

    I spent hours researching and trying different things. I am very grateful for your help!

  14. touchnova
    Member
    Posted 3 years ago #

    Glad to hear man. While the Developer Toolbar for IE is no comparison to Firebug, it does come in handy from time to time. :-)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic