Solved

Making pages loaded in an iframe inherit parent pages style?

Posted on 2004-10-04
8
5,821 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
 
LVL 53

Expert Comment

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

Cd&
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

760 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now