Solved

Making pages loaded in an iframe inherit parent pages style?

Posted on 2004-10-04
8
5,896 Views
Last Modified: 2011-10-03
Howdy, my website has 1 parent page with 2 iframes (1 menu, 1 content) that everything is loaded in,

what I want to do is find some way to set the style sheet in the parent page only, and have the iframes 'inherit' and use that style sheet, rather than setting them each individually.

reason being is that I want to create many different versions of the parent page that each use a different style sheet which would be inherited by the iframed content to create a website that can have many different versions.  

cheers

p.s. sorry I only have 130 points available!
0
Comment
Question by:__rdr__
8 Comments
 
LVL 19

Expert Comment

by:webwoman
ID: 12220277
Not gonna happen. A separate document is loaded in the iframe, it doesn't 'inherit' anything from the parent container.

If you're looking to create various looks, an iframe isn't a good way to do it. Server side includes would be much easier, and would do what you want.
0
 
LVL 6

Expert Comment

by:der_jth
ID: 12220283
If you're iframing your own pages, you're better off by finding some other way for styling those. Styling IFrame content from the container document doesn't work. If you really need to do something like that, take a look at the following discussion thread, which provides tools for adding a new style sheet for the embedded document. It uses JavaScript so it won't be foolproof, but it might help you a bit.

http://webfx.eae.net/webboard/?action=display&id=601&group=data/dhtml
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 130 total points
ID: 12222088
Just put an id on the link in the main page:

<link id="one" rel="stylesheet" type="text/css" href="CSSstyle.css">


Then in the head of the pages coming into the iframe:

<script type="text/javascript">
str=top.document.getElementById('one').href;
document.write('<link id="one" rel="stylesheet" type="text/css" href="'+str+'">');
</script>

Then the page in teh iframe will use whatever stylesheet the parent is using.

Cd&

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12226140
Glad we could help. Thanks for the A. :^)

Cd&
0
 
LVL 1

Expert Comment

by:jboyfinn
ID: 12226937
Hey, careful now. COBOLdinosur's answer is correct but if the domain strings denoting where the menu page and the content are hosted differ from then JavaScript won't be able sniff out the stylesheet used. Attempting to do so will cause an error (unless IE's security zone preference's stipulate otherwise - for most people they won't).

COBOLdinosaur would be first to back me up on this. See his posting (Accepted Answer) on:
http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_20854526.html

Personally I agree with Webwoman, use a SSI. Is there any reason why you cannot?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12228454
1. Where is there any indication of anything being cross-domain?

2. If they are cross-domain, then that implies a server they do not control and therefore could not implement SSI.

3.  Any cross-domain issue for a structure like this would require server side resolution. There is no user setting that would bypass the "access denied" error.

Cd&
0
 

Author Comment

by:__rdr__
ID: 12232687
No there is nothing cross domain, I am testing everything fully now and it seems to work just fine.

I have changed the layout to use a frameset rather than an iframe, and was just wondering what
everyone seems to have against iframes?  Are they not widely supported?

Also, does anyone know of any good resource sites for finding out what css elements work with what browsers?



0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12232704
Actually I like iframes correctly used, but I have very little use for frames, because framed sites are a horror to maintain.  

As for a CSS site: http://www.blooberry.com/indexdot/css/index.html

Cd&
0

Featured Post

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

770 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