Prevent iFrame from taking parent CSS

Question

How is it possible to prevent a iFrame object from taking on css properties from the main page. (or I think that is what it is doing)

Specifically:

I'm creating an iframe object in my main class and I'm trying to change the opacity of the main page when the iFrame is displayed but for some reason it changes the opacity of the iFrame too. I tried to put the code but it looks to ugly...

Basicly im trying to do something like the Facebook (or may other websites) way of looking at images. The background turns dark(ish) and a page pop ups and you can navigate through that.

Answer 1

How is it possible to prevent a iFrame object from taking on css properties from the main page.

Do nothing. iframes contain independent documents, CSS will not cascade into them.

I'm trying to change the opacity of the main page when the iFrame is displayed but for some reason it changes the opacity of the iFrame too

opacity changes the rendered content of the element to which it applies, not each individual descendent of that element.

Don't put the iframe inside the element you are setting the opacity of. You'll probably have to use absolute positioning to get the layout you want.