I have a strange problem, Firefox 3.6.3 doesn't show the CSS of the page I'm doing, but Internet Explorer 8 does.
I have tried at home and at one of my friend's home, and it happens in both. But, if I go to the Firefox Web Developer toolbar (i have it installed) and select CSS=>Edit CSS, then the styles appears appears in the page and in the editor! As soon I close it, they disappears again. I have no idea what the problem is :(
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Students</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
I've validated my two css files with the W3C CSS validator and there are no problems.
Do you have any idea about what could be the problem?
thanks in advance.
I'll bet a beer that the CSS file is not sending the content-type: text/css header. This causes style sheets to not work in Firefox. IE will ignore the content type.
If this is the reason, you should get a warning in the Firefox error console. You can use Firebug's net tab to verify the content-type sent.
As to why the content type isn't sent, this would be a server issue I think. It usually happens when the CSS file is a .php or .asp file that doesn't get assigned the correct content type automatically by the server when delivering.
Navigate to your css file directly in Firefox (http://www.yoursite.com/style.css) and look at your Page Info (Tools >> Page Info).
If the css file is being submitted as text/html, it's an incorrect MIME type (should be text/css) and you will need to contact your server/host administrator to fix this for you if you don't have access to that.
Related
I recently started my first program (very basic) and I ran into an issue immediately!
<link rel="stylesheet" type="text/css" href="gweeble.css" />
Using the code above, I attempted to attach a css stylesheet. In order to make sure it wasn't just me, I copy pasted the code from an example. And to make sure that the CSS was right, I put it in a style tag in the head of my HTML file... it worked. Next, I entered the dev tools in chrome (the browser I'm using. This is on a Chromebook using the caret editor) and the css file wasn't even there!!! If you have any ideas, I really need help!
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="gweeble.css" />
<title>gweeble</title>
<meta charset="UTF-8">
<meta name="description" content="uhhhh">
<meta name="keywords" content="google, grooble, gweeble, bored, I'm bored, Im bored, ugh, uhhh">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
body {
background-color: #4542f4; }
ANOTHER SOLUTION!!!!
Here's another reason why browsers may fail to load your css file....
I've read all the responses here (and on several other sites) but was still failing to have my apparently valid css file loading into my browser (as confirmed using the inspector - right-click over code in Chrome and look at 'sources' tab).
I usually use Chrome but also tried Edge with same results - html5 code ran fine but the layout was not being rendered. Inspection showed that css file was never loaded, never mind executed.
My issue turned out to be that the html code had been copied from on-screen tutorials and pasted into Notepad ++. In the process, I ended up with the wrong speech (") marks, so my guess is that the 'meta charset="utf-8"' statement
was inconsistent with the type of speechmark in the code?
Bottom line is that changing all the speechmarks by simply deleting and then re-typing resulted in a physically different shape of speechmark and working code.
Hope this was helpful....
Are you really sure you are viewing the correct HTML file? You can also check the page source (CTRL + U) to check the markup in your document.
This is usually because of a bad link in the <link> element. Are your HTML and CSS files at the same level in the file structure? If you need to go back up a level you may need to do href="./gweeble.css" Also try doing a hard refresh of your browser (hold the shift key down and click the refresh button if you're using Chrome) to clear the cache. Oh and double check the spelling of the CSS file name to ensure it is a correct match.
I figured it out! My computer was set to auto put my files into a google drive section ☹️. The problem was fixed by simply moving the folder to downloads.
In case you are using node.js, express, and EJS as templating engines
I just found this error on my website and looked here.
The problem I faced is
if you have a CSS file in your public directory i.e. views(in my case)
Note: You can access your CSS file from Browser Dev tools.
Using Chrome, go to Network in dev. section, and then click on CSS file. And check headers.
Make sure when you link any CSS file without any error of
type : "text/css"
Correct href = ""
Now, if you still can't access it,
so the problem may be that your browser may not be accessing the file correctly. Check the path where it should be, and where you had placed.
In my case: localhost:3000/views/css/style.css throws an error
But The actual link should be: localhost:3000/css/style.css worked
So change the href accordingly, and remove extra folders coming between so that your browser can access it directly.
I have a html page which have a svg. I use Chrome 54.0.2840.98 (64-bit) as web browser in Mac OS.
The svg is displayed well with localhost, whereas it is not displayed when i specify file:///Users/softtimur/... in the browser path.
I have searched some threads, some suggested to change the page to xhtml, I did it. And make the header as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
But the svg is still not shown in local.
Could anyone help?
PS: Here is the file. After downloading it, you may need to change the name test.xhtml.txt to test.xhtml.
Edit: This thread mentions that Chrome may block the access to local documents (Object in your case) from remote scripts (svg-pan-zoom). Is there a way that I rewrite the page to find a workaround? Or could I do something about Chrome settings? I really don't want to use localhost.
As Chainat and I discovered (in comments), the key is to write <script src="http://d3js.org/d3.v3.min.js"></script> (over <script src="d3js.org/d3.v3.min.js"></script>) if one wants to use external d3. Then even a html file without <html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> works...
First of all.
SVG's Doctype will not start with html.
svg doctype is
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Here is the link for "Doctype's" [https://www.w3.org/QA/2002/04/valid-dtd-list.html][1].
Could you conduct another test, like opening SVG file from folder, if windows then windows explorer, by double clicking the file. It should open in your default web browser.
I have not seen this when I open my files "file:///", instead I see Drive "C:/" like this.
I've spent the past few hours trying to fix several issues and confusing myself.
When the site is viewed in IE8 it appears to go into quirks mode, I say appears as I don't have access to that machine, only a screen print but to replicate the mess I had to select Quirks form Dev tools.
The site is a fairly complicated one. At the top of each page a php init file is called and so on.
The index currently looks something like:
<?php require'core/init.php';?>
<?php include_once 'include/IE8Etc.php';?>
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
The IE8Etc and IE=Edge are recent additions. I then read that IE will enter this mode if the doctype is not the first thing it sees and that comments can cause problems.
Does this apply to the php I have before it? Should my doctype declaration stay where it is or should it be moved to the top of the init page. Even as I write it it sounds like a ridiculous question and I'm sure it's fine where it is but I need to make certain.
Thanks.
The point you mentioned in the question about the doctype needing to be the first thing in the page applies to the page as it is seen by the browser.
The content of the PHP code is entirely irrelevant, if it doesn't generate any output.
However, if the PHP is generating output -- even if that output is nothing more than a blank line -- then it will be making the doctype invalid.
So the first thing you should do is open the page in your browser, and select the 'view source' option. look at the actual HTML that the browser receives. If there's anything before the doctype, then it needs to be moved or removed.
Once you've done that, the second thing to do is run your page through the W3C Validator. This will tell you about any other HTML errors you might have on your page. You have at least one, as the <meta> tag needs to be inside the <head> tag, but there may be other errors too. It is possible for some HTML errors to throw the browser into quirks mode, so you should fix anything that is reported by the validator (although the doctype issue is by far the most common cause).
Hop that helps.
The Problem
The linebreaks after both of the <?php ?> snippets are counting as characters. If Internet Explorer detects characters (even whitespace) before the doctype declaration, it enters quirks mode. As EricLaw correctly states, you should also consider moving all your meta tags into the head section, and consolidating your php code.
The Solution
The correct code would look like this:
<?php
require'core/init.php';
include_once 'include/IE8Etc.php';
?><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Title</title>
The whitespace in front of the DOCTYPE may come from the BOM (byte-order mark) at the beginning of files saved in UTF-8 encoding with BOM. After removing the BOM (save as ANSI as UTF-8 in Notepad++), the DOCTYPE was correct, but it still went to Quirks mode until the meta tag/header for IE-Edge was added.
Do you know a way to disable any message bar (Google translate, ff help bar question,...) that appears when loading a site page?
I have noticed that for some site Google translate is not pop up, although they don't use code as <meta name="google" value="notranslate">? Is there any trick in html code, or is depends of html definition:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
That affect the browser bar?
Well, if a browser company decide to 'freak-out' or what-ever do something beside showing html content, you can't do anything but try another browser. Like, if googleChrome add publicity to their 'software' .. you'd need to 'hack' the software in order to remove components from it.
Some softwares offer 'web' extensions such has microsoft IE
<meta http-equiv="imagetoolbar" content="no"> etc etc..
Search the web for 'browser specific meta', it might help.
carry on
What you want to do is check that your document is the top-most frame and if not, 'break free' from being displayed in a frame/iframe of another location. Add this code to your documents in the HEAD section:
<script language="JavaScript" type="text/javascript">
<!--
if (top.location != location) {
top.location.href = document.location.href ;
}
-->
</script>
This won't stop Google Translate from displaying translated version of your page, for example, but it will make your document 'break free' out of the frame that Google sets up (with the ability to change a few settings and such). Hope that's what you were looking for. If you have access to your web server configuration, then also check for how to prevent linking in frame and iframe from other domains for your web server. The Apache code for that would be:
#block frame and iframe linking from other domains
Header always append X-Frame-Options SAMEORIGIN
Not sure all browsers respect such headers, though and you might be forced to use mod_rewrite rules to achieve what you're after.
Cheers!
Does anyone what browsers support using the link tag for the favicon, as opposed to at the root of the site? I am considering doing that as an alternative to hosting the files at the root of each site because of an issue I'm having an issue in doing so.
The doctype on my two sites are:
First site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
Second site:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
The way to link to a favicon, which should be supported by all major browsers is:
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
According to this Wikipedia article, this way of referencing the icon is supported by Internet Explorer, Chrome, Firefox, Opera and Safari.
According to Microsoft, favicons has been supported since IE7.
Side-note
I believe using <link> instead of just placing it in the root is generally the best strategy anyway. That way you are in control of what icon is displayed. Let's say you want to change the icon sometime in the future. When using a link you can just rename the icon, forcing the browser to download the new icon. Otherwise there is a risk that the user will keep seeing your old icon, as it is loaded from the browser cache.