I just started using cakephp and upto so far everything is going well, but my problem is that i want to have an IE6 specific stylesheet, i have been doing this for quite sometime with just normal HTML but if i try to do it in cakephp is doesn't put the stylesheet.
My code for outputting the IE6 stylesheet inside the default.ctp is
<!--[if IE 6]>
<?php echo $this->Html->css('ie6');?>
<![endif]-->
I have my stylesheets under webroot/css/ie6.css
Can anybody tell me what i might be doing wrong.
Thanks
Dee
When I add that code to my CakePHP project I get this output
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->
So it appears to be working fine. You might want to check if the file is actually at the right place (try to append /css/ie6.css behind the URL of the page you're looking at and see if it returns a 404 or your CSS file).
Nothing wrong with the conditional comment too, so my guess would be a file error.
Related
So basically, I bought the custom domain of nexus-cheats.com, and went to connect it to my GitHub pages website of archiemourad.github.io/Nexus (/Nexus is the homepage). I entered the custom domain and set up the DNS, did the DNS checks and everything seemed to be working (Image Below) (My website is using React.js) Now, when loading the domain nexus-cheats.com It brings me to a blank page, And it "seems" to be working in a way It loads the tab title but nothing else. In the console there are a bunch of cookie related warnings. But no errors. When I go to nexus-cheats.com/Nexus i get the default GitHub pages 404. And get two errors. One is the denail of loading of my favicon.ico (Tab logo) Error => Content Security Policy: The page’s settings blocked the loading of a resource at https://nexus-cheats.com/favicon.ico (“img-src”). The other is a server GET 404 error => GEThttps://nexus-cheats.com/NexusALTHOUGH after loading nexus-cheats.com/Nexus and going back to nexus-cheats.com I get two more errors, both being the failure to load certain files in my react app. Errors => GET https://nexus-cheats.com/Nexus/static/js/main.89be2f5c.js GET https://nexus-cheats.com/Nexus/static/css/main.1bf437ff.css These (I assume) Are the build version my GitHub pages website is running on. Anyone know a solution? Or the problem going on here?
DNS CONFIG: My A: Record is set to 185.199.108.153 My CNAME: Record is pointing to archiemourad.github.io. (www)
----edit: Solved, but I kept all of my original text for brevity---
I'm getting this same exact error and situation right now.
I don't have answers yet, but it looks like React is trying to connect the %PUBLICURL% to the wrong place now. This comes from my /public/index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
...
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I subtracted irrelevant code and added the ...'s, for the record.
Locally, my network tab in my browser's developer tools shows:
http://localhost:3000/{project-name}/manifest.json
But, when I hosted it the exact way you have (with it working properly before I added the custom domain), it returns:
{my-custom-domain}/{project-name}/manifest.json
The /public/index.html file has loaded, but it can't access the other files it calls correctly.
It seems that the index.html is adding an extra part to the address from the %PUBLICURL%. By that, I mean the %PUBLICURL% adds the {project-name} between the custom domain and the files it is trying to access. My url should read:
{my-custom-domain}/manifest.json
I can edit the values in the developer's tools to remove that part, and then the files will load. But, this still doesn't solve the issue.
---------edit: solved the issue---------
I am unsure if the above changes are necessary, but I did remove the %PUBLICURL% from my /public/index.html file.
Now for the good part - the fix!
In your package.json, be sure to change the:
"homepage": "your-github-url"
to:
"homepage": "your-fancy-new-custom-domain"
Save it up and then run your build script included in most of the resources I found ( like this: https://create-react-app.dev/docs/deployment/#step-2-install-gh-pages-and-add-deploy-to-scripts-in-packagejson ):
npm run deploy
This will update your project, post it to your GitHub, and deploy it. Then just check that you have the same settings as you originally posted an image of on your GitHub pages, and it should work!
I have created an app using create-react-app but it always loads old index.html from client
tried with meta tags to avoid cache in index.html but does not load new html always
index.html
One way can be using the meta tags.<meta http-equiv='cache-control' content='no-cache'> <meta http-equiv='expires' content='0'> <meta http-equiv='pragma' content='no-cache'>
A very Rare condition. sometimes it may be because of your browser cache. there is an option in your Dom inspector which helps to disable caching.
press F12 to toggle dom inspector. select the network tab
Try the tick on.
Also make sure that you are editing and previewing the same index.html file.
I have built a Node.JS app (meaning I wrote my own HTTP server within the the main JS file, which works as it should with the rest of the application). The HTML and CSS renders as it should within localhost. Even JQuery works (with the source file imported via CDN). However, I have tried adding very basic AngularJS within the Index.html page and the AngularJS refuses to show (anywhere) in my localhost. It should be showing the number "3", but does not.
This is my Index.html page with the angular code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/css/home.css">
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
</head>
<body>
<body ng-app>
<p>AngularJS code: {{ 1 + 2 }}</p>
</body>
<div class="hm-container">
<h1 class="hm-title">Some text</h1>
</div>
</body>
</html>
The console log message in chrome says:
"Failed to load resource: the server responded with a status of 404 (Not
Found) http://localhost:3000/node_modules/angular/angular.js"
The Index.html page renders the Angular code correctly only as a standalone isolated HTML page (without the CSS) when tested within my Brackets text editor browser preview and when tested as a stand alone HTML file using the HTTP-Server module. It correctly shows the number "3". So I know my angular code itself is not the issue here. In my localhost the HTML page does not show the number "3", nor does it even show "{{ 1 + 2 }}". It simply reads: "AngularJS code:" with the rest of the HTML and CSS etc.
Even importing the AngularJS source file via CDN, or downloading the AngularJS source file from Angular's site, instead of from NPM does not make any difference. I have played with the directory structure as well per some of your recommendations, with no luck. So I know it is not the file path of the Angular source file which is the issue.
I have been stuck on this for too many days, have lost sleep, and foregone all other activities all because of this, so If any of you can give me your input as to what is going on and how to resolve this issue, I would be extremely grateful!!! :)
Alright, this is how I solved the issue. It was a server-side issue as I had originally suspected. Within the main Node.JS file (typically either named server.js or app.js) the following is needed:
you will most likely already have this part...
var express = require('express'),
app = express();
Then immediately after the above code block skip a few lines and add...
app.use(express.static(__dirname + '/views'));
Apparently this is how Express knows where to serve your JS files. The 'views' folder is where my HTML pages are. You may have them in a folder named 'public'.
The solution to the following link is what helped me solve the issue: AngularJS Code not working with NodeJS
I will add that this is definitely strange to me in that JQuery works by importing it's source file via CDN WITHOUT THE ABOVE CODE CHANGE, yet Angular would not work via both a locally downloaded Angular source file OR via the Angular CDN! If I ever figure out why this is so, I will be sure to update this answer. If any of you Angular, Node, Express experts know why this is so, please enlighten us all!
Hopefully this helps someone running into a similar issue. A big thanks to the two of you that tried to help me solve this weird issue. Your time and input was greatly appreciated!
There is problem obviously in attaching Angular JS to your index. You have already said that you even tried attaching through CDN.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<h1> {{1+2}} </h1>
</div>
</body>
</html>
This works, I have checked. Try to integrate your stuff in this code. And follow Jason's suggestion to attach angular js from your system only. Keep the angular js file within the same folder.
To make that work, you need a directory structure like this:
|--app
| |--index.html
| |--node_modules
| | |--angular
| | | |--angular.js
| | |--angular-route
| | | |--angular-route.js
| |--css
| |--home.css
I have developed Drupal site . But when I access my site using HTTPS:// browser gives me a message "This page has insecure content" . I have putted my site data on secure site .
I load JS file in that page for some purpose.
So,Is it JS file issue?
I don't think it should be JS or CSS issue, unless you include them using absolute URLs:
For example if you add the following lines in your theme's template file:
<link rel="stylesheet" type="text/css" href="http://yoursite/mystyle.css">
<script src="http://yoursite/myScript.js"></script>
This serves the JavaScript through http instead of https. Instead you should use:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="myScript.js"></script>
notice that the URLs in the second piece of code contains relative URL, and would serve the files with the same protocol with which the site is accessed via a browser.
If this is not the case, you have to scan through all the links on the page, and find the links which are start with the format http://... instead of https://.... This problem arises when a browser finds that not all content of the page is being served using encryption.
Hope that makes sense. Please feel free to ask further queries.
Indeed, you might have some assets (css or javascript) loaded from "non secure" source (using http protocol instead of https).
Font Awesome icons are not showing on IE7. They do on IE8, IE9, FF and Chrome.
Example HTML:
<span rel="tooltip" data-placement="top" data-original-title="Click to add question to favorites">
<i class="icon-star-empty"></i>
</span>
Files included:
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/font-awesome.css" rel="stylesheet">
<link href="/css/font-awesome-ie7.css">
Request to .woff:
Request:
URL:http://example.com/font/fontawesome-webfont.woff
Response:
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:41752
Content-Type:application/octet-stream
Date:Tue, 11 Dec 2012 11:31:51 GMT
ETag:"4095e-a318-4cf1d75fb20dd"
Keep-Alive:timeout=5, max=98
Last-Modified:Thu, 22 Nov 2012 23:02:27 GMT Server:Apache/2.2.22 (Ubuntu)
I've configured this on Apache's /etc/apache2/mods-enabled/mime.conf (and restarted Apache):
AddType application/octet-stream .woff
Am I missing any configuration?
Quick update to this thread.
FontAwesome no longer supports IE7, but if you're in the unfortunate situation where you need to support it because you need to support proprietary software, whos name I shall not mention, that includes it as its only browser, and refuses to upgrade even though, at the time of this post, IE8 has been out for nearly 4 years and we are now on IE11, then do as I did:
Download the ie7.min.css file and add the section as indicated in the answer above:
Open the ie7.min.css file and change all the ".icon-" to ".fa-", since FontAwesome has changed its naming conventions.
This will get you support on about 95% of the icons for the FA 4.0.3 (newly introduced fonts won't be supported on the old ie7.min.css file.
Better use the IE7 conditional comment, so the file gets loaded in IE7 only. (taken from the Fontawesome example)
<link rel="stylesheet" media="all" href="assets/css/your-icons.css" />
<!--[if IE 7]>
<link rel="stylesheet" media="all" href="assets/css/your-icons-ie7.min.css" />
<![endif]-->
The configuration was correct after all. For some reason font-awesome-ie7.css wasn't loading correctly. After making sure that this file was loading, everything worked.
There is a way to support IE7 even for new icons.
First download this as base.
https://gist.github.com/dorajistyle/7461853
Then if any icon is missing go that icon in the iconlist. For example the fa-balance-scale that is new.
http://fontawesome.io/icon/balance-scale/
There you'll see that the unicode char is f24e
Then add this to the font-awesome-ie7.min.css in the end
.fa-balance-scale {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML =
'');
}
Repeat for any icons you're using