FancyBox Overlay issue in Internet Explorer

Hi,

Im trying to use FancyBox to display an iFrame - Its working perfect in Firefox but in IE it doesn't display the faded background.
I cant seem to find the issue.

This is the link format,

<a id="bodyparts" href="http://www.domain.com/bodyparts.html"><img src="http://www.domain.com/images/parts.jpg" border="0"></a></td>

Thanks, Joe





<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.1.css" media="screen" />
  <script type="text/javascript" src="css/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="css/jquery.mousewheel-3.0.2.pack.js"></script>
  <script type="text/javascript" src="css/jquery.fancybox-1.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {

		$("#bodyparts").fancybox({
				'width'				: '40%',
				'height'			: '40%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
				
			});

		});
	</script>

Open in new window

no-faded-background-in-IE.jpg
working-in-Firefox.jpg
LVL 1
joe90kaneAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
remorinaConnect With a Mentor Commented:
Unfortunately not.
it's stated as a first requirement here
http://fancybox.net/howto

Most jQuery, Mootools, etcc scripts require a doctype to function correctly
0
 
remorinaCommented:
It looks like your browser in the screen shot is having transparency issues and now showing semi-transparencies.

The FancyBox should be working well in all IE versions including IE6, have you tried testing the demo on their own site and check if it was working with your browser ? if it was working then it's probably something wrong or missing with your css/images ?

I would try downloading the demo from FancyBox and sure it's working well first before applying it on your site, then start merging it into your site.

If it's still not working, attaching your files or posting a link to your site would make it easier to test & troubleshoot
0
 
joe90kaneAuthor Commented:
I see the problem, if I add a DOCTYPE - its works perfectly in IE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The only problem the site is quite old the the Doctype messes up all the layouts, can I get ti working without the DOCTYPE declaration
0
 
joe90kaneAuthor Commented:
ok should be possible, if I use Doc type

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

It fails back to quirks mode, I see this post related to it but cant get it to work

http://groups.google.com/group/fancybox/browse_thread/thread/fd0bd6bef302581d/ad0e695268fb94b7?lnk=gst&q=quirks+mode+ie8#ad0e695268fb94b7
0
All Courses

From novice to tech pro — start learning today.