A subdomain http://board.woodstockschool.in will display a content within Iframe from my.woodstock.ac.in.
In the HTTP headers from my.woodstock.acin it does have this entry:
Access-Control-Allow-Origin => http://board.woodstockschool.in
But I'm unable to change the content look using CSS from the board.woodstockschool.in website.
I've tried these as well:
a ,iframe a{
color: red !important;
}
This changes color of all links except for in the Iframe.
There is an array of questions like How to apply style to a div which is inside an iframe of the page? in here but none with CORS enabled.
I've checked https://www.w3.org/wiki/CORS_Enabled#For_Apache but find no mention of css there.
What is the way to apply the css rule from the wrapper site without using any javascript?
What is the way to apply the css rule from the wrapper site
There is no way.
The closest you could come would be to:
Set a query string on the iframe's src and then have the embedded page use server side code to stick a <link> to the stylesheet in based on that.
Use postMessage to send a message (possibly including the URL of the stylesheet) to the embedded page and then have JavaScript running on the embedded page add the <link>.
CORS will not help or hinder you in this. It's entirely irrelevant.
The best way may be the following (in case you control both sites):
1) set the iframe link with style parameter, like:
http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D
(the last phrase is a{color:red} encoded by urlencode function)
2) set the receiver page target.php like this:
<head>
..........
<style><?php echo filter_var($_GET['style'], FILTER_SANITIZE_STRING);?> </style>
..........
Related
I inherited a WordPress plugin that sends an RSS feed of content to Mailchimp to generate an email. This code (which I cannot find the source) is adding an extra logo image which is throwing off the formatting. I know I should add something like
<!--[if !mso 9]><!-->
to the code if I want to hide it in Outlook, but I cannot find the source to add this. I can only add external CSS. The usual display: none works in the other email platforms. Any advice on how to remove this extra image instance in Outlook via external CSS?
The code you provided is an HTML conditional comment. It can only work embedded in the HTML code. If you want to hide an element from an external stylesheet in the Outlooks on Windows (from 2007 and above), you can use the mso-hide:all property. It’s basically a display:none but for Word’s rendering engine. Although, contrary to display:none, this doesn’t always inherit to <table> children elements. In that case you could use a double selector like the following.
.your-element,
.your-element table {
mso-hide: all;
}
I have a html page and i insert a iframe in this page.
I have a problem with iframe contants. In iframe show a button which have link to go on website anywhere, i want to that button does not show how set in CSS
{display: none}
but how in iframe button no detect any css rule for displaying none.
Help me CSS MASTERS
You must use seamless attribute:
This Boolean attribute indicates that the browser should render the
inline frame in a way that makes it appear to be part of the
containing document, for example by applying CSS styles that apply to
the <iframe> to the contained document before styles specified in that
document, and by opening links in the contained documents in the
parent browsing context (unless another setting prevents this). In
XHTML, attribute minimization is forbidden, and the seamless attribute
must be defined as <iframe seamless="seamless">.
The problem is that browser support is currently negligible. Meanwhile, you can watch Seamless iframes. The future, today!, a slideshow which can give you some ideas of how to implement those functionalities.
When connected over SSL particular styles are getting dropped from the stylesheet. I can't figure any rhyme or reason to it but it's the same styles that are consistently dropped. Perhaps notably, elements that were to be hidden with display:none; are visible. List styles also revert to default browser settings and a couple background images (not all of them) get dropped as well. All URI paths are relative -- both from the page head as well as from the stylesheets themselves.
For example, the following works...
body { background: url(../images/bg-yellowstripes.jpg) repeat 0 0; }
However, the next line does not...
#masthead { background: url(../images/bg-header.jpg) repeat-x 0 100%; }
Anyone have any experience with this that could help the page display properly and avoid the IE mixed content warning? Only affect Internet Explorer btw. Firefox, Safari, Chrome all render the page normally, without any SSL warnings.
It sounds like you're loading your CSS files with absolute paths. For example, if you have a site that is going to be served over HTTP and HTTPS, you should use a relative path instead.
Absolute: (Don't do this, IE will give security warnings when viewed over SSL)
<link rel="stylesheet" href="http://mydomain.com/css/style.css" />
Relative:
<link rel="stylesheet" href="/css/style.css" />
If the style is coming from another domain (such as a CDN), use double slashes instead of specifying the protocol. This will cause the path to inherit the protocol the page was requested with when making the CSS request.
<link rel="stylesheet" href="//otherdomain.com/css/style.css" />
Also, use the IE developer tools. They will tell you exactly what network resources are being loaded from the page under which SSL and not.
As well as the relative path structure, if it is IE9 and below there is a memory limit in the client that if the style sheets are to big it will just stop loading them. I can see this happening if you are caching a bunch of files
If you are loading fonts from another URL (such as: fonts.googleapis.com) please check the preamble in you CSS. Be sure the path also specifies: "HTTPS" in the path. This simple change solved my CSS over HTTPS problem instantly.
OLD PREAMBLE:
#import url('http://fonts.googleapis.com/css?family=Roboto... etc)
CORRECTED PREAMBLE:
#import url('https://fonts.googleapis.com/css?family=Roboto... etc)
Try adding quotes to your css background paths, like so:
body { background: url('../images/bg-yellowstripes.jpg') repeat 0 0; }
Also, I've read the background property needs a specific order of the values (color url Xpos Ypos repeat). So it would be like this:
body { background: url('../images/bg-yellowstripes.jpg') 0 0 repeat; }
Other than that, my styles were dropped too once, when I was loading them over http:// on a https:// website. But since you're using relative paths, I'm guessing it's something else.
It might be a caching problem.
I'm having problems with the content loaded with AJAX inside a DIV.
I need custom CSS for the loaded content, but using <style> tag inside the div (or anywhere outside the <head>) does not respect the W3C standards.
Even more, in IE8 using <style> inside the div is not working as expected.
How can we solve this situation?
You could have the AJAX response modify the the contents of the <head> tag and add a new style tag. Your response would have two parts to it, the HTML and the CSS. The CSS should be added to the document before the HTML to ensure it is used.
Check out this post for adding CSS to the head: i prepend the css to the end of head tag
I'm assuming you have already been able to load something with AJAX into your page. Just convert your response to a JSON response with two parts, the CSS and the HTML. The JSON Spec might help too. You will need to escape any HTML or CSS that you send as a response.
I want to refer to an image in my main stylesheet for a Grails app and I can't get it to work. My image lives in the standard location in my Grails app...
project\web-app\images\outbound-blue.png
In my stylesheet I want to use it as a background image for a class...
.messageimg {
height:17px;
width:16px;
background-image:url(images/outbound-blue.png);
background-repeat:no-repeat;
}
This doesn't work for some reason. My stylesheet is in the normal location too, i.e.
project\web-app\css\main.css
I get a missing image marker when I load the page in the browser. I have checked that I have no typos in names etc. I have also tried fiddling around with the virtual path in the url, but I can't figure out what I need to put in there to make this work in Grails.
I don't want to use GSP and insert an IMG tag into my code because I want to control the image through styles.
So, what am I doing wrong?
A more portable way to specify image locations is to use the resource() function:
.messageimg {
height:17px;
width:16px;
background-image:url('${resource(dir: "images", file: "outbound-blue.png")}');
background-repeat:no-repeat;
}
Try adding "../" at the beginning of the URI. For example:
../images/outbound-blue.png
The "../" at the start of the URI tells the browser to go up one level to the parent directory then look in the images directory. Currently you have it set up to look for a subdirectory called images in the directory containing stylesheets.
Be aware though. Using $resource{... does not work within a referenced .css file. You need to add a style element.
Typically you would reference a resource in a style sheet as a relative url. The url of your image should be relative to the CSS file's location. So ../images/outbound-blue.png from /appName/css/main.css will be referencing /appName/images/outbound-blue.png
If you are still having issues, You can debug this by using a tool like firebug to inspect the page and verify each step in your style.
Verify that:
The item that you think is being styled is picking up the styles.
The image that you are referencing can be accessed both manually, and via firebug.
The css file that you are loading isn't cached and is actually refreshed by the browser.
So the problem seemed to be that the browser was looking into
http://localhost:8080/<app-name>/assets/images/<background-image-name>
which seems correct but if you inspect other images on the page, they render from the path
http://localhost:8080/<app-name>/assets/background-image-name
So, just by excluding images in your path-name should fix the issue. However, this is just a work around which I am sure would have a better explaination and a solution. Cheers.