Tricks with I-Frames

The I-frame is one of those obscure components that doesn't translate well across browsers.  Web developers use them but sparingly since you always dread that unforeseen combination of platform, browser, and framework where the i-frame just breaks leaving you with irate customers and the mess which originally led you to using an i-frame in the first place.

Recently I have had to use an i-frame to maintain a state of a web mp3 player so that users don't end up having to reset their preferences every time they switch pages.  I created a HTML index page to call a Zenphoto instance into its main content container.  I had a few problems - I had to recode all the URLs to the domain path to the PHP index page since on some servers the domain by default paths to the HTML index over the PHP index.  When it was pathing to the HTML index I was getting an instance of the i-frame inside another instance of an i-frame. 

My second major problem was the site had a patterned background and (of course) since the pattern of the Zenphoto page would most of the time be not aligned to the pattern on the HTML i-frame page there was viewable boundary between HTML page area and the embedded i-frame.  I first attempted to align the backgrounds by using an offset on the i-frame backdrop; however, since the alignment of the backdrop would be affected by the screen width aligning it for every user would be an impossible task.

After a bit of looking on the internet I came across a few articles which basically talked about setting the i-frame background transparent.  I believe it was an old trick used to create backgrounds that did not scroll when the site scrolled.  This solution had 2 steps.  First set the style background-color of the page content of your i-frame to "transparent" instead of a color.  Then set the background-color property of the i-frame to "transparent" as well.  After making the corrections the background of the HTML i-frame page could be seen through the "white space" of the i-frame.  No more background aligning required.