I've managed it to get my Debian server with Apache2 under VestaCP running, but there's another problem.
When I try to install WordPress, nothing but plain text is shown, as css wouldn't even load (so I dont know, if the title's being correct) and yea, no design at all.
Take a look here: https://www.mrxidevelopment.de/img/i14397482092008.png
Also, after installing through that plain text stuff, I can't login.
Is that a misconfiguration of apache or have I disabled css anywhere?
Regards
One issue could be the serving up of resources over HTTPS. For example, you main site contains very many absolute paths. Maybe you had a reason for this, but it can lead to problems :)
If you change:
href="http://[whatever the uri is].css"
To:
href="//[whatever the css uri is].css"
You will then have 'protocol relative' paths.
Another pointer is using Firefox with the FireBug extension installed. You can find it here
Finally, under WordPress General Settings you can change the WordPress Address (URL) and the Site Address (URL) from HTTP to HTTPS. If you don't have access to your admin you can change this via your wp-config.php, see here for guidance on doing so.
EDIT
The issue is the paths supplied for your resources.
Try right clicking in the browser and selecting View Source. See the tag of your page. It contains all stylesheet and javascript includes.
At present, all paths are prefixed with http:// which will not work over the HTTPS protocol. My point here is to use protocol relative paths.
For example, in the Inspector (within Firefox) I changed the following line:
<link rel="stylesheet" id="twentyfifteen-style-css" href="http://www.mrxidevelopment.de/wp-content/themes/twentyfifteen/style.css?ver=4.2.4" type="text/css" media="all">
To
<link href="//www.mrxidevelopment.de/wp-content/themes/twentyfifteen/style.css?ver=4.2.4" rel="stylesheet" id="twentyfifteen-style-css" type="text/css" media="all">
The change rendered your page in my browser like this:
Note the href= attribute was the only change - but it enables successful location and load of the CSS file.
You will need to do the same for any other resources you wish to include (i.e. Images, CSS and JS etc.)
For more information see the SO questions here and here.
Just for clarity
Changing the href attribute within the Inspector (or other browser tools) is not permanent - but is a great for debugging.
To permanently fix the paths open up your source in an editor Sublime Text is great for this and edit your mark-up.
Let me know if you need any further help mate.
Related
So I'm having this really weird bug with my new server where the CSS won't update in the browser. Refreshing and clearing the cache doesn't work. I then opened up FileZilla to see if the updated CSS file is actually being uploaded to server using FTP, which it is, and then when I drag a copy of the css file to my desktop, the css file magically updates. The PHP file updates just fine.
Here's how I include the css: <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
I have no idea what is happening and how to fix this so any help would be greatly appreciated!
You could have any number of issues, but I'd like to point out a cool tip when using Chrome.
On your page, with the developer tools open if you press and hold the reload button you get a great option to clear the cache and hard reload!
This is very handy to make sure you have the "freshest" copy while developing.
Update:
As for your scenario (after reading updates) it sounds like an HTTP header issue with your CSS file.
Check what HTTP headers are being sent with your CSS file response. If you are not specifying a cache header it will likely try to cache for you. Set an expires header (in the past) when in development, but far in the future when in production. In the Network tab of your developer tools (most browsers) you should be able to see these headers, or you can use a too like Fiddler that will let you deeply inspect your network traffic.
Alternatively if you can't easily tweak the HTTP Headers, then set a far expires header, but ensure the path to the file changes whenever you make a code change. Options include:
adding a time() stamp (always changes (yeah!) but doesn't cache (boo))
add the version control # to the file URL (works great, but you need to manage the updates properly within your tooling)
something fancier that creates a generated "fake" path to the file that auto changes on any modification to the file... but also loads the URL as expected, and sets the cache to "forever" (max 365 days according to the HTTP specs)
You may try queries to force the browser to load fresh CSS when it loads. To do this
<link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">
If you are comfortable with php you may try below code to force the browser to load most updated CSS to load. To do this
<link rel="stylesheet" type="text/css" href="http://example.com/style.css?d=<?php echo time(); ?>" />
This will ensure browsers always load fresh CSS with last modified time stamp.
Hope this help you.
The CSS is not loading for this page of the website I am working on: http://www.thesanfordcenter.net/sanford-center. It happens only in Chrome, but is not a caching issue as the same problem is happening in Chrome on another computer and I have cleared all browsing and cache history in my browser.
It does seem to be working correctly in FF and IE. The sub pages on this site, which use a different template seem to be working fine.
I am not sure what it is that is causing this. Any help would be appreciated.
In Google Chrome
>> goto settings
>> search for cache
>> clear browsing data
>> check cached images and files (the past hour / day)
>> clear browsing data
and goto your webpage and press "Ctrl + r"
Hope this solves your issue
Cheers.
Make sure that your CSS and HTM/HTML files use the same encoding !
If your HTM/HTML files are encoded as UNICODE, your stylesheet has to be as well.
IE and Edge are not fussy : stylesheets are rendered regardless of the encodings.
But Chrome is totally intolerant of unmatched encodings.
I tried every solution/suggestion i could find all over the Internet before i noticed, in my text editor, that i was using different encodings. Once I saved the stylesheets with the same encoding used for the web pages, the problem disappeared.
Comparing css links between the page you referenced and sub-pages, you have a "media" attribute in your link:
Problem:
<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px" />
Working:
<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" />
Try removing the "media" attribute and it should work fine.
More specifically, it does not appear that "only" is a valid operating for the media attribute. See this W3Schools page for details.
It doesn't exist:
this is a 404 not found:
http://www.thesanfordcenter.net/CircularContentCarousel/css/demo.css
Are you certain the path is correct? The developer tools in Chrome show the following error.
Failed to load resource: the server responded with a status of 404 (ERROR: The file requested could not be found.) http://www.thesanfordcenter.net/CircularContentCarousel/css/demo.css
Check your source where you are calling your code. The 'stylesheets' folder is coded as 'StyleSheets'. Possibly the case-sensitive is messing it up.
I'm thinking maybe since the expstickybar.css file is rendering correctly and it references the 'stylesheets' folder
The problem could be caused because the browser can't load files:
Failed to load resource: the server responded with a status of 404 (Not Found) error in server
I'm developing a Chrome extension that has an options page. And I am willing to style this page same as Chrome options page is styled. I found that there is a file
chrome://resources/css/widgets.css
that holds this style (it is listed in "Developer Tools > Sources"). However, if try to load it in my page either directly from HTML
<link rel="stylesheet" href="chrome://resources/css/widgets.css" type="text/css">
or from CSS
#import url("chrome://resources/css/widgets.css");
then get this error printed in the console:
"Not allowed to load local resource: chrome://resources/css/widgets.css
It looks like I'm missing some permissions in my manifest.json, but did not find anything suitable on the developer's pages (notice it lists "chrome://favicon/", but that's it).
Anyone knows a solution?
P.S. Yes, I have copied this file into my extension's folder, and I got what I want, but the smart and proper way using this file (IMHO) is loading it directly from Chrome resources.
Short answer: No, you can't access chrome://resources... from an extension.
First, it's blocked on purpose, thus why you see "Not allowed to load local resource." Second, you really shouldn't rely on Chrome's resources, which can change in any version.
I have a page which works locally but when deployed, none of he CSS works. in Firefox I get these errors. I never used to get this before. Any idea why this may be happening?
Also, when viewing the source of the page I can see this
<link href="/Content/css/foo.css?v=1.0" rel="stylesheet">
The resource from this URL is not text: http://foo.iat.company.local/Content/css/foo.css?v=1.0
</link>
The errors you're showing in console seem to suggest that the first line of your JS files is <!DOCTYPE html>, which it shouldn't be for JavaScript files!
I suspect that your links to the stylesheets aren't working and it's instead returning a 404 page (the screenshot certainly seems to suggest it's returning a document with HTML in it).
To try and double-check:
open up the page in Firefox and view source (right-click and 'View
Source');
In FireFox source view the assets URLs will be hyperlinks;
try clicking on the link for one of the JS files and see what gets
displayed.
I suspect you're going to find it returns you an error page and not the JS you expect!
If that's the case, you need to take another look at your folder structure and try and work out why your markup is pointing at the wrong place.
Check what your CSS files stored in correct place. Try open URL to CSS in browser. Also check in Firebug in tab Network what files loaded and from what URL. There is similar to your pages tried load CSS files from incorrect URL and got page for 404 error.
The problem was that the Content folder didn't have permission that it required. I added he following users to the security tab of the properties window of the Content folder and set permissions for those users and it all worked fine.
creator owner
iusr
network service
users
iis_usrs
I'm developing an ASP.Net app that is using html5shiv and ssl. For some reason I am getting mixed content errors in IE7 using html5shiv. If I remove html5shiv the errors go away. I'm also using update panels and master pages if that matters. Any ideas?
Edit: After further testing it appears to be a combination between html5shiv and a stylesheet. If either are excluded, no mixed content error.
<script type="text/javascript" src="../js/html5shiv.js"></script>
<link rel="stylesheet" href="../styles/global.css" />
Solution: I had a data uri on a header style. Removing the uri solved the problem.
Are you using the externally hosted html5shiv (on a CDN)? If so, download the file and host it yourself on the same server.
If you're using https, you need to make sure that all files are served via https. If you have any http downloads on the page, you'll get mixed content warnings.
It sounds like your html5shiv file may be being served via http, and this is causing the problem.
If you're downloading it from a third party site, check whether that site allows https downloads. If not, you may need to serve it yourself.
This ended up being an issue with a css style with a data URI. Apparently IE7 recognizes this as mixed content. The modernizer was dynamically loading a header tag which is the element the offending css style was applied to.