I am using the Chargify service and within their settings they allow you to include some custom CSS. I am including
#import url(http://swag-box.herokuapp.com/chargify.css);
I can see that the CSS is being embedded into the page but It doesn't seem to be affecting the page in anyway.
You can view the live page here.
What exactly is the problem here?
Using #import is not necessary. You can just do:
<link rel="stylesheet" type="text/css" href="//swag-box.herokuapp.com/chargify.css">
The use of // makes the request use the same scheme as the page. In your case the page scheme is https. However, you were including via http. Some browsers will considre this unsafe and block the resource. That is why you were not seeing the import (it was working). You can of course change the #import to use https or //.
You can also update the browser settings to allow the unsafe resource to be loaded, but this is a per-user setting. If you are using Chrome, you will notice a shield to the left of the favorites star.
No quotes are required in the url declaration for #import.
EDIT: always use https
Related
I've created a micro page with absolutely no external references, even without any favicon.ico.
Instead I'm using base64 inline images.
The only CSS I'm using is inline of a <div> element.
The following code is not part of my source, so I don't know where it becomes generated.
Where and how does the following code come from?
What is it's meaning? What consequences does it have?
Fulltext for copy&paste:
<style type="text/css" style="display: none !important;">object:not([type]),object[classid$=":D27CDB6E-AE6D-11cf-96B8-444553540000"],object[classid$=":d27cdb6e-ae6d-11cf-96b8-444553540000"],object[codebase*="swflash.cab"],object[data*=".swf"],embed[type="application/x-shockwave-flash"],embed[src*=".swf"],object[type="application/x-shockwave-flash"],object[src*=".swf"],object[codetype="application/x-shockwave-flash"],iframe[type="application/x-shockwave-flash"],object[classid$=":166B1BCA-3F9C-11CF-8075-444553540000"],object[codebase*="sw.cab"],object[data*=".dcr"],embed[type="application/x-director"],embed[src*=".dcr"],object[type="application/x-director"],object[src*=".dcr"],object[classid$=":15B782AF-55D8-11D1-B477-006097098764"],object[codebase*="awswaxf.cab"],object[data*=".aam"],embed[type="application/x-authorware-map"],embed[src*=".aam"],object[type="application/x-authorware-map"],object[src*=".aam"],object[classid*="32C73088-76AE-40F7-AC40-81F62CB2C1DA"],object[type="application/ag-plugin"],object[type="application/x-silverlight"],object[type="application/x-silverlight-2"],object[source*=".xaml"],object[sourceelement*="xaml"],embed[type="application/ag-plugin"],embed[source*=".xaml"]{display: none !important;}</style>
I can think of two possibilities:
1) Added by a browser plugin or extension.
Try running in Incognito mode with all extensions disabled, and if it's due to a plugin or extension the additional content will go away.
2) Added by the web server that is serving the web page
To see if it's #2, load the HTML file in your browser using a local file:// URL and check if it's still there.
Most likely it's related to an Ad-Blocking type of browser plugin that is setting { display: none !important } CSS attribute for all Flash, Shockwave, Silverlight, etc. content on the page.
https://friends-with-you.myshopify.com/
I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.
<link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
What am I doing wrong at the above URL, and why isn't the css loading?
thanks!
Can you load your CSS file over both http and https? If so, change your tag to look like this:
<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).
A little more background: http://paulirish.com/2010/the-protocol-relative-url/
Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.
Change your link tag to use a secure URL:
<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
^
The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.
I just checked and pagodabox serves the CSS file just fine over SSL.
In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).
I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.
I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.
Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.
Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As #Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.
How should I reference my css file (which is in the non-secure area) from a webpage in the secure area. I've considered duplicating it (moving one in to the secure area) but this seems very inefficient.
Any advice much appreciated.
(p.s. there will most likely be a few follow up questions ha ha)
You can always avoid the issue by using a relative/rooted path:
<link rel="stylesheet" href="/css/screen.css">
If you must use a full URL, I'm not sure why you can't use the https protocol (which is the correct solution), but there's one more option: don't specify a protocol at all.
<link rel="stylesheet" href="//example.com/css/screen.css">
http://paulirish.com/2010/the-protocol-relative-url/
If the browser is viewing that current page in through HTTPS, then it'll request that asset with the HTTPS protocol, otherwise it'll typically* request it with HTTP. This prevents that awful "This Page Contains Both Secure and Non-Secure Items" error message in IE, keeping all your asset requests within the same protocol.
However:
Caveat: When used on a <link> or #import for a stylesheet, IE7 and IE8 download the file twice. All other uses, however, are just fine.
So if you must specify a full URL, the best/proper way is this:
<link rel="stylesheet" href="https://example.com/css/screen.css">
There's really no alternative. Relative paths to images and resources in the CSS file itself should work just fine with either approach, and won't trigger the security error. If you need absolute URLs in the CSS file, then you can use the same trick.
I have a servlet that generates CSS for a given colorScheme name if it exists in the database. However, should the colorScheme not be found, it issues a response.sendRedirect() to the location of the actual file on our CDN.
This works in all browsers except for IE when the CSS contains relative links to images for icons, backgrounds, etc. Every other browser uses the redirected URL (CDN url) to resolve the relative URLs in the CSS file, but IE still uses the original request URL (servlet URL).
I can't change the relative URLs to absolute URLs in the CSS files for a number of reasons I can't go in to. Is there a way to get IE to use the redirected URL instead of the request URL for the relative URL resolution?
Sounds like more of a code design problem. Personally I don't rely on IE to do anything as it should. It always lets me down :(. I would always include your CSS from the CDN at the begining of the head using the HTML LINK tag, then let the JS import overwrite it afterword. This way your website will also look decent in noscript browsers.
As a workaround you can use css #import tag instead of redirecting to the external css file.
#import url('http://www.example.org/style.css');
Since we are processing our HTML/JS in another servlet before the call to the colorScheme servlet, what I did was check to see if the requested skin was dynamic (from the servlet) or not at this stage. If the colorScheme is dynamic, I write out the link tag with the address of the CSS servlet, otherwise I write out the address of the CDN.
I'm working on a webapp, and every so often we run into situations where pages will load without applying CSS. This problem has shown up in IE6, IE7, Safari 3, and FF3.
A page refresh will always fix the problem.
There are 3 CSS files loaded, all within the same style block using #import:
<STYLE type="text/css">
#import url([base css file]);
#import url([skin css file]);
#import url([generated css path]);
</STYLE>
In any situation when we take the time to examine the html source, nothing is out of the ordinary. Access logs seem normal as well - we're getting HTTP 304 responses for the static CSS files whenever they are requested, and an HTTP 200 response for our generated CSS.
The mimetype is text/css for the css files and the generated css. We're using an iPlanet server, which forwards requests to a Tomcat server.
davebug asked:
Is it always the same css file not loading, or is the problem with all of them, evenly?
None of the CSS files load. Any styles defined within the HTML work fine, but nothing in any of the CSS files works when this happens.
I've had a similar thing happen that I was able to fix by including a base style sheet first using the "link rel" method rather than "#import". i.e. move your [base css file] inclusion to:
<link rel="stylesheet" href="[base css file]" type="text/css" media="screen" />
and put it before the others.
if it happens often enough that you're able to see it in your browser, try intalling the Live http headers Firefox extension or the Tamper Data extension, and watch the response headers as they are seen by the browser.
I don't know why, but in my case if the page is loaded from an action with the path like /ActionName, I see this problem.
But if I change it (for example) to /reservedArea/ActionName or /aPath/ActionName it works :/
It's crazy...
Examining the headers is a good idea, but I imagine all you will learn from them is that the server didn't respond to a request every once in a while.
I see this happen all the time on the net. Images won't load until you refresh, css is messed up, etc. All of the situations are solved by a refresh.
I imagine one way you could "fix" this, maybe, is by specifying in your cs file a url for an image for some element. Then, on page load in javascript, get that element and see if that image has loaded. If not, then have the page reload itself.
Seems pretty exotic, but that's the only idea I had...
Use ab or httperf or curl or something to repeatedly load the CSS files from the webserver. Perhaps it's not consistently serving the pages.