Printable View
Hello!
http://www.dynamicdrive.com/dynamici...iframessi2.htm - I'm following this tutorial. I've done everything as it mentioned, but my iframe has scrolling.
http://lautenaudio.com/products-horizon-1.html - This is where I've setup the script.
Very weird, because I have scrolling="no" in the attributes. Plus, it's not resizing automatically, like it said it would.
Any help? I'd appreciate it!
Looks fine in IE6. In FF, I see what you mean. No iframe in Opera (for which this script is not rated). This script often has problems with tables but, the first thing I would try in this case is to get rid of the paragraph or to close it before the iframe, so either:
or:HTML Code:<td colspan="21" rowspan="9" align="left" valign="top" bgcolor="#FFFFFF"><p><img src="images/products-horizon2_20.jpg" width="377" height="44">
<img src="images/home_27.jpg" width="377" height="13" alt="">
</p>
<iframe id="myframe" src="/testsite/cart.php?ItemID=1&Action=add" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none;"></iframe>
</td>
HTML Code:<td colspan="21" rowspan="9" align="left" valign="top" bgcolor="#FFFFFF"><img src="images/products-horizon2_20.jpg" width="377" height="44">
<img src="images/home_27.jpg" width="377" height="13" alt=""><br>
<iframe id="myframe" src="/testsite/cart.php?ItemID=1&Action=add" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none;"></iframe>
</td>
John, thank you for your response.
I've tried removing the paragraph, and moving it before the IFRAME code, with no luck. It does work in IE -- but it makes no sense that it wouldn't work in FF, when I can see the demo working in FF too.
Well, that was just a thought, the real problem is the table, I imagine. Ordinarily, I might test something like this locally but, it is hard to duplicate conditions due to the domain specific nature of the script.
Another thing I would try as a test, just to see what happens is to set the position of the iframe to absolute and if that does nothing good, also try taking it completely out of the flow of the page, example (absolute):
Then if that didn't look at all promising, I'd move the iframe out of the table to the very end of the page, just above the </body> tag, with no container around it, just to see what happened.HTML Code:<td colspan="21" rowspan="9" align="left" valign="top" bgcolor="#FFFFFF"><p><img src="images/products-horizon2_20.jpg" width="377" height="44">
<img src="images/home_27.jpg" width="377" height="13" alt="">
</p>
<iframe id="myframe" src="/testsite/cart.php?ItemID=1&Action=add" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none;position:absolute;"></iframe>
</td>
Another thing, maybe before those other things, get rid of this:
on the contained page (http://lautenaudio.com/testsite/cart...D=1&Action=add), it makes the height of the page 8px instead of 370px.Code:<div id="Layer4" style="position:absolute; width:500px; height:350px; z-index:4; left: 20px; top: 8px; ">
The appearance would be just about the same, like so:
Code:<div id="Layer4" style="width: 500px; height: 350px; z-index: 4; margin-left: 20px; margin-top: 8px;">
John, thanks again for your respone.
Changing the style="" tag values seems to have worked, but what about when I have a link that goes to the next step in the checkout? The next page to enter credit card information is much longer--is there a way I can pass these style="" tags on through the link?
I thought that might get it as, the script relies upon what the page reports as its body's height. The trouble is with absolutely positioned elements. These technically do not add to the container's (in this case the body's) dimensions. FF does this according to spec, IE6 does it in a more intuitive, though technically incorrect, manner.
I'm not sure how one would pass the style. It could be done. The length of the page isn't so important as is the manner in which it is laid out. If there are more than one absolutely positioned elements, this could get complicated. However, since the absolute positioning was not in any way required in your first example, it would be best just to avoid it altogether in the templates (I assume these are template generated pages) for these pages.
So what would you suggest that I do? The problem seems to be with the script, and it's not able to accurately calculate the page height. There's no way around this, I'm assuming?
Perhaps separate pages with absolute values for the height would be better?
You haven't answered my question, it wasn't posed all that clearly, let me rephrase it:
How did it come to be that these pages have absolutely positioned divisions on them?
I have some more:
Does this other (the longer page you mention) page, in fact, have absolutely positioned elements on it? If so how many?
How much control do you have over how these pages are laid out?
If all of the pages have one wrapping absolute division with the id of 'layer4', as the one example page did, we could alter the script to get its height + 8 for its offset from the top for FF. Or if there is some other discernible pattern to how this/these (are there more than one?) other page(s) are laid out, we could use that to modify the script.
I've actually taken the script from someone else who made the shopping cart.
Here's the order.php file (the next page, with a longer height):
http://www.phunctional.com/test/order.txt
If you actually click "pay now" on this page, you can see that it's much longer. This is all in the PayPal Sandbox for testing, so you can mess with the forms and it won't really do anything.
I'm slightly newer to DIVs. To my knowledge, there are no absolutely positioned DIVs on order.php (again, this is the next page, which is much longer in height). It won't let you view the source correctly, so I saved as TXT.
The layout is somewhat restrictive of me making changes. But that's not to say I won't at least try it, I'm pretty anxious to finish this up, so at this point I'm very willing to try whatever it takes to get it done.
There are about 3 or 4 pages that the user will go through to finish the entire payment process.
That longer page is on a secure portion of your server. Because of that, not even IE is resizing the iframe for it. It is treating it as though it were on another domain because the base location is different (https instead of http). Parent and child content cannot communicate across domains for the purposes of this or any other iframe resizing script. If you were to put all of the pages involved, the top page as well as all the possible children on the secure portion of the server, it might work. You would still need to work out the layout problems. So, if you are in a hurry, it might be best (as you suggested) to simply pass the height of each page to the script since it looks like that could be known. Is it known though? Are there circumstances, due to optional information being submitted, required, where the page lengths might vary?
There are some other things that trouble me about this set up. As I said before, no iframe at all in Opera, that means no content, no way to order or to pay. In IE explorer (current version, this may change with v7 about to be released), the text sizes can be specified with certainty (although they have not been on the payment page) but, not so in FF, there and quite possibly in IE7 you can change font size no matter what the designer has done, this would result if different sized pages. As it is now, even in IE6 you can change the font size.
The best method would probably be just to have these as normal pages that the client can move along through like any other normally linked pages.
John,
looks like I'm going to have an incredibly interesting ride through customizing these pages. I was hoping not to have to end up doing this, but it almost seems inevitable.
I appreciate your support through this. Thanks for your contributions to dd forums. :)