I'm developing my wedding's website, and I have a problem I really don't understand: when I browse it on my local machine the site is rendered correctly, but if I browse the site remotely there is a section shown in a wrong way. In order to be sure about the files correctness I just removed on ftp all the site's files and re-uploaded them from scratch. Same problem. It happens on safari only, on all the other browsers the site is rendered fine
this is how I see the site locally
this is how I see the same file remotely
How can it be possible?
For anyone who want to help the link to the site is http://silviaesimone.com
thank you
The server is using the wrong MIME type for the Bebas Neue font. It sends the font as text/plain which, apparently, Safari can't handle.
Solution: make sure that files with extension .otf are served with the correct MIME type, which is font/opentype.
(It depends on the kind of server how you need to do that; see here for IIS or here for Apache).
Related
I have a problem with external css. When I have creating my project using html and css the css is working fine but when for some reasons I have change this
#LoadModule rewrite_module modules/mod_rewrite.so
in httpd.conf file in apache
to this
LoadModule rewrite_module modules/mod_rewrite.so
my all the css are not working properly and one more thing is that when I have checked the console
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost/E-commerce/styles/style.css".
anybody tell me that this is the main reason or not
A Simple description to whats happening during the process is that browser Send HTTP Request and receive a response to that request from the server to two contains headers.in this case your server is making stylesheet come with wrong content-type try first to inspect element using dev tools in browser and investigate the response from server .
i believe if you create new htaccess with the following content :
AddType text/css .css
this will tell server to send it as stylesheet
Many times when your css file is large so your browser stores it in cache and hence not every time it renders your css file when updated in editor and reloaded the site.
To rectify this simply press Ctrl+F5.
This will clear the browser cache for that tab(that website) and reload the page forcing the browser to render the updated css.
This should work without touching your .htaccess file.
EDIT: For Mac if you are using safari, the sortcut is Command+Alt+E
In Mac if you are using Chrome, Ctrl+F5 will not work, so refer to this site: https://clear-my-cache.com/en/apple-mac-os/google-chrome.html
Use ctrl + F5 to clear browser caches on window.
This should work.
UPDATE: FIXED, SEE BELOW
Turns out the server I had the font name as 'Close.otf' in my fonts folder and 'close.otf' in my code, I'm guessing my code worked fine locally because it isn't case sensitive, GitHub's server is though apparentely. Just fixed by changing the C from uppercase to lowercase, now the font shows up fine.
...
I am building a website, and for the header I am using a custom font named "close.otf". Now, before pushing my changes to my GitHub Pages repo, I edit my css and html files locally.
So I added the custom font using the #font-face rule on my local CSS file, opened that file up with Chrome, and it shows up completely fine, as you can see:
However, upon pushing the CSS file and HTML file to the GitHub server where my site is hosted, for some reason, upon loading the site in Chrome, the font shows up as follows:
Here is the code I used:
#font-face
{
font-family:"close";
src: url("../fonts/close.otf") format("opentype");
}
And yes, since the local files are a clone of the GitHub repo, it's not some simple mistake like making sure it's in the same folder as the adress etc.
It's also worth noting all other custom fonts I've added to the site have worked completely fine, like the one below the header used in the nav links.
Anyone know how to fix this?
Have you used the developer tools in your browser to see what the server is sending? Your browser is requesting a font file, but the server may be returning forbidden, not found or some other error that will help you troubleshoot.
My first assignment in web programming class is to design a website without browser side and server side script.
I made an HTML 5 document, linked to a CSS file, all of them were validated in W3C validator, everything is good. I test the web page locally on my laptop on Chrome36, Firefox30 and IE11, all good.
But I'm required to upload it to University's server, all good in Chrome and firefox but IE, however I tried to put it on the server on my laptop and access it on IE from University's PC, it behaves all good.
Apache server on my laptop, access from Uni's PC
On Uni's server, access from Uni's PC
My lecturer says I'll lose mark if it behaves so, what could be the problem and how can I solve it? Do server settings affect html's behave? Thanks!
Also, if you want, you can access it via deakin.edu.au/~yshengk/a1
Maybe the html file can't see your css? Check file path's.
The only change I would see is the file and folder path looks different. Check whether you have used correct file/folder path. Try changing the CSS, JS, images folder path between relative folder path or absolute folder path.
I have a wordpress site here http://itrain.com.my/v3/ as my Home Page
I am wondering why it is not displaying well in Firefox?
Anyone who is good in css?
By the way, try to look at the subpages http://www.itrain.com.my/v3/index.php/about-us/
it display well.
I am really wondering why does it happening.
Any can help me? Any suggestion, recommendations?
I think problem is with URL.
It work http://www.itrain.com.my/v3/ but doesnt work on http://itrain.com.my/v3/
Set on your server redirection (301) from non-www URL to www URL.
I would wager you have the font installed on your local machine. I don't see it on any browser. Instead, I get two 404 errors.
In other words: please make sure the font files are available at the locations their respective locations: http://www.itrain.com.my/v3/wp-content/themes/itrain/img/fonts/big_noodle_titling-webfont.woff and http://www.itrain.com.my/v3/wp-content/themes/itrain/img/fonts/bebas__-webfont.woff.
[EDIT]
I've just looked at the fonts directory listing on your site. The ttf and eot versionf of your fonts are available, the woff and svg are listed, but result in a 404 error. Furthermore, the ttf version (downloaded instead of woff in Firefox, after getting a 404) seems to generate an empty HTTP response.
So... Make sure the fonts are there, make sure they have proper privileges set (like 0644). I can't see any other issues than the font files themselves as the CSS appears to be correct.
[EDIT 2]
#kubedan provides a great tip that seems to fit your concern about the htaccess: the domain the fonts are downloaded from is always preceded with www. Firefox will refuse to download such content, you need to use the same domain.
When I click on an image link right now, Chrome downloads the image instead of opening it.
Even if I right-click and select Open link in new tab Chrome still downloads the image, and I have to go through the extra steps of opening the file for viewing manually.
This feels like a mime-type issue to me, but why would Chrome not recognize "image/png" as a valid mime-type for viewing? All PNG images display just fine in an HTML page.
NOTE: This only happens for PNG images.
The web server is probably serving the image using the image/x-png MIME type. Chrome does not recognise this as an image (as of August 2012 February 2013), hence offers the file as a download.
image/x-png is a legacy MIME type from the days before it got its official name, image/png, in 1996. However, when Internet Explorer uploads an image it does so using image/x-png "for backward compatibility". I believe this was the case up to IE8, and was "fixed" in IE9. If the web server does not correctly handle this (the web server should detect this non-standard MIME type and treat it as image/png), then it may serve up the client-provided MIME type to other users, including to Google Chrome. Additionally, some web sites will serve up all PNGs as image/x-png.
If you're the web developer you should detect incoming image/x-png and treat it as image-png (never serve up image/x-png).
If you're the user report it as a bug and see #kriegaex's answer for a workaround.
#Tom Clift is right, and here is my workaround for it: use Chrome extension Redirector and add a rule replacing the Content-Type header. That's it. :-)
You can use the Chrome extension Undisposition to achieve this.
When you right click on the image you need to select then 'Open image in new Tab' from the drop down and NOT 'Open link in new tab' this will then open the image in a new tab.