Is there any way of pulling in a CSS stylesheet into FireFox 2 or 3 that is not a static file?
Bellow is the code we are using to pull in a stylesheet dynamically generated by a CGI script.
<link rel="stylesheet" href="/cgi-bin/Xebra?ShowIt&s=LH4X6I2l4fSYwf4pky4k&shw=795430-0&path=customer/DEMO/demo1.css" type="text/css">
/cgi-bin/Xebra?ShowIt&s=LH4X6I2l4fSYwf4pky4k&shw=795430-0&path=customer/DEMO/demo1.css
Note that the URL above that pulls in the CSS does not end with .css rather the parameters do.
Is the Content Type from the server the correct one for the file that is served up?
Content-type: text/css
why isn't this working?
Double check that the response header for the cgi script has
Content-Type: text/css
The extension doesn't matter but you should make sure the content type is "text/css".
I've done the same thing in the past - a former employer's site uses a link tag much like yours, and works fine in FF2 at least (I just checked it, though I tested it in FF when we added that link). If it's not working, I'd suspect it's something about the generated CSS file rather than the importing page. The consensus appears to be the Content-Type from the server may be wrong.
Your server procs (like the CGI) run first, don't they? Seems to me that that link tag will only pull in a file that exists already.
So what I'd do is put a server tag (my lang's ASP/ASP.Net, but you could use PHP or anything, really) in the href.
Like so:
<link rel="stylesheet" type="text/css href="<% =getStylesheetPath() %>" media="all">
Give that a shot.
Related
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.
I'm having a css file and i want to modify it to fit my needs.
The problem is that it seems to be cached somewhere, as i just cannot see the changes, no matter what i do in the css file.
I am sure i am pointing to the right file, as by now i'v modified in it, and it worked.
Is there any setting so that i can turn the cache off?
Thanks!
As pointed out in this article http://www.wkoorts.com/wkblog/2009/07/12/css-auto-reload-with-django-templates/, you could force django reload your css file by using a parameter in your css link :
<link rel="stylesheet" type="text/css" href="/site_media/css/style.css?{% now "U" %}" />
This is a timestamp which takes a different value every second, so you could even reload your css second every second if needed!
Just go into your site, view source, and copy the link to your CSS file. Verify the link, verify it's being modified. Refresh the CSS file manually via your browser to get the latest.
This isn't a Django issue.
Did you try appending a datetime stamp to the end of the request? I know some frameworks do this to .js and .css files automatically to prevent caching.
Instead of using complicated solutions you can add extra parameter to your includes in the templates.
For static includes:
<script src="{% static 'js/polls/polls.js' %}?version=1"></script>
For direct includes:
<link rel="stylesheet" type="text/css" href="/site_media/css/style.css?version=1" />
Note the ?version=1 in the code. Every time you're modifying the file, change this version in the template, so browser will be forced to reload the file.
Of course you can use even now as suggested by #rom, but if your static files are not being changed very often, it's not the smartest idea to don't use cache at all.
the font of the content of my facebook app keeps getting italicized even when i've removed the italics from the css file. if i make minor changes in the css file and upload it to the server, the firebug shows the unedited previous css file and hence, the app keeps showing unformatted content. what exactly is going wrong here?
i made a new css file and copied the contents of the previous css exactly as it was, and i linked it in all the files which require css. but when i upload these files to the server, facebook canvas doesn't show any css at all. i replaced the css filename with the previous one, and it works. why is this?
Actually it looks like facebook is currently experiencing some weird problems with styling. It doesn't cache any new styles, only displays what was previously cached (from yesterday). If you provide a new stylesheet url it will not be able to pull it up (like that url doesn't exist).
During normal conditions what others already suggested should work.
Facebook does like to cache things. Persistently. I don't know why the new file wouldn't have worked, by I can recommend 'spoofing' your css filename with a spurious querystring variable, and incrementing it each time you make an update.
eg
href="my_css_file.css?x=1"
Sounds like the browser is caching your CSS file, which is why even Firebug sees the older version.
There are numerous ways you can prevent the browser from caching your CSS file during development (once in production mode, you probably want it to remain in the cache). The most common technique used by web frameworks like Ruby on Rails is to append a random query string to the URL, like so:
<link rel="stylesheet" type="text/css" href="style.css?96234987" />
...but the trick is that it should be different every time, so the browser thinks it's a different file.
Here are links to a simple trick for PHP, a JSP example, and other possible methods.
According to Include files on facebook developer wiki:
Stylesheet includes are cached automatically by Facebook. Just include a tag like:
<link rel="stylesheet" type="text/css" media="screen"
href="http://yourapp.com/stylesheets/style.css?v=1.0" />
Increment the version number upon each change to your style sheet, as specified above.
I got "dump" isp that always cached internet pages and its css for at least 1 day.
Although the css / js in the server changed, the presented css are not changed (i have been clear my cache everytime)
how to "tell" my isp not to cache some files like css and js ?
thank you !!
at the moment: i'm using proxy to check a under developed web so that it don't get cached ..
The way Stack Overflow itself solves this problem is to add a version parameter to the CSS and JS URLs, which refer to the version of the referenced files:
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=4542">
Every time the referenced files change, the href attribute of the link tag is updated in the HTML code, thus supporting caching and updated referenced files.
You could try to append some random string to every request of an external file like:
<link href="/css/style.css?cachekiller=1337" media="screen" rel="stylesheet" type="text/css" />
where the 1337 in the above code should be generated randomly for every request e.g.
<?php time() ?>
or something
You can include these documents directly in your HTML files, between <script> or <style> tags. It will obviously make all your HTML files bigger, but that's basically what you're asking.
It's the only way you can be 100% sure that your CSS and JS is not cached at all.
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.