View Full Version : displaying pre-loaded iframe results in messy output

Aug 12th, 2009, 06:41 PM

I have a page with two iframes that load content from another website. Only one of the iframes is shown at a time, depending on which tab the user is viewing. If user clicks on tab A, he will see iframe A. Same for tab B.

Users arrive to the page via POST. Sometimes they see iframe A, sometimes they see iframe B, depending on the inputs in the previous page. Both iframes are loaded when arriving to the page, but only one is shown.

When I arrive to the page, regardless of whether I choose in the previous page to see iframe A or B, the content of the iframe is viewed as it should: a list of boxes, with each one describing an item from the third-party database. However, when I click on the tab (and I set display:none for the <span> that contains the iframe that I no longer want to see and display:block for the <span> that contains the iframe that I want to see), the second iframe content is all messed up: all item boxes are shown overlapped one over the other, as if we were using a typewriter with no carriage-return, rendering the list unreadable.

Therefore, it is clearly a problem with the transition from iframe A to iframe B (or viceversa), because each iframe, if shown first, works correctly. Does changing the display property of the <span style="display:none"> <iframe></span> to block have the side effect of messing up the contents of the iframe?

Does anyone have any idea on why would this be happening?

Thanks a lot! I'll appreciate any help, because this is driving me crazy...