I've been trying to get a simple SVG rectangle to work as a background in IE9 or FF4 and neither is working for me. Here's my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="height:99px;background-image: url('bar.svg')"></div>
<iframe src="bar.svg" height="99px"></iframe>
</body>
</html>
The iframe shows the graphic but the div does not. Any ideas where I may be going wrong?
I found a working example here:
But I can't make it work myself :(
It's been driving me crazy.
Thanks for any help.
Thanks everyone for the help. It actually was a web server problem where the wrong MIME type for SVG was being served & that made the browsers fail to render correctly.
Here's what fixed it for me.
1st I switched from VS 2010's built-in web server to IIS Express. Then in my web config I added:
<system.webServer>
<staticContent>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
</system.webServer>
Now everything works correctly.
I was having the same problem in Joomla! 2.5 running on Godaddy Linux server.
After intense research here is how I fixed the problem:
Go to the root directory of your Joomla install and locate the .htaccess file (or htaccess.txt if it is not already setup)
Now add these lines to the file:
AddType image/svg+xml svg
AddType image/svg+xml svgz
Rest, use the standard CSS and HTML properties to render your SVG file.
Does this jsfiddle work for you?
http://jsfiddle.net/B3mnk/embedded/result/
fwiw, I've added a background size to make it nice 'n big.
Some articles with examples:
https://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml
http://helephant.com/2009/08/svg-images-as-css-backgrounds/
https://developer.mozilla.org/en/svg_in_html_introduction
http://www.broken-links.com/2010/06/08/using-svg-in-background-image/ - This one has a fallback to .png near the bottom of the article.
Reported as a bug in Firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=231179
Related
I am learning how to use a text editor, and I've just created my first file with it. It previews with the correct output, but when I run it in the browser, it gives me a blank page.
As you can see, the doctype and html tags are in place, as well as the head and body. I am using Visual Studio Code as my text editor. Why will this not display anything in my browser? To be clear, it does preview, just won't display in browser
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Are you sure? It does display on mine. Is the file saved as a .html file? Also, try opening it on another browser. If that doesn't work, try creating a new file in Notepad or something similar, save it with a .html file extension and try opening it again.
EDIT:
Try using Notepad. Check if the file is saved with a UTF-8 encoding. If that doesn't work, try installing another browser or using Edge/Safari/Internet Explorer or whatever built-in browser you have.
In case someone is still struggling with this, try saving your files before you open them. That fixed the problem for me.
Possible Reasons:
You might not have saved the changes after writing the code (most likely).
Problem with the browser (load it in another browser)
Check the extension (just for clarification)
There is no problem with !DOCTYPE html tag or html tag.
It loaded on Fire Fox, just not on Google Chrome for some reason. I'm sorry for wasting everyone's time. As I have said, I am unfamiliar with VS Code. Thank you for all of your suggestions.
I had this same baffling problem. I quit Chrome, re-opened, and then I was able to open my .html files (from my Mac's Finder) with Chrome just like I could already open them with Safari or other browsers.
I just had this problem and the solution was very simple, so I´ll give it just in case someone runs into the same silly mistake. I was typing all the code in the wrong file.
Add this line of code inside your head element:
<meta charset="UTF-8"/>
I would recommend to put the right path under the src with the correct file location
<script src="scripts/main.js"></script>
I was facing the same issue and none of the steps mentioned helped.
So I deleted the index.html file I had, opened my project folder in VS Code, created a new index.html file there, pasted my code and clicked on go live.
Then I could see my image on the webpage. And after that I could see the image even by double clicking the index.html file from Finder. Hope this helps.
Save your file in Notepad or whatever text generator you are using and then close it before launching the html file in the browser. Mine would not open if Notepad was still open.
In visual studio code just type in a blank page
html:5
then just press the touch "tab", it will display a basic html 5 structure to start
If anyone still needs help- It worked after saving the file on VS Code!
Just remove "<html>" a the second line it's already set in the first line
<!DOCTYPE html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
I'm at the last of my wits here. I've searched through dozens of websites trying to find the answer to this issue, but I have yet to find a solution that helps me.
Here is the top section of my HTML, linking to my CSS file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Sample Page</title>
</head>
For some reason, when I preview my .html file on my browsers, my CSS code is not taken into account.
Just to clear things up a bit, I've already made sure the following are not the reasons for my issues:
My CSS code worked just fine when it was in the HTML within the style
tags. It only stopped working once I put it into its own .css file.
There are no <style> tags on my .css file.
The rest of my HTML is correctly formatted. I have the </html> tag and the <body> tags.
I've tested this page on Chrome and Firefox, and even on a different computer's Chrome. I've even tried running them as an Administrator.
I've checked to confirm that my browsers are not set to Quirks Mode.
I've tried multiple DOCTYPE headers, none have shown any signs of working.
The .css name is correct, and the file location is correct. Both the index.html and the style.css are in the same folder.
I've tried these lines of code in different orders, different formats, I've even tried other peoples' code and nothing works.
I've checked the source code for the page on my browser, and clicking the style.css link leads straight to the file.
The only lead I've gotten is that I clicked "Inspect Element" on my page in Chrome and checked the "Resources" tab, where the HTML is found under Frames>(index.html)>index.html and the CSS is found under Frames>(index.html)>Stylesheets>style.css. If I click index.html, the body is blank, but if I click style.css, the body is, strangely enough, a bit of Chinese text.
Here is a sample of a style.css I've tried:
body
{
background-color: yellow;
}
Even with the CSS as simple as this, it still won't work.
Please help.
EDIT: http://i.imgur.com/SgoFkvw.png
Read my post, you guys. They're in the same folder. The different paths are in the "Inspect Element" mode in Chrome, not in my folders themselves.
Jozef Dúc wrote in the comments (1, 2):
Open css file in some editor for example Notepad++ and change encoding of file to UTF-8
Notepad++, open file, in main menu find Encoding->Convert to UTF-8.Look again in Encoding and option Encode in UTF-8 should be checked and save file. Hope it helps :)
This is what solved it for me.
According to your screenshot
it looks like you have bad encoding in file.
So first add
<meta charset="utf-8">
to your HTML.
Then you must change encoding in CSS files. Open the file in some editor (I recommended Notepad++). In Notepad++, find Encoding in menu and in submenu choose option Convert to UTF-8. Now, look again in "Encoding" and "Encode in UTF-8" should be checked, then save the file.
i had the same issue and this is what worked for me. i realized the .html and .css files where all in one single folder that's why it wasn't working. to solve this,
open the project folder(the folder that contains your html files), in this folder, create another folder called 'styles'. Finally, place the .css file in the style folder and run your site again.
this worked for me. hope it works for you
Try adding this line <meta charset="utf-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
1. Ensure that CSS is enabled in your browser.
1.1 Firefox & Chrome: I recommend using Chris Pederick's Web Developer Toolbar, it is a CSS menu (third from left if you have a newer version where the text labels got KOed).
1.2 Safari: ensure the Develop menu is visible (Edit-->Preferences-->Advanced) and then ensure that Disable Styles is not checked.
1.3 Opera (Real Opera, 12.5 and earlier): Tools-->Preferences-->Advanced [tab]-->Content-->"Style Options" [button]-->Presentation Mode [tab] and ensure that "Page Style Sheet" is checked.
1.4 Internet Explorer: Go to Tools-->Options and ensure that under the "Security" tab that the zone (either Local Intranet (if loading the page from your hard drive) or Internet (if you're uploading to a server and then loading it in a browser) are set to Medium-High.
2. Ensure that your HTML and CSS files do not have a BOM (Byte Order Mark) which is created by Notepad and other Microsoft text editors. You can disable the BOM by using Notepad++ or SuperEdi in the Save As... dialog, you will need to do so for both. NEVER USE MICROSOFT TEXT EDITING TOOLS FOR WEBSITES!
3. Running a local server? Check either the Apache access logs or the Developer Network tab to ensure the style.css file isn't coming up as 404.
My link tags work also without the / at the end of the tag. you can try that.
and you can get to element ispect and that to console. maybe the console can tell you what's wrong.
Unfortunately I had the problem with my HTML5 website, where my Internet Explorer browser (I'm on version 11) decided it was the right thing to do to load the website in IE7 compatibility mode.
Insert annoyed face
Adding this <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to the website does make it work correctly in IE, however if you put the website through the W3C Validator, it throws this error at you:
Line 6, Column 59: Bad value X-UA-Compatible for attribute http-equiv
on element meta.
I want to know if anyone knows if there's a way of having the best of both worlds?
It may be a little late for a contribution, but maybe someone can use it. Based on the fact that <meta http-equiv="..." content="..."> is used to simulate an HTTP response header (see here), if you have access to a scripting language like PHP, you could try something like this:
<?php
header('X-UA-Compatible: IE=edge');
?><!DOCTYPE html>
<html lang="en">
...
That way, the server still sends the header, but it's not in the HTML5 code itself. I used this on my website and it validates correctly on the W3C validator. I'm not sure about it having the expected results with IE rendering. Maybe someone can give feedback. My experiments are not too conclusive. I did find some small differences between using the PHP header function and using the meta tag when I tested a page in http://netrenderer.com/.
As I was on a local website, I had to un-tick the Display intranet sites in Compatibility View:
Alt+T > Compatibility view settings
The other option I found which has helped for my published project was to add some code in web config file:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=Edge" />
</customHeaders>
</httpProtocol>
</system.webServer>
This is obviously IIS on Windows, but you can apparently achieve this on Apache.
According to this tutorial my less code should work but it doesn't.
Can you please help me to get my less css to work.
Right now it does not working - Page loads with no applied styles. What am I doing wrong?
The error is:
FileError: 'localhost:1/styles.less' wasn't found (404) in styles.less
But it is there in the root?
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="_/script/less-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="header">test</div>
<h2>test h2</h2>
</body>
</html>
styles.less
LESS
#color: red;
#header {
color: #color;
}
h2 {
color: #color;
}
If you are using IIS you have to add a ".less" extension to MIME type within IIS manager. when you add a new MIMI, enter ".less" as the extension and "text/css" as the MIME type.
Assuming the website is hosted over iis express, Open the file
C:\Users\\Documents\IISExpress\config\applicationhost.config
and search for the tag
<staticContent lockAttributes="isDocFooterFileName">
and add the .less MIME as below
<mimeMap fileExtension=".latex" mimeType="application/x-latex" />
<mimeMap fileExtension=".less" mimeType="text/css" />
<mimeMap fileExtension=".lit" mimeType="application/x-ms-reader" />
Thanks for your help everyone - turns out the answer is that my localhost did not serve the mime type .less
I encountered this issue too.
None of the above fixes worked, however I did manage to fix it when I checked the folder access that the less.css file was stored in.
Adding the IUSR user to have read rights to the folder allowed the file to be distributed correctly.
It seems that your source location of your file is not correct.
<script src="_/script/less-1.4.1.min.js" type="text/javascript"></script>
I have never seen that "_" could be used for navigation. Actually, if the script folder is in the same directory as the html page, then
<script src="script/less-1.4.1.min.js" type="text/javascript"></script>
should be enough to have a working js file on your page.
I'm using IIS 7.5 but this can be the same for other IIS versions:
The mime type for less must be added to IIS. But in my case, I have to add it to "Default Web Site" using IIS Manager, NOT to my application, to be able to load less file from browser.
In my case I already had the mimeType for .less on ISS, so I checked the Web.config file of my web and removed the following line because it was causing a duplication:
<mimeMap fileExtension=".less" mimeType="text/css" />
TL;DR
I've read through many questions on Stack Overflow on this issue and I've tried to follow the given advice. Still, my CSS stylesheet will not work in Chrome/Safari but it can work in Internet Explorer.
The only odd thing that I can see about my scenario is my server is returning all files as of type application/octet-stream. I cannot change this aspect of the server. Is there something I can do to interpret my CSS file as a stylesheet in Chrome/Safari and IE?
I have an embedded web server project that I am working on. I have very limited control of the server software and the ability to make page-level settings. All I can do is create static HTML, CSS, and image files that are compiled into the server application.
As such, all files that are returned from the embedded server are declared as application/octet-stream in the HTTP header. This produces warnings in Chrome but no errors.
Initially, I had a problem loading this style sheet in Chrome/Safari but it would work in IE. After reading through a couple questions on Stack Overflow, I found that I needed to change my stylesheet declaration from:
<link rel="stylesheet" href="/styles/index.css">
to:
<link rel="stylesheet" type="text/css" href="/styles/index.css">
When I made this change Chrome & Safari still failed to process the CSS file but IE also started to ignore the stylesheet.
Oddly, if I do not declare a DOCTYPE on my HTML document I can get linked stylesheets to work in all of my browsers. This is, however, not a desirable solution.
My guess is this issue has something to do with the HTTP header declaration and that it doesn't match the type declared in the link element.
What can I do to get this stylesheet to work in Chrome, Safari, and IE while following good web development codes-of-practice (i.e. using doctypes on my HTML files and not embedding the style code in the HTML headers?)
For clarity sake, the relevant CSS/HTML code is shown below.
index.css
html {height:100%}
body {margin:0;min-height:100%;position:relative}
iframe {width:100%;height:100%;border:none}
.hdr {min-width:765px;overflow:auto}
.logo1 {float:left;margin:4px}
.logo2 {float:right;margin:4px}
.menu {position:absolute;top:70px;left:0px;bottom:0px;width:175px}
.content {position:absolute;top:70px;left:175px;bottom:0px;right:0px;}
index.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="/styles/index.css"> <!-- Removed the type declaration so that this would at least work in IE9 //-->
</head>
<body lang="en-us">
<div class="hdr"><img class="logo1" src="/images/logo1.png" alt="Logo #1"><img class="logo2" src="/images/logo2.png" alt="Logo #2"></div>
<div class="menu"><iframe name="menu" src="/menu.shtm"></iframe></div>
<div class="content"><iframe name="main" src="/home.htm"></iframe></div>
</body>
FYI, this is a new project that is being developed from an existing one. The original project did not declare a DOCTYPE on the HTML files. Therefore, all page data was loaded and executed in the browser in quirks mode. Furthermore, the index.htm originally consisted of multiple frames within a frameset.
I am trying to update this application, using correct, and up to date methods for developing web pages. I can make this application work, but I feel that this would be at a sacrifice of future-browser compatibility if I have to rely on browser quirks mode and framesets.
I have tried to close the link tag but that doesn't help. Technically, this shouldn't be an issue since this document is declared as an HTML5 document, rather than XHTML.
It's certainly due to the application/octet-stream content type. I can re-create the issue on my end. Soon as the content type is set to text/css your HTML/CSS load fine.
As a workaround you can use <style> tags for you CSS if you can't get the server to send the correct content type.
I hate to have to answer my own question this way but the problem was most certainly with the fact that the server was returning a content type of application/octet-stream within the HTTP header.
After discussing the issue with management we had to update the code associated with the HTTP processor. This is code that is part of a third-party RTOS and we have been extremely hesitant to making any changes to this code.
However, in this case the need has out-weighed that desire. I've integrated the necessary changes to fix the HTTP header to return a content type of "text/css" for cascading style sheets. All is now right with the world.
I think I'll just chime in here. Not to answer the question, but to confirm the issue and perhaps help people with similar problems.
I had the same problem: an external css file was loaded alright, but it was not applied in Chrome. (Safari and FF were ok about it). So, same problem, slightly different cause.
It turned out that because of a bug in the webserver code the HTTP response contained two Content Types, 'text/html' and 'text/css'.
The solution was to remove the faulty 'text/html' line. It seems Chrome is pickier than other browsers about response headers. Which I suppose is legitimate, but a warning would have been nice.
btw, you can see all the http information for a loaded resource in Chrome, when you open Developer Tools, and select Network. Then click on the file that you want to investigate. (it took me a while to find that)
We had a problems with an iframe wich it's contents was updated by an external javascript routine, the CSS were loaded but were not applied. But updating the body HTML from a routine present in the iframe head worked as suposed to.
This same behaviour was not present in gecko and explorer, but happened the same at Safari browser (webkit)
Hope this could give some light in this curious case.
I would like to add one bit of information that may save some of you some time. It appeared that chrome was not recognizing my CSS either. After reading the above post I reviewed the files in the Developer Tools->Network. Turns out that Chrome was using a locally cached version of my CSS. As soon as I refreshed as opposed to accessing the URL again, it worked!
I'm no expert, but i've made this mistake before, it's rather simple.
You've written:
<link rel="stylesheet" href="/styles/index.css">
If this is a folder in the same directory as your index.html file, then you need to remove the first /. like so:
<link rel="stylesheet" href="styles/index.css">
EDIT: I think someone else mentioned this already, but it may have been overlooked.