In Chrome I get the following error messages in the console
[blocked] The page at https://domain.com/home.html ran insecure
content from
http://domain.com/typo3temp/stylesheet_09c1ef800c.css?1345207892.
if I call https://domain.com. The user gets a page without stylesheets and images. What can I do against this?
The files are included like <script type="text/javascript" src="js/lib/jquery-1.5.1.min.js"></script> but I don't want to define the domain.
Should I completely switch to https by setting the base URL with https? Which other possibilites do I have?
I used
config {
baseURL = https://domain.com
}
and adapted all links which had a http in the beginning (otherwise the slider stopped working because Chrome didn't load the other ressources ...). Seems to work now.
I'm using bootstrap and I added font awesome through Less, overriding the Glyphicons. The icons display OK in chrome but in Firefox i just see boxes.
This is how my directory looks like
-- Project
-- js
-- css
-- less
-- font-awesome
-- css
-- font
-- less
All I've modified in the Project > less > boostrap.less file has been:
#import "sprites.less";
//for this line
#import "../font-awesome/less/font-awesome.less";
As I said in Chrome works fine but for some reason Firefox shows only boxes.
Custom web fonts via CDN (or any cross-domain font request) doesn't work in Firefox or Internet Explorer (correctly so, by spec) though they do work (incorrectly so) in Webkit-based browsers.
You can fix this by adding headers to your page.
Apache
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
Nginx
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
add_header Access-Control-Allow-Origin *;
}
Credit: http://davidwalsh.name/cdn-fonts
If you want a quick and easy way to make Font-awesome work, try using CDNJS. It's free and powered by CloudFlare. CORS is supported out of the box.
Try something like this:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">
If you are hosting the font on S3, you have to enable CORS on the bucket. Through AWS Management Console, edit the properties for the bucket and under Permissions click on "Add CORS Configuration". In my case, if I left the default config, it still didn't work, so I changed it to:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
I was having issue with the if statement because I didn't have a $filename variable.
But I did have similar results using:
location ~ /\.(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
Using a CDN as premjg suggested is the least invasive method besides hosting it yourself. The latest version of fontawesome suggests bootstrapcdn, e.g.,
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
As a minor note, noscript silently blocks requests to the CDN unless whitelisted, and it won't prompt you to whitelist the CDN unless your page also requests JS files from the same domain.
If you're like me, modifying a web.config file is something you're not allowed to touch.
Try storing all the font files (.eot, .ttf, etc) into their own local folder, and link to them locally instead of the FontAwesome CDN. Cleared it up in IE and FF for me every time.
#font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }
If you're using wordpress and you think you've tried everything, look and see if you ever installed a Font Awesome plugin. Disable the plugin and refresh in Firefox.
This was the solution for me - the plugin's older version of font-awesome was overriding the files I was trying to update myself manually.
In fonts folder please upload the following files
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ Important glyphicons files----------------
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Please upload the following files and after that you link your font-awesome.min.css in your header file.
Here is the following link with proper files:
http://goo.gl/WICQAf
This is one of those things that on the surface of it seems very simple to resolve, but it's got me beat!
I can see from searching around that quite a few people have had this issue crop up but there seems to be no solution that I can find.
What I've done:
1. Transfered my site from the root folder into a /shop folder.
2. Changed the database entries for secure/unsecure base urls to https://www.dnabaits.com/shop/
3. Cleared out all the Cache and Tmp files.
What's happening:
The whole site is functional but no styles or scripts are being loaded because the paths in the head are missing the trailing / after shop.
So instead of getting this
mydomain.com/shop/skin/........
I'm getting mydomain.com/shopskin/........
An example Url from my page source
<link rel="stylesheet" type="text/css" href="https://www.dnabaits.com/shopskin/frontend/default/dna/css/lightbox.css" media="all" />
In your .htaccess file make sure you have this (with trailing slash):
RewriteBase /shop/
Another possibility is that your Store Configuration Scope for your Store View has a different setting. Change your Configuration Scope in Admin -> System -> Configuration -> Web and make sure your URL settings aren't customized there.
Can anybody tell me or give me a link to go to which can tell me how to implement and display images step by step (I'm only beginning) on a webpage from a spring project
I'm using IntelliJ
Thanks
What's the URL of the page? The one that appears in the location bar of your browser?
That is the URL to which relative locations are resolved in the HTML code. So, if the URL is http://localhost/MyApp/foo.html, and the URL of the CSS inside the HTML code is ../../css/style.css, the absolute URL where the browse will try to find the CSS will be http://localhost/MyApp/../../css/style.css, which doesn't make sense.
I prefer always using absolute paths for images and CSS files (and other resources). Using JSTL, that makes it like
<link href="<c:url value='/css/style.css'/>" ...
The <c:url> tag takes care of prepending the application context (/MyApp) to the path.
Note that relative paths inside CSS files are not resolved relative to the page URL, but relative to the location of the CSS file itself. So the path in your CSS file is correct.
I've been writing a simple text-editor in HTML5 that is supposed to work offline. I can't, however, get the offline application cache to work, and I can't work out why not.
My manifest file is like this:
CACHE MANIFEST
application.html
options.html
...
And it is being invoked as follows:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
...
I'm using Google App Engine to host the web application.
I've put the webpage through the W3C HTML validator (http://validator.w3.org/check?uri=https%3A%2F%2Fwrite-space.appspot.com%2F) and it comes out fine.
I've tested it in Chrome and Firefox. In Chrome nothing is added to the cache storage (and window.applicationCache.status returns 0). In Firefox the notification bar asking to cache the files does not appear. Basically, the files are not being cached.
I've looked at various demos that do cache for offline viewing, and cannot work out why my code does not work.
Can anyone help?
To add MIME-type text/cache-manifest for .manifest files in GAE use this in your app.yaml:
- url: /static/(.*)\.manifest
static_files: static/\1.manifest
upload: static/(.*)\.manifest
mime_type: text/cache-manifest
This would serve all .manifest files in folder static with the correct MIME-type.
You have to add a MIME type to .manifest:
.manifest using text/cache-manifest
In .htaccess:
AddType text/cache-manifest .manifest