Hi, I’m a CSS idiot and I have a question, so I’ll ask you. If I have a web page A that includes an iframe B, can page A override the CSS in iframe B?
Thanks in advance. 
Hi, I’m a CSS idiot
Previous post: Changes in url queries
Next post: Talk like a Pirate!
{ 86 comments… read them below or add one }
You think *you* are a CSS idiot? Have you *seen* my web site?
(Sorry, I don’t konw the answer but still felt the need to comment. I have no idea why…)
It depends on if iframe B has a HEAD element in it, with its own CSS.
Depending on the browser, either the web page A will override any common CSS, or the iframe will display the CSS only inside the iframe.
I should also point out that some blogging systems with these new-fangled Web 2.0 CSS files (like WordPress using Hemingway or K2) will also further frustrate your efforts.
You have to just try it and see.
I don’t believe so, I believe that the CSS is controlled by the iframe html still. But don’t hold me to it, I haven’t tested it.
No it can’t.
The iframe in Page A is just a container element which links to the page in iframe B. Thus iframe B will only adhere to the CSS included within its page. There is no way to override this, unless of course they share the same stylesheet.
If we could override the CSS then we’d notice more customized Adsense Ads floating about on the web.
Not directly.
However, if the iframe page uses script to generate the CSS, you can disable that by pushing the iframe into secure mode using this attribute:
security=”restricted”
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/security.asp
Absent some pseudo-XSS Javascript tricks (which would depend on the iframe being written in a way to allow the ‘attack’), I can’t think of a way to make that work.
AFAIK not
regards
Tim
Just a guess, but if the iframe is wrapped in an ID in webpage A, you might be able to take advantage of cascade. This could be done with a separate ID outside the iframe (01), or specified within the iframe (02).
01.
02.
Of course, only if the iframe page itself isn’t using inline styles or calling the css from a site other than yours — which means the styles would load after yours and thus be the default styles.
Again, just taking a guess.
In short … no you can’t :]
If it’s something you really want to do then you can use PHP to fetch the page and change the stylesheet link before outputting it.
Hope this helps
If we are talking about inline styles then Page A’s style doesn’t affect Page B’s styles. As demonstrated here: http://www.empuriabravaonline.com/testing/iframe.htm
>>If I have a web page A that includes an iframe B, can page A override the CSS in iframe B?
I just did a BIG, LONG post and lost the WHOLE thing except what I quoted when I had to hit the back buttom for the captcha.
Let’s try again, a shorter version.
Try Google Calendar to see! The calendar is remotely hosted by Google and pulls up in an iframe on our pages. The CSS applied for a page is on an individual basis, and since Google actually controls the calendar that’s in the iframe, they control the formatting, which is not over-written by our CSS. It’s controlled by whatever styles Google has applied.
However, if Google were to allow us to provide a link to our stylesheet that we use on our sites, that would be remotely called and applied to the calendar page, then the formatting in the Calendar would be consistent with the rest of our site, since the same stylesheet would be applied.
I’m not a CSS expert, but I believe the answer is no. Iframe like any other frame is considered another document from the point of CSS.
The answer is no. I’ve tried, but no…
I’d be happy to hear a response contradicting me, and to learn from that, but I don’t believe that you can alter a frame or iframe pulled from any external/internal site that you call via iframe.
Obviously, the alternative is to not use iFrames – pull in the content via other means.
As far as I know iFrames aren’t Google-friendly any way, right?
Marcia, Marcia, Marcia!!!
Question Matt, do you want to be able to do that and get the solution or do you want to restrict it to happen?
Although technically NOT CSS – there is One possibility:
If Page B is another Web site:
Page B can include Certain URL parameters to change certain Layout features it as it loads – into Page A – some enhancements can also be done using Javascript (document.write).
Of course, if Page B is on the same web site as page A -the obvious solution would be to make a duplicate and REMOVE the (dot) Css Link from the New Page B
Although this solution is technically NOT CSS – there is One possibility:
If Page B is another Web site:
Page B can include Certain URL parameters to change certain Layout features it as it loads – into Page A – some enhancements can also be done using Javascript (document.write).
Of course, if Page B is on the same web site as page A -the obvious solution would be to make a duplicate and REMOVE the (dot) Css Link from the New Page B
Although the following solution is technically NOT CSS – there is One possibility:
>>>>If Page B is another Web site:
Page B can include Certain URL parameters to change certain Layout features it as it loads – into Page A – some enhancements can also be done using Javascript (document.write).
>>>>Of course, if Page B is on the same web site as page A -
the obvious solution would be to make a duplicate and REMOVE the (dot) Css Link from the New Page B
Although the following option is technically NOT CSS – there are other possibilities:
///////If Page B is another Web site:
Page B can include Certain URL parameters to change certain Layout features it as it loads – into Page A – some enhancements can also be done using Javascript (document.write).
/////Of course, if Page B is on the same web site as page A -
the obvious solution would be to make a duplicate and REMOVE the (dot) Css Link from the New Page B
RogerB
“Question Matt, do you want to be able to do that and get the solution or do you want to restrict it to happen?”
My guess; Matt is most interested in
restricting it to happen
The way you want it is not possible. Only some big scripts can copy styles from A to B, but then they have to be on the same domain.
Otherwise it can’t be done, an iframe is like a new browser window.
UPDATE:
If Page A links to a CSS file but iFrame B doesn’t, the iframe doesn’t take on the styles from Page A.
http://www.empuriabravaonline.com/testing/iframe2.htm
>>If Page A links to a CSS file but iFrame B doesn’t, the iframe doesn’t take on the styles from Page A.
Exactly what I was thinking about a remote call from Calendar (which ROCKS, btw) to our own stylesheets, but thanks! This info is good to know for sure if we want to use iframes but are a little crusty on trying anything new.
By the way Matt, looks like you are not the only one, that believes he is a CSS-Idiot. Research at Google tells, there are close to 3 Million….
http://www.google.com/search?sourceid=navclient-ff&ie=UTF-8&rlz=1B2GGGL_enCH176&q=css+idiot
Did you ever hear of that woman that had health problems and visited a doctor in Germany? The doctor told her, that for her disease, she should go and research at Google…. At home she checked her yellow pages (phonebook) and wrote down the Address of Google picking up a cab. People at Google where pretty surprised as she showed up and helped her to research online for help on her problems. What nice staff you guys at google have.
And Harith, that’s what I believe he is aswell. Question is, what for would somebody use iframes, if the content would be from the same website? CSS wouldn’t need iframes anyway. Simply would have to make a div scrollable…. If it’s external content of course it’s much different…
RogerB -> Actually there are only 486 of them:
http://www.google.com/search?num=100&hl=en&lr=&q=%22css+idiot%22&btnG=Search
Simple answer to your question: No.
Reason it is that way: to prevent cross site scripting.
There is one exeption to this rule though: if A and B are from the same Domain, then you can use javascript to change everything in booth frames, including any part of the css.
Happy css/javascript hacking!
Sebastian
You can do this via javascript.
I’m with Sebastian on this one.. You’d have to hack it bits =)
You can access CSS properties using JavaScript*, but the browser security model will not let you access a framed page. There are some differences if both pages are on the same domain/ “agree to each” other via the JS “document.domain” property.
*E.g.
…
…
var elm = document.getElementById(“foo”);
elm.style.MozOpacity = 0.5; // div is now half transparent
(The HTML I posted in above sample was removed.)
Like Andre, Sebastian and Philipp already said, this is a no-go.
I guess the Google Adsense guys would be in a lot of trouble if one were able to programmatically manipulate the properties of iframed blocks of Adsense code
One word answer: Depends.
Iframe has content from same domain, then ‘Yes’. You can use javascript to do this. (Its your site and you have full control)
If the iframe src is from a different domain then you can’t do it. (Security… blah blah). Eg: if this was allowed, anyone could have easily modified the way Adsense advertisements look
For short: It is not possible due to security reasons. It might be possible if both pages are on the same domain and you use JavaScript.
Actually for those that say you can use javascript… it depends what browser you’re using.
A common example of this is “adsense tracking” by attaching an onclick event to all of the A tags in the iframe… works in IE, not in FF… so in FF one has to cleverly guess if the mouse pointer was over the iframe on page unload..
theoretically this IE behavior shouldn’t even be allowed..
for CSS, you have to do what Google’s doing… and allow the user to create javscript variables that are then given to the script that produces the iframe.
No. Not with any straight-up CSS only approach. But you should really ask one of your Google AdSense team co-workers. I’m sure they have some interesting stories on how publishers have tried to override the default styling of adsense ads in iframe.
Hi. I was just wondering, wasn’t you going to change the design of the blog sometime?
This theme is pretty boring already.
> No. Not with any straight-up CSS only approach.
Right, and the length of these commment already show any other solution isn’t really worthwhile.
The question I have is…why would you want to? Just curious as to the example.
And the answer I have is…not directly. As Sebastian pointed out, this is cross-site scripting so it wouldn’t work, unless the two pages were part of the same site. If they were, of course, you could just pass a querystring parameter within the iframe and do it that way…but you probably already thought of that, because well you’re a Googlegeek and you guys think of junk no normal human being ever could.
I vote with the No ppl
Could you create a script that would curl / fopen the contents of the iframe and then write it to a new file (adding of course the CSS you want at the beginning), Then you could include the new file as an iframe?
If the iframe is changing, you could cron it so your open and copy routine ran every x seconds.
I tried to monetize a few pages in my blog with Amazon iframes, what a mess!!
My question is:
Do Amazon iframes and other “in content” redirects lower ranking in Google?
Yeah sure, like I could ever get an answer on this.
Have a nice day!
Thanks for the answers, everyone. Glad it wasn’t a completely trivial question. Marcia, I can neither confirm nor deny that I wanted to take an embedded Google Calendar iframe and play around with restyling it.
Oh well. I see good reasons not to allow cross-site iframes to be restyled (e.g. then people could make AdSense look pretty weird without permission).
Aaron Pratt, my guess is that iframes aren’t indexed in Google, but I haven’t looked in the code to be sure.
RogerB, did the “woman went to Google’s office for health advice” story get written up anywhere? I’d enjoy reading about that.
It gets worse if you consider Internet Explorer, which allows Javascript to be embedded in CSS. If you could apply CSS rules to an iframe, you could in theory steal sessions using JS in the CSS in the most popular browser on the planet…
Sure Matt, you can read it in a interview with Stefan (Keuchel), but it’s all in german…. but I know you have translation software available… or german speaking staff there aswell…
http://www.heise.de/tp/r4/artikel/23/23512/1.html
Search for: “Vor einigen Monaten klingelte eine alte Dame” within the page and you get to the funny story with your honestly supporting staff at the counter…
Everybody talks about websearch, mobile search and so on. Hey but what do we do with the old’s that don’t know how to get information. I’d say we send them to the counter of Google Germany and they get the best service….
No is my answer too! Imagine how easy it would be to “steal” another site and make it look how you want it to.
Im not sure about them crawling the src of an iframe, but like with other frames, Google doesn’t count whats inside iframe as part of the page.
>> You can do this via javascript
Very helpful post … care to explain how?
it should be by definition NOT POSSIBLE
if u can do it – u risk that it works only on that browser, this version of the browser, etc
u know, people in MS were not that stupid, they really put some effort in anti-XSS battle.
This absolutely is an idiot question, google it before ask your questions.
Sebastian (or anyone) – what browsers can access a document (on the same server) in an iframe? I really don’t know the DOM by heart, but I wondered about something like this recently for a site.
Also, Matt, I just read the post about the site that was banned for keyword stuffing at the bottom of the page, please thank whoever wrote that code from me
I would recommend spooling in the content you wanted to iframe (say with curl or something) onto your own page. Then you will have the actual content, and you can style to your hearts content.
> Matt Cutts Said,
> …
> Aaron Pratt, my guess is that iframes aren’t indexed in Google, but I haven’t > looked in the code to be sure.
They are indexed for sure 100%. I see it all the time on the the logs of my adserver. Only way around that is to write the iframes with javascript.
Then again: a while ago creepy google now even reads my javascripts for bannerrendering.
iframes isn’t that something on that boat Noah built, can’t seem to remember there being 2, oh well you might try using AJAX this would allow you to control the included pages content with that pages CSS sheet.
Insert in head of page or use as an include
________________________________________________________
var rootdomain=”http://”+window.location.hostname
function ajaxinclude(url) {
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject(“Msxml2.XMLHTTP”)
}
catch (e){
try{
page_request = new ActiveXObject(“Microsoft.XMLHTTP”)
}
catch (e){}
}
}
else
return false
page_request.open(‘GET’, url, false) //get page synchronously
page_request.send(null)
writecontent(page_request)
}
function writecontent(page_request){
if (window.location.href.indexOf(“http”)==-1 || page_request.status==200)
document.write(page_request.responseText)
}
__________________________________________________
Put where you want it inbetween body tags
__________________________________________________
ajaxinclude(“afile.htm”)
__________________________________________________
Included file must be from the same domain due to security.
Should work in FF IE5+ and Opera
Hope this helps. If it does can i be cheeky and get an answer to this question.
If I put this link in my homepage for my blog, the content of which wasn’t featured on my home page would it be considered a form of cloaking?
Just realized you filter out most of the tags if you want to view the whole of the post – www macseyco com/ajax-4-matt html
I don’t think you r IDIOT, it’s a very relevent Quary.. I do not know much CSS, But intesting one.
thanks
SEO
Pretty much unrelated but I have never seen anyone else complain about it Matt so I thought I’d throw it in here:
Your site scrolls very awkwardly (jerkily) in my browser (Firefox).
I believe it is an issue with the body tag’s css attributes:
body {
margin: 0;
padding: 0;
background: #E8E8CE url(images/bg.gif) repeat-x fixed;
font-size: 78%;
font-family: “Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, sans-serif;
color: #333;
text-align: center;
}
I don’t see that ‘fixed’ on the background image doing anything and in my testing (Firefox with Web developer’s ‘CSS’ -> ‘Edit CSS’ gizmo ) removing that one word solved any scrolling awkwardness.
As an aside – if all you want is a solid background colour – why bother with a background image at all?
I think you could replace this line:
background: #E8E8CE url(images/bg.gif) repeat-x fixed;
with this one:
background-color: #E8E8CE;
without any negative consequences.
Just my tuppence.
Dean
I have recently ran into this issue with a client and struggled to turn the iframe A into a scrolling div that used frame B or what I turned into a regular html document as an include. I ran into the issue that it would pull the data and page A would display correctly but no matter what I tried the scrolling div would not pull the include with the styles. It would pull the data just fine but no background color, font size or anything else. After hours of effort I went at it with a different approach.
I know Google doesn’t index the frame B from an iframe page even though it probably contains the content so I turned the Page B into a full page with a Title, tags, and all the other good SEO stuff. I then tied that page B into the sitemap, navigation and other links versus Page A and when a person visits Page B, javascript reloads the page to open in inside of Page A thus displaying the full page.
I really hope I am not doing something black hat and don’t think I am because I am not redirecting spiders anywhere and attempting to display the relevant content to both the user and the spider. This should allow the content from Page B to the stuff that gets indexed. I go into a little more detail about it in an article I just wrote about this topic on my website at http://www.seoslap.com.
Matt or anyone else, if you have any advice on this I would love to hear it.
Thanks,
Brad Henry
Hey, talk like a pirate day is over:
Arggggh, matey! What is the sum of 2 + 8 ?
As hinted at earlier, you may wanna just scrape and copy/adapt the iframed page instead. Dynamically if you like (and can afford the bandwidth/server power)
Hmmm, maybe you can talk somebody into adding the &cssoverride= parameter to Google’s cache: search. It would only take a couple of lines of code to replace one style element with the next, or to add an extra style set…
Or were you just phishing for people stealing other people’s content and making it look like their own? In that case, please ignore my comment.
Of course, this is all speculative as we’d *never* dream of using frames would we !?!
…..they’re just bad, and evil!
(let the stoning commence
)
Matt, perhaps it would serve you better to tell us what you want to accomplish rather than ask how to or whether you can to do what you’ve decided is the solution.
Short answer is no. The imported document is a separate entity and not a part of your document. It is simply viewed through the window that *is* a part of your doc.
cheers,
gary
reading these comments top to bottom, ignore everything up until Sebastian’s post.
If your A is on the same domain as B, you CAN manipulate the contents of its DOM. you can read properties of the document, and do lots of great stuff. Like, resizing the iframe to match the size of the document within. Replacing content. Changing the stylesheet… or just about anything.
but if A and B are on different domains, javascript ain’t gonna let you do that.
that’s yer answer…
The rule in CSS, is that everything works from front to back. So for example: we have div A saying color:black; and then we have div
B which contains div A in it and says font-color:blue; so in this scenerio the color:black will take effect, and will override the color:black
So to sum it up in a nutshell “the closer you are to something the more influenced you will be by that something”
A different case:
If however: in the same div it first said color:red and then later on in that same div it said color:white; the color:white will take effect.
Beyond struggling over a CSS hack for the iframe, this is new and provides a way for customization of the Calendar front end using the Calendar back end, using the API, and should be fun for the technically-minded
http://code.google.com/apis/gdata/calendar.html
An iFrame is a window control. Although it resides within another window (page A) the iFrame is not scriptable from page A. If it were it would break the browser security model and be open for cross site scripting attacks.
Faint.
CSS is becoming more and more important, however, I konw little about it. But how can you say you’re “a CSS idiot”?
What httpwebwitch and Ed said above: if document A opens an iframe containing document B, and the source of B is on a different domain, A can control the iframe’s properties (such as width and height) because that element belongs to A, but it cannot access or modify document B’s properties, including styles. That’s just the way the JavaScript DOM works.
is this mean we can’t override the look of AdSense ads?
it’s inside an iframe right?
Shawn K. Hall, you quoted a Microsoft MSDN link on Matt Cutts’ blog? Haha, that’s horrible.
If your A is on the same domain as B, you can change the contents of it.
A and B are on different domains, you can’t do it.
If your A is on the same domain as B, you can change the contents of it.
A and B are on different domains, you can’t do it.
Thanks for all the info!
Brain Magee’s comment had a good point above.
These answers should help webmaster to decide if they can combine 2 websites and yet crawlable by SE.
I created a new online CSS editor you might want to include on your page. It’s free (and free of ads and popups) You can find it at http://www.poodwaddle.com/cssgizmo.html
Shortly I will be adding a CSS Menu creator also so keep an eye out for that. Hope your readers like it. Feedback is welcome
I have been asked this question many times. In short, the answer is yes. If both page A and B share the same naming conventions for class or id’s, then A will always override B.
I have built many a site using iframes for thank you pages or rollover informative popups, modal content, etc. All using their own css.
The following is one example where I have used this throughout the site:
http://www.privacymatters.com/
I want to agree with Paul.
If you set up the right referencing it will be possible to manage the iframe’s design out of one stylesheet.
greets tim
But one thing i forgot to mention:
its never a bad idea to realise a website without iframes
CSS design is the basic of Web 2.0 framework. What is Matt’s opinion on it ?
It can be done via javascript; I only managed to do it in Firefox (2.0.0.5)
about css parameters
http://css-lessons.ucoz.com/css-parameters.htm
Yes guys, it can be done easily.
Forget everything you were thinking.
You’ll need to add the SNOOPY class to your page from here:
http://sourceforge.net/projects/snoopy/
Then simply retrieve the content of the iframe using SNOOPY, and Vio’la, the iframe contents are now directly pasted onto the original page, available for styling like normal.
I know, I’m good.
The page B can be overridden by A, if it is in the same domain. Otherwise it is not possible at all.