Skip to main content

FancyBox iFrame broke after Tables & Styles in IE

Image
By User



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>




Labels:

Comments

Post a Comment

Popular posts from this blog

Slow Android emulator

By User
I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?
30 comments
Read more

CCNA 3 Final Exam => latest version

By User
1 . Which security protocol or measure would provide the greatest protection for a wireless LAN? WPA2 cloaking SSIDs shared WEP key MAC address filtering   2 . Refer to the exhibit. All trunk links are operational and all VLANs are allowed on all trunk links. An ARP request is sent by computer 5. Which device or devices will receive this message? only computer 4 computer 3 and RTR-A computer 4 and RTR-A computer 1, computer 2, computer 4, and RTR-A computer 1, computer 2, computer 3, computer 4, and RTR-A all of the computers and the router   3 . Refer to the exhibit. Hosts A and B, connected to hub HB1, attempt to transmit a frame at the same time but a collision occurs. Which hosts will receive the collision jamming signal? only hosts A and B only hosts A, B, and C only hosts A, B, C, and D only hosts A, B, C, and E   4 . Refer to the exhibit. Router RA receives a packet with a source address of 192.168.1.65 and a destination address of 192.168.1.161...
20 comments
Read more