Apply margins to all but iframe

Question

Hi all,

I have a ‘page a’ using ‘css a’. This page has margins set in css. I also have a ‘page b’ using ‘css b’. This page also has margins set in css, of the same size as in ‘css a’ (10px).

Is there any way I can make it so that when I am viewing ‘page a’ on its own it has margins, but when viewed in an iframe on ‘page b’ the margins don’t apply to ‘page a’. I know that’s kind of a long way of asking but the basic problem is that I am getting ‘double margins’ for the content in the iframe: the margin from ‘page a’ and then the margin from ‘page b’!

I guess one way of doing it would be to set the iframe not to be affected by ‘page a’s’ margins. Is there some way I can set ‘css a’ to exclude the iframe from the margins, that way only the margins from css b would apply and the page would still be in alignment. is that possible?

Thanks for any help

Matt

Answer 1

You can use Javascript to change the margins if the page is inside an iframe.

Answer 2

I don't know a way of specifying it from within a.css, but if you add the following to b.css:

iframe { margin:-10px; }

...it may work.

EDIT: Is the iframe with a.html the only item contained within b.html?
Do you have test files?

EDIT(2): In css, you would specify it as

iframe#head { ...; }

Also, I think you can comment on responses to your own questions. I could with mine.

Answer 3

Im really sorry i know everyone gets very upset with posting answers rather than comments im new to stack overflow and just learning. Have mercy! I have figured out what i was doing wrong and now i have this 'open id' thing i will try to post in the right place. I'm afraid this time though i have to post as an answer as i started this question without my open id and so still cant comment on that stuff....

OK now thats out of the way here is a 'test case' : http://cart3.jaspers-sensations.com/test/pagea.html

Page b is : http://cart3.jaspers-sensations.com/test/pageb.html css a is : http://cart3.jaspers-sensations.com/test/stylea.css css b is : http://cart3.jaspers-sensations.com/test/styleb.css

Answer 4

Having read your clarification, I don't think you can do that purely with CSS. I'm pretty sure CSS can't go across frames.

You should be able to do this using JavaScript, though, provided both documents are on the same domain.

For example, this should work on your example page. Add the following attribute to the <iframe>:

 onload="window.frames[0].document.body.style.margin = 0"

That works in Firefox 3 and Opera 9, at least. But it's decidedly old-school JavaScript, and considering my browsers were being a bit fickle in which variants worked, I'm not sure how easy that would be to apply to the real site.

People more well-versed in JavaScript than me should be able to help out there.

This might help some more:

• Accessing the document inside an iframe