CODEWITHSUNDEEP
javascripthtmlcssiframe
Babiker
Babiker

Reputation: 18798

How to keep page's CSS from effecting an iframe that loads an html document?

I have an iframe that when loaded changes a bit. Is there some sort of reset or something i need to apply? How do i keep the iframe's content looking the same regardless of which page it loads in?

Upvotes: 2

Views: 1541

Answers (3)

Mark Robbins
Mark Robbins

Reputation: 2457

I think if you have a subdomain and you put that in the iframe it will stop the css.

//from my.com
<iframe src="subdomain.my.com"></iframe>

Upvotes: 0

Alex
Alex

Reputation: 35409

Prefix your styles with :not(iframe)

So your CSS definitions will look like the following:

:not(iframe) body div { margin:0 auto; } /* only applies styles to div's */
                                         /* inside body and not inside an */
                                         /* iframe */

Upvotes: 1

Matt Stein
Matt Stein

Reputation: 3053

You can't load the iFrame in a vacuum; once it's brought into a context where stylesheets are applied, it'll follow right along with everything else on the page. Fortunately, however, it's just a matter of building your stylesheets accordingly.

One approach would be to dedicate an ID to only that iFrame's container, such as #myiframe, and then be thorough and specific with all the styles you'd like applied. Design your stylesheets to avoid conflicts with this element, and use the !important declaration if you get into a pinch and need the sub-property to override inherited styles. It boils down to careful design more than anything else, and a healthy appreciation for how cascading style sheets work.

Upvotes: 1

Related Questions