iFrame Page Loses formatting

Hello Everyone,

I have an iFrame on a page, part of a <DIV>.

<div id="gallery" style="float:left; height:auto;border:0px black;" >
      <iframe id="galleryFrame" src="gallery/wedding1.htm" style="float:left; width:100%; height:720px; border:0px; " />

The inner page loses it's formatting when brought into the parent page.  (ie. the LI's are supposed to horizontal, but wind up going vertical, AND the picture resizing (thumbnail effect) is not working.

CODE: The inner page I am using is the Gallery from Google Code (demo 01) -  http://code.google.com/p/galleria/downloads/list

I can view the page standalone and it look fine.

Can anyone help me figure this one out?

Who is Participating?
fshtankConnect With a Mentor Author Commented:
It appears the Google Gallery doesn't work in an iFrame in Google Chrome and Safari
Moving the Gallery out of the iFrame and opening in it's own frame, Galleria (ala JQuery) works great in Chrome and Safari.

I had to choose a different gallery option for the embed.
is it possible that it is trying to use a relative url to the stylesheet, and when it is loaded in the iframe, it treats the page in the iframe as being in the same directory as the parent page?

try either giving it an absolute url to the stylesheet, or a relative url as if the page were sitting in the parent page's directory.

Otherwise i can't think of much else
fshtankAuthor Commented:
Thanks for the comment.

I actually moved the gallery page into the same directory as the parent page - updating the CSS/JS references appropriately.  I got the same result.  It's like the parent CSS is adversely affecting the iFrame - but I thought they were completely separate functional entities without the explicit Parent/Child references.
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

yeah that is also what i thought - it is essentially a new browser window in the way it behaves.

Is there any styling AT ALL being passed onto the page in the iframe?
fshtankAuthor Commented:
What I've attached in the sample is everything, and the DIV call itself is in the question body.
I give style information for the iFrame (borders, width, height) but nothing else.
Your CSS link in main page is pointing to dir root/Style
Your iframe pointing to file in root/Galery
CSS link in gallery page should point to ../style correct?
fshtankAuthor Commented:
Sorry for the delayed response - tax season was upon me -

The CSS in the gallery page is driven entirely by Google's CSS and directories.  I just used as-is.

Now here is something interesting: I moved the iFrame out of a DIV with style info to just a standalone iFrame and it displays.

Very frustrating.  How do I keep the Parent CSS info from Cascading to the Child?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.