Solved

iFrame Page Loses formatting

Posted on 2009-04-13
7
525 Views
Last Modified: 2013-12-25
Hello Everyone,

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

CODE:
<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; " />
</div>

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

BUT:
I can view the page standalone and it look fine.

Can anyone help me figure this one out?









sample.html.txt
0
Comment
Question by:fshtank
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 4

Expert Comment

by:rafe_
ID: 24135103
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
0
 

Author Comment

by:fshtank
ID: 24135199
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.
0
 
LVL 4

Expert Comment

by:rafe_
ID: 24135215
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?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:fshtank
ID: 24135679
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.
0
 
LVL 10

Expert Comment

by:Kechka
ID: 24136171
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?
0
 

Author Comment

by:fshtank
ID: 24154655
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?
0
 

Accepted Solution

by:
fshtank earned 0 total points
ID: 24911130
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.
0

Featured Post

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question