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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
remorinaCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.