How to use CSS to position content OUTSIDE of an iframe

I didn't think this would be difficult, but after spending an hour or so looking around and trying stuff, I'll post here to see if any guru's can figure it out.

My halloween webpage has two iframe's in it halfway down - basically one on the left side and one on the right side.

I have some content inside of the right side iframe (the "popup last 20 rollover") that I would like to display on the far left of the browser. I'm thinking no problem, just use "position:absolute; left:0px;" ... but that positions it on the left side of the iframe, not the browser.

I have tried various permutations (such as "fixed") but no difference. If I do a "left: -200px" the rollover is clipped ... even if I play around with z-index.


So ... is there a way to use CSS on content *inside* of an iframe so that it ends up being positioned *outside* of the iframe.

TIA! ;-)

 

No you cannot, since the iframe references external content that your stylesheet cannot reference. The stylesheet can reference the iframe, but not what's contained inside it.

 

... and content inside an iframe stays inside and iframe as it's basically an entirely separate window that just happens to be rendered inside the same page.

My advice - ditch the iFrames, if you really need those two sections as separate files, combine them server side using a SSI/CGI like SHTML, PHP, ASP, Perl, etc. etc.

 

Ask someone in the ajax section, as ajax is based on a hidden frame of the page acting as an intermediary or interceptor between your page and the server. This allows one to update only specific items on the page without an entire refresh So it's perfect for talking between I frames without seemingly refreshing the whole page.

 

OK - thanks for the info - just kinda needed to know this could not be done with CSS. So I just used Javascript to do a parent.document write from the iframe to the main page.