I'm wondering if there's any particular rules regarding using and stylizing 'fancybox' windows. I've implemented a 'fancybox' using the iFrame call - and when I just had some simple text, a background color, and an Image; it rendered great IE 6+. BUT, now that I've added a simple table with some styles for buttons within - it breaks in 6/7.
Anything particular I should avoid implementing and putting inside an iFrame called .html while using fancybox supporting IE6/7?
! Update (please help me debug - here's what I have being called in the fancybox via iFrame):
<!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>Untitled Document</title>
<style>
h1 { font-family: Georgia, Regular; font-size: 30px; color: #8E4925; font-weight: 300;}
h2 { font-family: Georgia, Regular; font-size: 18px; color: #8E4925; line-height: 30px; font-weight: 300; text-transform:Uppercase;}
p { font-family: Georgia, Regular; font-size: 16px; color: #000; padding: 4px; line-height: 25px; font-weight: 300; }
</style>
</head>
<body style="background-color: #FFFDEF;">
<div id="wrap" style="width:650px;">
<div style="float:left; width: 300px;">
<table width="300" height="30">
<tr>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
</tr>
<tr>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
</tr>
</table>
<table width="300" height="30" >
<tr>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
</tr>
<tr>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
</tr>
</table>
<br />
<table width="300" height="30">
<tr>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
<td style="background-color: #CCCC99; height:40px; max-width:50px;"><center>TKTK</center></td>
</tr>
</table>
</div>
<div style="float:right; width: 300px">
<img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/Cover.jpg" style="border:0px; margin-top:40px;"/>
</div>
</div>
<!-- SiteCatalyst Code version: H.17.
Copyright 1997-2008 Omniture, Inc. More info available at
http://www.omniture.com -->
<script language="JavaScript" type="text/javascript" src="http://www.mytest.com/js/s_code.js"></script>
<script language="JavaScript" type="text/javascript"><!--
/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
var s_code=s.t();if(s_code)document.write(s_code)//--></script>
<script language="JavaScript" type="text/javascript"><!--
if(navigator.appVersion.indexOf('MSIE')>=0)document.write(unescape('%3C')+'\!-'+'-')
//--></script><noscript><a href="http://www.omniture.com" title="Web Analytics"><img
src="http://code.mytest.com/b/ss/ranhrollup/1/H.17--NS/0"
height="1" width="1"style="border:3px solid #FFFDEF; alt="" /></a></noscript><!--/DO NOT REMOVE/-->
<!-- End SiteCatalyst code version: H.17. -->
</body>
</html>
FancyBox JS inline:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.mousewheel-3.0.4.pack.js">
</script>
<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>
<link rel="stylesheet" type="text/css" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.css" media="screen">
<!--JS for Fancybox iFrame buybtn-->
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - various
*/
$("#various7").fancybox({
'width' : 700,
'height' : 500,
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'fade',
'enableEscapeButton' : 'true',
'type' : 'iframe',
'speedIn' : 250,
'speedOut' : 500,
});
});
</script>
<!--End JS for Fancybox iFrame buybtn-->
CTA:
<a id="various7" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/iframe/buybutton.html" name="various7"><img src="http://rh-dev.us.randomhouse.com/crown/features/AmericanGrown/imgs/buythebook_btn.png" border="0"></a>
No comments:
Post a Comment