Iframe SSI Script II - It's scrolling?

[phunctional]

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!

[jscheuer1]

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:

	  <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>

or:

	  <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>

[phunctional]

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.

[jscheuer1]

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):

  <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>

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.

[jscheuer1]

Another thing, maybe before those other things, get rid of this:

<div id="Layer4" style="position:absolute; width:500px; height:350px; z-index:4; left: 20px; top: 8px; ">

on the contained page (http://lautenaudio.com/testsite/cart...D=1&Action=add), it makes the height of the page 8px instead of 370px.

The appearance would be just about the same, like so:

<div id="Layer4" style="width: 500px; height: 350px; z-index: 4; margin-left: 20px; margin-top: 8px;">

[phunctional]

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?

[jscheuer1]

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.

[phunctional]

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?

[jscheuer1]

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.

[phunctional]

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.