Having a problem with an svg file not showing up in my background after its been uploaded to a server I'm using. Made sure the file permissions allow it to be readable on the server and when I open my html file on my computer you can see it, but if you go to the url it doesn't show. Only browser we're working with is chrome. Any ideas? Seems strange since I didn't change anything before I uploaded it. Here's my CSS:
.paradox{
background-image:url('paradox.svg');
background-repeat:no-repeat;
background-size: cover;
}
and my html using the CSS:
<html>
<head>
<title>Homework 5</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="paradox">
<p class="spacing">
<iframe class="resize" src="form.html" frameborder="0" >
</p>
</body>
</html>
Make sure the SVG file is delivered with the correct MIME type. Open the developer tools, go to the Network tab and load your page. Open the URL of your SVG file and make sure the Type column says image/svg+xml.
If the MIME type is not correct, then add the following line to an .htaccess file in an ancestor directory of your SVG file:
AddType image/svg+xml svg
(assuming the server supports .htaccess files).
You probably have the wrong file path. Press F-12 to open the debugger, open the NETWORK panel and reload the page. Look for a 404 error on that filename.
Related
I have an apache server that serves an html page with content similar to the following:
<html>
<head>
<link href="meta/style.css" rel="stylesheet" type="text/css" charset="UTF-8">
</head>
<body>
<h1>Welcome</h1>
<p><b><li>Welcome to download page</b></li>
</p>
<p>
file1.7z<br><br>
file2.7z
</p>
</body>
</html>
When I click on the file1.7z or file2.7z link, chrome starts downloading it a 7z file, but internet explorer and edge attempt to download it as html file. If I select all files in the save as dialog box and change extention to 7z, the downloaded file is a valid 7z file.
I have found out about the download attribute which will probably fix this for Edge, but it looks like Internet explorer and other browsers may not even support this.
Is there any apache server configuration I can set, or anything I can add to my html page's header, to force all browsers to download this as a 7z file?
#user13267 It sounds like you may need to add the MIME type: application/x-7z-compressed
I think you would need to do so on your server at this path:
/etc/apache2/mods-enabled/mime.conf
What is proper way to load svg file in server/client model
When I execute html contaning object/iframe tag to load SVG img without server it shows img but when I run webpage from server it downloads svg img
<html>
<head>
<title>
</title>
</head>
<body>
<object data="xyz.svg" type="image/svg+xml">
</object>
</body>
</html>
I found the answer and would like to post it for people who face same situation
Open web.config file in your .net project folder and add mime type as shown below
Add this tag to web.config file
NOTE : Dont forget to run your site through IIS server and not via visual studio server
I'm trying to add a favicon to a (simple) HTML page. It has to work on Internet Explorer only, I don't care about other browsers.
<html>
<head>
<title>Test</title>
<!-- COMMENTS -->
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
Favicon Test
Download
</body>
</html>
It doesn't work. I tried in order: /favicon.ico, the absolute path in this format \\SERVER\...\favicon.ico, an http://randomDomain.com/favicon.ico http link, Base64 encoding of the .ico file, Base64 of png file but any solution is actually working. I'm 100% sure the .ico file is well designed. I was wondering if this problem is related to the fact that the page is actually hosted on a system where is not running an HTTP server. In fact, if i try to click on the Download link and then I look at image properties, the result is this
(source: xomf.com)
(source: xomf.com)
Is there any solution? Consider that there wouldn't be a problem using an external http link but it doesn't work.
Many thanks
I have installed impatient-mode in emacs, and I would like to edit both the html file and the external css file linked in the tag and see the changes automatically in the browser:
<head>
<link rel="stylesheet" href="path/to/my/style.css" type="text/css">
</head>
The problem is that when I edit my css, nothing happens, and the html file which appears in the browser stops loading content.
How can I resolve?
Just enable impatient-mode in the linked CSS file as well as the HTML file.
The syntax is correct but Try to check your css file path first.
I was trying to host my css files on an cloud storage service but when I linked it to my website it was not executed,
so i created an small css which just changes background but yet it doesn't works.
It seems there is some problem with its server will you please tell me what could be the problem and how to use it as css
link of css file http://copy.com/Kgs8EaMF71Qa7zqo/style.css
HTML Code
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />
https://developer.mozilla.org/en/docs/Incorrect_MIME_Type_for_CSS_Files
At least Gecko has a security feature for this: All stylesheets not from the same origin must be served with text/css.
In fact, you're file is served as text/plain, so the rules in it are ignored.
Due to security reasons MIME type of files hosted on copy.com is served as text/plain
So an normal link like of CSS file from copy.com will not work.
But if you still want to host your css files on this cloud storage service you can by adding ?download=1 after your link so you html should be like
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css?download=1" rel="stylesheet" type="text/css" />
there are several other cloud service like Dropbox,Google Drive where you can host your external CSS files.
I think, it may be due to MIME type, you uploaded assuming it will work as css file but its actual MIME type will be plain type text/plain but required MIME type to make it work as css file is text/css
So It Wont work.
This file worked perfectly for me.
here is the html code with the output.
<html>
<head>
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>