css file still not loading - css

I'm still having problems with loading the style sheet for these pages. Works fine in Safari but ff and IE, no joy:
http://www.mainstayprojects.com/teardrop.html andb
www.mainstayprojects.com
Although i am more clear as to what's causing this problem, thanks the the answers to my previous posting (stackoverflow.com/questions/3273655/css-file-not-loading), I am at a loss to how to fix the issue. I have re-saved many times with different doctypes and content type meta tag as well as saving the file as a charset=utf-8 file but have not been able make any headway!
Really need some help.

Your server is still claiming the HTML document is ISO-8859-1 (although the document itself looks like UTF-8).
Meanwhile the stylesheet appears to be UTF-8, the server fails to state what encoding it is, and the first line of the stylesheet claims that it is UTF-16.
Pick an encoding
Configure your editor to use it
Configure your server to specify it
If you put any information about the encoding at the document level — get it right!

Related

Chrome does not seem to follow link to css sylesheet. IE and Edge OK [duplicate]

Okay, something just went crazy. Unless China is taking over starting with my test style.css file on my iepage - well I guess they are starting off on the right foot hating on IE, but anyways. It loads with no stylesheet - sad :( I go into the Web inspector and see that all my linked files are filled with [possibly] Chinese characters (瑨汭笠ऊ楷瑤...) I have tried deleting the files on the server and re-uploading them. The local files look fine and when loading the files directly they look fine. I didn't do anything that should of changed the rendering or anything either.
So I think I figured it out. This is weird. But anyway.
I copied and pasted your HTML to a local file to experiment with. And it loaded just fine. It was saved as UTF-8. Then I changed it to UTF-16, and I got exactly what you're seeing! As far as can tell, the browser (Firefox for Linux for me) is assuming the linked files are all in the same encoding as the HTML...
So - I assume the file on the server is in UTF-16, and if you change it to UTF-8 you should be good. Hope that fixes it!
PS: According to Firebug, your HTML is compressed by your server, even if you never explicitly told it to. But that doesn't seem to be causing any problems, thankfully.
I encountered this same problem with XML files exported from PowerShell that were embedded in iFrames.
There was no issue in IE10/11 or Edge, but Firefox and Chrome wouldn't load the stylesheet.
The original page loading the iFrames was UTF8 encoded, same with the stylesheet. However, the XML file was exported to UTF16LE ("Unicode" in PowerShell). When the XML file was loaded from the iFrame, it loaded the stylesheet as Chinese characters.
I converted the encoding in PowerShell...
Get-Content C:\foldername\file.html -Encoding Unicode | Set-Content -Encoding UTF8 C:\foldername\file.html
...and it worked! My guess is that IE must treat the encoding of all files the same as the parent, which meant that the UTF16LE encoded file was rendered as UTF8. Chrome and Firefox apparently don't do that.
Thanks Xavier Holt for setting me on the right path!
Another quick solution is to change the file encoding using Notepad.
Open the file in Notepad and Save As with the UTF-8 option selected from the drop down
it may be the .html file itself. I solved my similar problem by copying the contents of the original .html file and pasting it into a new file with the same name in the same directory (change the original's file name at first and delete the remainder of course)

Browsers ignoring single CSS file

Not sure how to really categorize this question, but on this page, the file http://d1el287zd12c0j.cloudfront.net/assets/hitgrid-0a8239a14fba0de87431c06cd75774f3.css seems to be completely ignored by browsers. It appears to load successfully and no different than any other css file on the page, but the styles in it are simply not applied to the page.
The content-type, encoding and everything appears to be working as expected. Roughly the same content "applies" fine on my local installation of the app.
I'm at a loss as to what's going on here.
I just check it out and everything went right.
Try to make the filename shorter in the CDN. Large names tend to make error in some way or maybe check if no other stylesheet is interfering with the styles
If that didn't work, answer these questions and Ill try to git it a try again
Which OS are you using?
2. Are you using wordpress?

CSS not rendered in IE 10

CSS files not rendered in IE 9 and 10 but works good in compatibility mode.
I am the following error get "SEC7113: CSS was ignored due to mime type mismatch" in IE 10 .
wherein i don't get a content-type in my response header!
Further this is on my local.
Any suggestions could be appreciated.
It has an answer, summary would be:
As due to MIME type mismatch css was ignored in IE 9 and 10. The MIME type can be correct by utility called File TypesMan It is freeware created by NirSoft. It turned out that the MIME type of .css had been changed to text/plain, preventing IE from rendering my styles. using FileTypesMan to change it back to text/css fixed the problem.
Download FileTypesMan from the NirSoft site. Use the links near the bottom of the page to select the correct version for your operating system (there are different versions for 32-bit, 64-bit, and Windows 98/ME).
Unzip the files to a local folder, and double-click FileTypesMan.exe.
When FileTypesMan has finished listing all file types, scroll down in the top pane to find .css.
Double-click to edit the settings.
Change the value to text/css in the MIME Type field in the dialog box that opens.
Click OK. Job done.
IE 10 should now behave itself (well, at least as far as rendering style sheets is concerned).
Not my work: Its not my own search, you can see this here: https://stackoverflow.com/a/18791928/1762944
I hope this fixed you!
I was wondering that you are not writing type="text/css" but you said, that you are! So I found this the next helpfull article! It has the same issue as yours. SEC7113: CSS was ignored due to mime type mismatch
I just did a simple Google search for the issue, and this was the first result! You should have searched for the issue.
Please ensure that the CSS file gets delivery with the correct "Content-Type" from the server. It must be "text/css". Use the developer console to determine the current type.
Potentially you need to adjust/create the MIME type mapping (e.g. for httpd).
hth
Try to specify the attribute type="text/css" in your tag. Place your style tag in <head> section.
I was having similar problem with an embedded micro-controller (not a lot of control over the server changing content type). Not sure if this applies but I found going into Settings->Compatibility View Settings and adding the IP (site) address the CSS was accepted and the page rendered properly.

Fancybox appearing at bottom of page when site is in wordpress

I built a static site initially and am now in the process of converting it to a wordpress site. You can find it here The last image in the right column, when clicked, should open up a fancybox and play a video. It worked very well in the static site, but for some reason in wordpress the box appears at the bottom of the page instead of the center. I'm pretty sure it is seeing the css because I can click on the link and find it.
This is the result of the validation of your page
http://validator.w3.org/check?uri=http://training.mercury.stellarbluewebdesign.com/LittlestTumorFoundation/
Notice the comment :
Byte-Order Mark found in UTF-8 File.
The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files
is known to cause problems for some text editors and older
browsers.
Also notice
Line 1, Column 1: Non-space characters found without seeing a
doctype first. Expected <!DOCTYPE html>
Passing your code through an editor in ansi mode (and showing all symbols), this is what I get :
Those preceding hidden characters before the DOCTYPE in your document makes your browser run in quirks mode hence the unexpected behavior of fancybox (which needs the document in standards mode to run properly)
What you have to do is to save your WP (php) files in an editor using UTF-8 without BOM encoding and upload them again (and alternatively forcing your ftp software to upload in binary mode)

Node JS Proper Content-Type for responses

Is there a reason that I should not be sending my content-type as binary for everything? I am a bit naive about proper http but it seems to work for everything. What are some of the pitfalls I will run into working this way?
If you send a stylesheet as Content Type binary, IE9 won't render it. It refuses to render any stylesheet that isn't text/css. That's probably enough to keep people from not visiting your site with IE9.
Not to mention the other benefits like the browser handling specific content types differently based on user preferences.
http://blogs.msdn.com/b/ieinternals/archive/2011/03/27/http-406-not-acceptable-php-ie9-standards-mode-accepts-only-text_2f00_css-for-stylesheets.aspx
Edit
Here, you can use this, it will make it easier to determine the content type. The module will have two methods. getExt and getContentType. If you pass the extension to getContentType it will return the Content-Type for that file. I'm not the one that compiled all the content types, unfortunately I forgot where I found it...
https://gist.github.com/976610
If you specify the right content-type, the application/browser requesting the file can handle it properly
For example, if You're downloading a pdf file, the browser knows how to handle the content type "application/pdf" and will open the file directly in the browser, if it doesn't know the type, it will just ask you to download the file
Browser also let you specify a specific program from which you can open a specific type of file, for example, if you download a torrent file, you can tell your browser to open it with uTorrent, and the next time a torrent file is downloaded it will be also opened with uTorrent directly
In Node.js, you can get the content type of a file doing the following:
type = require('mime').lookup(path);

Resources