Forum Moderators: open

Message Too Old, No Replies

Iframe in Safari

         

jjasper

7:46 pm on Mar 11, 2005 (gmt 0)

10+ Year Member



I've seen that Safari on the mac supports IFrames. I have pulled up pages that have them nested in tables and the iframe works just fine. However, I can't get an iframe to work in safari when it works in any other browser.

here's a snipped of the code where the iframe resides:

<td align="center" valign="top" width="100%" height="100%">

<iframe width="100%" height="100%" name="contentHolder" frameborder="0" src="/peerServer/pixami/ModifyCardOptions.jsp?AlbumID=9EQYMTS29FYU&pixamiAction=guestcard" scrolling="auto"></iframe>

<p>&nbsp;
</td></tr>

this is the nested table cell that I want to put the iframe in. It works in IE, Firefox, Opera, Netscape on the PC, but not safari on the mac.

the url is:
<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

thanks for any help.

[edited by: tedster at 8:05 pm (utc) on Mar. 11, 2005]

jjasper

7:50 pm on Mar 11, 2005 (gmt 0)

10+ Year Member



also.. to follow up.. the page in the src for the ifram works fine loaded directly into the location bar for safari. it doesn't load in the iframe nested in the table.

cmatcme

7:59 pm on Mar 11, 2005 (gmt 0)

10+ Year Member



2 Steps
_______

  • You'll need a valid doctype [w3.org]

  • Validate your page [validator.w3.org]

    ________

    If it doesn't pick up the errors please say and please state if it does too!

    ________

    Just to point out, there is an owner edit button under "User Profile" so you don't have to go to the trouble of posting a new post!

    ________

    \\ cmatcme

  • jjasper

    8:29 pm on Mar 11, 2005 (gmt 0)

    10+ Year Member



    discovered the problem is the height="100%" in the iframe tag. This is a problem because in safari, I cannot get the attribute height="100%" recognized in the <td> tag.

    Is there a way to fix this? I basically want to have a white-space table cell that fills any space in the browser window. This works fine for all browsers but safari. If I get the table cell to fill the gap, then it shouldn't be an issue.

    bear in mind that this is a dynamically created jsp page from a wrapper file and a content region that jsp uses to drop sections of code in.

    here's the code:

    <html lang="en" style="margin: 0px; padding: 0px; height: 100%;">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Qurio Home Photo Center</title>
    <link rel="stylesheet" type="text/css" href="/peerServer/templates/peer/wrapper2.css" />
    <link rel="stylesheet" type="text/css" href="/peerServer/templates/peer/content2.css" />

    <style type="text/css">
    #pageContent {
    border: 0px;
    height: 100%;
    width: 100%;
    }

    #bodyContent {
    background: #FFFFFF;
    }

    #bodyContentHolder { /* this is the magic scrolling div on normal pages */
    height: 99%;
    overflow: auto;
    /* padding: 20px 40px 40px 40px; */
    text-align: center; /* centers narrower pages within the container */
    width: 100%;
    }

    /*For Win IE 5.5+, make the scrollbar on the content area match the wrapper green.
    Goofy, but it helps make the top unit look like a, um, unit distinct from clipboard unit. */
    #pageContent, #bodyContentHolder {
    scrollbar-3dlight-color: #F7FFD7;
    scrollbar-arrow-color: #437010;
    scrollbar-base-color: #ABDD6E;
    scrollbar-darkshadow-color: #437010;
    scrollbar-face-color: #ABDD6E;
    scrollbar-highlight-color: #F7FFD7;
    scrollbar-shadow-color: #437010;
    }

    </style>

    <script type="text/javascript" src="/peerServer/templates/peer/wrapper2.js"></script>

    <script type="text/javascript" src="/peerServer/templates/peer/content2.js"></script>

    </head>

    <body style="margin: 0px; padding: 0px; height: 100%;">

    <!-- main table that spans the window horz. and vert. -->
    <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" bgcolor="#abdd6e">
    <!--- left corner logo cell --->
    <tr><td width="100" height="62" align="left" valign="top"><img border="0" width="100" height="62" alt="Qurio" src="/peerServer/nav/wrapper2/fp-wrapper-logo.gif"></td>
    <!--- main site navigation cell --->
    <td align="left" valign="top" width="100%" height="62">
    <table width="100%" height="62" border="0" cellspacing="0" cellpadding="0">
    <!--- left side of shopping cart graphic place holder --->
    <tr><td width="60" align="left" valign="top"><img border="0" width="60" height="62" alt="" src="/peerServer/nav/wrapper2/fp-wrapper-top1.gif"></td>
    <!--- shopping cart graphic --->
    <td width="30" align="left" valign="top"><a href="http://www.qurio.com/centralServer/shopping/cart.jsp?RequestingHostUrl=http://joejasdev.quriophotos.com/peerServer/guest/albums.jsp&cartPUID=&peerName=joejasdev&cacheKill=1110572672411" id="ucCart" onFocus="this.blur()" onmouseout="swapImgRestore()" onmouseover="swapImage('fp-cart','','/peerServer/nav/wrapper2/fp-cart-over_g.gif',1)"><img name="fp-cart" src="/peerServer/nav/wrapper2/fp-cart-down_g.gif" alt="Cart" border="0" width="30" height="62" title="Click here to access your shopping cart." /></a></td>
    <!--- right side of shopping cart graphic place holder --->
    <td width="210" align="left" valign="top"><img border="0" width="210" height="62" alt="" src="/peerServer/nav/wrapper2/fp-wrapper-top2.gif"></td>

    <td width="100%" align="right" valign="top">
    <!--- CODE FOR MAIN SITE NAVIGATION GOES HERE INSIDE THIS CELL --->
    <div id="pNav">
    <a href="../guest/albums.jsp" id="pNavAlbums" onmouseover="menu.show(this);" onmouseout="menu.timeHide();"
    ><img src="/peerServer/nav/wrapper2/pnav.albums.off.gif" alt="Albums" border="0" /></a>
    <a href="../guest/creations.jsp" id="pNavPhotoGifts" onmouseover="menu.show(this);" onmouseout="menu.timeHide();"
    ><img src="/peerServer/nav/wrapper2/pnav.photogifts.off.gif" alt="Photo Gifts" border="0" /></a>
    </div>
    <div id="sNavLinks">
    <div id="sNavAlbums" onmouseover="menu.killTime();" onmouseout="menu.timeHide();">
    <a href="../guest/albums.jsp" id="AlbumsAlbums">Shared Albums</a>
    </div>
    <div id="sNavPhotoGifts" onmouseover="menu.killTime();" onmouseout="menu.timeHide();">
    <a href="../guest/creations.jsp" id="PhotoGiftsPhotoGifts">Photo Gifts</a>
    </div>
    </div>
    <!--- END CODE FOR MAIN SITE NAVIGATION CELL --->
    </td>

    <td width="12" align="left" valign="top">
    <img border="0" width="12" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif">
    <!--- JAVASCRIPT CODE FOR CURRENT PAGE --->
    <script type="text/javascript">
    menu.setHere("PhotoGifts","PhotoGifts");
    </script>
    <!--- END JAVASCRIPT CODE FOR CURRENT PAGE --->
    </td></tr>

    </table>
    </td></tr>

    <tr><td width="100" height="100%" align="left" valign="top">
    <table width="100" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr><td align="left" valign="top"><img border="0" width="100" alt="" src="/peerServer/nav/wrapper2/fp-wrapper-left.gif"></td></tr>

    <tr><td align="left" valign="top">
    <!--- TOOLS AND COPYRIGHT DOWN THE LEFT HAND SIDE --->


    <div align="center"> <img id="fp-spacer" src="/peerServer/nav/wrapper2/fp-spacer.gif">
    <a href="http://www.qurio.com/centralServer/product/catalog.jsp?userName=joejasdev" target="_blank"><p>Qurio Print and Photo Gift Pricing</p></a>
    </div>

    <div> <img id="fp-spacer" src="/peerServer/nav/wrapper2/fp-spacer.gif"> </div>
    <div id="downloadToolSlot" align="center"><a href="http://www.qurio.com/product/download.html" class="active"><img id="fp-download" src="/peerServer/nav/content/guest.download.gif" alt="Download Qurio" border="0" /></a>
    </div>

    <div id="outLeftCopyright" style="font-size: 9px; color: 669933; position: relative; text-align: center; vertical-align: top; margin: 20px 0px 0px; padding: 5px;">&copy;
    2004 FlashPoint Technology, Inc. All rights reserved.</div>
    <!--- END TOOLS AND COPYRIGHT --->
    </td></tr>
    </table>
    </td>

    <!--- main body content cell --->
    <td width="100%" height="100%" align="left" valign="top" bgcolor="#ffffff">
    <table width="100%" height="100%" cellspacing="0" cellpadding="0">
    <tr><td align="left" valign="top" width="100%">
    <!--- nested table with dark blue shading --->
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr bgcolor="#2c5892"><td align="left" valign="top" width="6" rowspan="4"><img border="0" width="6" height="4" alt="" src="/peerServer/nav/wrapper2/fp_navwidget_1.gif"></td>
    <td align="left" valign="top" width="100%" height="1" bgcolor="#2c5892"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>
    <tr><td align="left" valign="top" width="100%" height="1" bgcolor="#3A68A0"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>
    <tr><td align="left" valign="top" width="100%" height="1" bgcolor="#5080B6"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>
    <tr><td align="left" valign="top" width="100%" height="1" bgcolor="#5F91C5"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>
    </table>

    <!--- nested table containing control functions for various pages --->
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr bgcolor="#6699cc"><td align="left" valign="top" width="1" bgcolor="#3A68A0"><img border="0" width="1" height="26" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td>
    <td align="left" valign="top" width="1" bgcolor="#5080B6"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td>
    <td align="left" valign="top" width="1" bgcolor="#5F91C5"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td>

    <td width="100%" nowrap bgcolor="#6699cc">
    <!--- BEGIN CONTROL SECTION IN BLUE BAR --->
    <div id="globalShortcuts">


    </div>

    <div id="albumShortcuts">

    </div>

    <div id="pageShortcuts">
    <table>
    <tr><td id="pCount" nowrap ></td>
    <td nowrap></td>
    <td nowrap></td>
    <td nowrap></td>
    <td nowrap></td>
    <td nowrap></td></tr>
    </table>
    </div>
    <!--- END CONTROL SECTION IN BLUE BAR --->
    </td></tr>
    </table>
    </td>
    <!--- gutter cell 12 pixels wide for the right hand side of the page --->
    <td width="12" align="left" valign="top" bgcolor="#abdd6e"><img border="0" width="12" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>

    <!--- begin white space cell with nested tables --->
    <!-- <tr><td align="left" valign="top" width="100%" height="100%"> -->
    <tr><td>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr><td width="6" align="left" valign="top" rowspan="6"><img border="0" width="6" height="6" alt="" src="/peerServer/nav/wrapper2/fp_content_shadow.gif"></td>
    <td width="100%" height="1" align="left" valign="top" bgcolor="#6C6C6C"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>
    <tr><td width="100%" height="1" align="left" valign="top" bgcolor="#8C8C8C"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>
    <tr><td width="100%" height="1" align="left" valign="top" bgcolor="#B3B3B3"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>
    <tr><td width="100%" height="1" align="left" valign="top" bgcolor="#D1D1D1"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>
    <tr><td width="100%" height="1" align="left" valign="top" bgcolor="#E9E9E9"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>
    <tr><td width="100%" height="1" align="left" valign="top" bgcolor="#F8F8F8"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>
    </table>

    <!-- <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> -->
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <!-- six spacer rows to emulate shading in white space of graphic -->
    <tr><td width="1" height="100%" align="left" valign="top" bgcolor="#767676"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td>
    <td width="1" height="100%" align="left" valign="top" bgcolor="#989898"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td>
    <td width="1" height="100%" align="left" valign="top" bgcolor="#bfbfbf"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td>
    <td width="1" height="100%" align="left" valign="top" bgcolor="#dddddd"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td>
    <td width="1" height="100%" align="left" valign="top" bgcolor="#f2f2f2"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td>
    <td width="1" height="100%" align="left" valign="top" bgcolor="#fbfbfb"><img border="0" width="1" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td>

    <!-- THIS CELL SHOULD BE MAXED OUT HORIZONTALLY AND VERTICALLY WITH A GUTTER ON THE RIGHT AND A GUTTER AT THE BOTTOM OF 12px EACH -->
    <td align="center" valign="top" width="100%" height="100%">

    <div id="bodyContentHolder"><span id="alignFixer">

    <iframe width="100%" frameborder="0" src="/peerServer/pixami/ModifyCardOptions.jsp?AlbumID=9EQYMTS29FYU&pixamiAction=guestcard"></iframe>

    </span></div>

    <p>&nbsp;
    </td></tr>
    <!-- END MAXIMIZED SCALABLE CELL -->

    <tr id="formCtrl"><td>


    </td></tr>
    </table>
    </td>
    <!--- gutter cell 12 pixels wide for the right hand side of the page --->
    <td width="12" height="100%" align="left" valign="top" bgcolor="#abdd6e"><img border="0" width="12" height="1" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>

    </table>
    </td></tr>

    <tr bgcolor="#abdd6e"><td align="left" valign="top" width="100" height="12"><img border="0" width="1" height="12" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td>
    <td align="left" valign="top" width="100%" height="12"><img border="0" width="1" height="12" alt="" src="/peerServer/nav/wrapper2/spacer.gif"></td></tr>

    </table>

    <div id="errorCode"></div>
    <div id="contextMenu"></div>
    <script type="text/javascript">
    prepPage();
    </script>
    <script type="text/javascript" src="http://support.qurio.com/promo/promoscript.js"></script>
    <div style="position:absolute;left:0px;top:0px;visibility:hidden" id="hiddenDiv">
    <iframe src="about:blank" height="0" width="0" name="hiddenFrame"><p>Here I am<p></iframe>
    </div>

    </body>
    </html>