IE7 - iFrame loads with GREY background, no controls, already fixed CSS png URLs
360 views
Skip to first unread message
Chad
May 20, 2010, 9:41:27 AM5/20/10
to fancybox
I'm at my wit's end -- I've spent 4 hours on this forum, was up until
2 in the morning working on this problem, and have finally decided to
ask for help.
Here is the test page:
http://brooklynprints.com/_catalog_zoom.php
I'm using Fancybox to load a zoom preview, image loading SWF as an
iFrame; it works great in Firefox 3.5, but in IE7 (only other browser
I've tested it in), I get a blank grey background over the main page
and no controls for the Fancybox. The iFrame does load, and the SWF
works as it should, but all styling is missing.
I have already fixed the URLs for the PNGs that are processed
specifically for IE in the CSS file. As a safety measure, I have
placed the necessary PNGs in the root directory as well.
I have tried multiple options, including turning the overylay off --
but the iframe in IE still loads without any styling.
I even tried reordering the way my scripts and css files load in the
main page.
I am also using Thickbox, but even with Thickbox turned off, I still
have the same problem in IE.
Here is the script I use to initialize the iFrame --
jQuery(document).ready(function() {
$("a.fancybox").fancybox({
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 690,
'height' : 410,
'padding' : 0,
'margin' : 0,
'type' : 'iframe' });
});
And here is the link, outputted by php, that calls the Iframe:
$cellstr.='<br /><a class="fancybox iframe" href="http://
brooklynprints.com/zoompreview.php?id=0'.$id.'" title="Zoom
Image"><img src="images/zoom.gif" alt="Zoom Image" /></a><br /> </
p>';
Any help would be GREATLY appreciated.
Chad
--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.
2 in the morning working on this problem, and have finally decided to
ask for help.
Here is the test page:
http://brooklynprints.com/_catalog_zoom.php
I'm using Fancybox to load a zoom preview, image loading SWF as an
iFrame; it works great in Firefox 3.5, but in IE7 (only other browser
I've tested it in), I get a blank grey background over the main page
and no controls for the Fancybox. The iFrame does load, and the SWF
works as it should, but all styling is missing.
I have already fixed the URLs for the PNGs that are processed
specifically for IE in the CSS file. As a safety measure, I have
placed the necessary PNGs in the root directory as well.
I have tried multiple options, including turning the overylay off --
but the iframe in IE still loads without any styling.
I even tried reordering the way my scripts and css files load in the
main page.
I am also using Thickbox, but even with Thickbox turned off, I still
have the same problem in IE.
Here is the script I use to initialize the iFrame --
jQuery(document).ready(function() {
$("a.fancybox").fancybox({
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 690,
'height' : 410,
'padding' : 0,
'margin' : 0,
'type' : 'iframe' });
});
And here is the link, outputted by php, that calls the Iframe:
$cellstr.='<br /><a class="fancybox iframe" href="http://
brooklynprints.com/zoompreview.php?id=0'.$id.'" title="Zoom
Image"><img src="images/zoom.gif" alt="Zoom Image" /></a><br /> </
p>';
Any help would be GREATLY appreciated.
Chad
--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.
Tony Alfrey
May 20, 2010, 10:05:25 AM5/20/10
to fanc...@googlegroups.com
http://www.fancybox.net/howto
The Gods Of Fancybox will tell you that you are in quirks mode.
But also turn off Thickbox when you try this.
--
Tony Alfrey
tonya...@earthlink.net
"I'd Rather Be Sailing"
Chad
May 20, 2010, 10:22:21 AM5/20/10
to fancybox
Yes, I checked that first, thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
As I said, I have turned off Thickbox, everything else -- doesn't
matter what I do. Here is a better test file, stripped down:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
body {
font: Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
-->
</style>
<link href="Scripts/jquery.fancybox-1.3.1.css" rel="stylesheet"
type="text/css" media="screen" />
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></
script>
<script type="text/javascript" src="Scripts/
jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="Scripts/launchzoom.js"></script>
</head>
<img src="images/0101_mini.jpg" /><br /><a href="zoompreview.php?
id=0101" class="fancybox iframe" ><img src="images/zoom.gif" /></a>
</body>
</html>
And the launching code -- as above:
jQuery(document).ready(function() {
$("a.fancybox").fancybox({
'autoScale' : true,
troubleshooting this, and I have been methodical.
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
As I said, I have turned off Thickbox, everything else -- doesn't
matter what I do. Here is a better test file, stripped down:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
body {
font: Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
-->
</style>
<link href="Scripts/jquery.fancybox-1.3.1.css" rel="stylesheet"
type="text/css" media="screen" />
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></
script>
<script type="text/javascript" src="Scripts/
jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="Scripts/launchzoom.js"></script>
</head>
<img src="images/0101_mini.jpg" /><br /><a href="zoompreview.php?
id=0101" class="fancybox iframe" ><img src="images/zoom.gif" /></a>
</body>
</html>
And the launching code -- as above:
jQuery(document).ready(function() {
$("a.fancybox").fancybox({
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 690,
'height' : 410,
'padding' : 0,
'margin' : 0,
'type' : 'iframe' });
});
As I said above, I've spent last night and this morning
'transitionOut' : 'none',
'width' : 690,
'height' : 410,
'padding' : 0,
'margin' : 0,
'type' : 'iframe' });
});
troubleshooting this, and I have been methodical.
Thanks.
Tony Alfrey
May 20, 2010, 10:32:00 AM5/20/10
to fanc...@googlegroups.com
Chad wrote:
> Yes, I checked that first, thanks.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
See the DOCTYPE for fancybox homepage. When in Rome . . . . . . .
> Yes, I checked that first, thanks.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
May not be the problem but often is in these Firefox vs. IE issues.
The Gods Of Fancybox will weigh in on the matter.
Chad
May 20, 2010, 10:42:02 AM5/20/10
to fancybox
Not a doctype issue -- as I posted elsewhere, it is either machine
specific or specific to my version of IE7 (and my settings).
I get EXACTLY the same behavior when I browse the Fancybox main page
examples. Gray opaque (not transparent) background with no styling of
the lightbox and no close button. Same result on all of the examples
-- images, iframes, etc.
I'm running IE 7.0.5730.13 -- no problems in Firefox. (On Windows XP,
SP3)
I'm about to try it on a different machine running IE6.
specific or specific to my version of IE7 (and my settings).
I get EXACTLY the same behavior when I browse the Fancybox main page
examples. Gray opaque (not transparent) background with no styling of
the lightbox and no close button. Same result on all of the examples
-- images, iframes, etc.
I'm running IE 7.0.5730.13 -- no problems in Firefox. (On Windows XP,
SP3)
I'm about to try it on a different machine running IE6.
phpremco
May 20, 2010, 10:55:14 AM5/20/10
to fancybox
Right there is a program called IE tester, it might be a usefull thing
to test in your case.
Or you just update your browser, but this might not be a good idea if
it's a comercial website.
http://www.my-debugbar.com/wiki/IETester/HomePage
Just give it a go.
I'm having a similar problem I think, i have a gray bar, but this is
only on the bottom of the frame which gets loaded, it does load.. but
I can't seem to get rid of it.
in all browsers.. so i guess it's a css thing somewhere.. can't figure
out where though.
You said you fixed the css or something? what did you change?
to test in your case.
Or you just update your browser, but this might not be a good idea if
it's a comercial website.
http://www.my-debugbar.com/wiki/IETester/HomePage
Just give it a go.
I'm having a similar problem I think, i have a gray bar, but this is
only on the bottom of the frame which gets loaded, it does load.. but
I can't seem to get rid of it.
in all browsers.. so i guess it's a css thing somewhere.. can't figure
out where though.
You said you fixed the css or something? what did you change?
Tony Alfrey
May 20, 2010, 10:55:19 AM5/20/10
to fanc...@googlegroups.com
Chad wrote:
> Not a doctype issue -- as I posted elsewhere, it is either machine
> specific or specific to my version of IE7 (and my settings).
It very often is.
> Not a doctype issue -- as I posted elsewhere, it is either machine
> specific or specific to my version of IE7 (and my settings).
In lieu of Gods Of Fancybox being around at the moment, you might check
the archives
http://groups.google.com/group/fancybox?hl=en
and search on IE7. There are LOTS of posts.
>
> I get EXACTLY the same behavior when I browse the Fancybox main page
> examples. Gray opaque (not transparent) background with no styling of
> the lightbox and no close button. Same result on all of the examples
> -- images, iframes, etc.
>
> I'm running IE 7.0.5730.13 -- no problems in Firefox. (On Windows XP,
> SP3)
>
> I'm about to try it on a different machine running IE6.
>
--
Reply all
Reply to author
Forward
0 new messages