Solved

Fancybox icons gone in IE

Posted on 2010-09-18
2
719 Views
Last Modified: 2012-06-22
Dear experts,

I have a problem with the newest Fancybox 1.3.1, I am upgrading from 1.2.6.

The only problem is that the closing icon is not visible in Internet Explorer.
Everything works fine in Firefox, Safari and Google Chrome. No problems at all.

Anyone who knows what is wrong?

Every answers are appreciated!
DanishCoder
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='fancybox/jquery.easing-1.3.pack.js'></script>
<script type='text/javascript' src='fancybox/jquery.fancybox-1.3.1.js'></script>
<link rel='stylesheet' type='text/css' href='fancybox/jquery.fancybox-1.3.1.css' media='screen' />

<link rel="stylesheet" href="/styles.css"/>
<link rel="stylesheet" href="/stylesdrop.css"/>
<script type="text/javascript">
$(function(){
	/* Fancy-box */
	$("#fancybox").fancybox		({'width': 700,'autoScale':false,'transitionIn':'none','transitionOut':'none','type':'iframe'});
	$("a#admin").fancybox		({'width': 700,'height':500,'autoScale':false,'transitionIn':'none','transitionOut':'none','type':'iframe'});
	$("a#outlook").fancybox		({'width': 700,'height':400,'autoScale':false,'transitionIn':'none','transitionOut':'none','type':'iframe'});
	$("a#tipafriend").fancybox	({'width': 700,'height':500,'autoScale':false,'transitionIn':'none','transitionOut':'none','type':'iframe'});
	$("a#findvej").fancybox		({'width': 750,'height':500,'autoScale':false,'transitionIn':'none','transitionOut':'none','type':'iframe'});
	$("a#scripture").fancybox	({'width': 700,'height':300,'autoScale':false,'transitionIn':'none','transitionOut':'none','type':'iframe'});
});
</script>
</head>


<body>

<a href="http://fancybox.net" id="something">

</body>
</html>

Open in new window

0
Comment
Question by:DanishCoder
2 Comments
 
LVL 15

Accepted Solution

by:
JBond2010 earned 500 total points
ID: 33709736
The problem is in the end of the jquery.fancybox-1.3.1.css file after the /* IE */ comment where it runs every image through progid:DXImageTransform.Microsoft.AlphaImageLoader.

I commented out all the lines with progid:DXImageTransform.Microsoft.AlphaImageLoader (lines 341 and down) and now it works in ie8 & ie7, haven't been able to try it in ie6. If you don't need ie6 support this should do the trick.
0
 

Author Closing Comment

by:DanishCoder
ID: 33711007
Thank you, JBond2010

Yes it works very well!
Now my IE visitors know how to get to the site :)
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question