I am experiencing a very strange bug after updating my firefox to version 26 (on macbook pro with mountain lion). Although the headers have not changed, it is now failing to encode the utf-8 characters correctly. I tried several different header styles but still end up with the same problem:
My original header is somewhat old-school but it is working fine in every other browser.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Even stranger is the fact that if I run the page tab app directly via its server url (outside of facebook and its pagetab iframe) the encoding works fine!!
I tried the strict doctype and html5 doctype tags, but the problem still remains!
If anyone has any ideas about whats going on I would be appreciate hearing them.
At least latest version of Firefox(26.0) complaints in console if you have too much stuff before introducing charset meta tag.
The character encoding declaration of document was found too late for
it to take effect. The encoding declaration needs to be moved to be
within the first 1024 bytes of the file.
So it could help if you move charset declaration right after opening -tag.
Related
I have a site which, in ie10 ONLY is showing <br> and <br /> tags and diamonds with question marks (unknown character icons). I have changed char encoding (everything is UTF-8), DOCTYPE declaration (currently <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ), meta http-equiv to all version and edge.
Again, I only have this problem in IE10 as far as I can tell. I have tried Chrome, Firefox and Safari also.
Has anyone experienced this also, or possibly have suggestions as to what might fix it. For now, I have simply removed the insert BR function in the WP add P tags for content filtering, and removed brs from the templates and other php generated html. This is not ideal for me or my client for multiple reasons, and I really would like to triumph over this stupid problem :)
Any help is much appreciated.
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.
I just validated an HTML document using the W3C validator, and found that if I use:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
with:
<!DOCTYPE HTML>
It throws a warning Line 4, Column 72: Using windows-1252 instead of the declared encoding iso-8859-1.
However, it is fixed if I use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
I don't really understand what is happening. Also, I don't even know how to use the DOCTYPE tag, I just copied and pasted one from around the web.
Why does this happen?
How should I use the DOCTYPE tag?
Changing the DOCTYPE is simply turning off the warning - it isn't actually fixing anything.
iso-8859-1 and windows-1252 are very similar encodings. They differ only in the characters associated with the 32 byte values from 0x80 to 0x9F, which in iso-8859-1 are mapped to control characters and in windows-1252 are mapped to some useful characters such as the Euro symbol.
The control characters are useless in HTML, and web authors often mistakenly declare iso-8859-1 and yet use one or more of those 32 values as if they were using windows-1252, so browsers when they see the iso-8859-1 charset being declared will automatically change this to be windows-1252.
The validator is simply warning you that this will happen. If you're not using any of the 32 byte values, then you can simply ignore the warning - it's not an error. If you are, and you genuinely want the iso-8859-1 interpretation of the byte values and not the windows-1252 interpretation, you are doing something wrong.
Again, this switching happens in browsers for any DOCTYPE, it's just that the HTML5 validator is being more helpful about what it is telling you than the HTML4 validator is.
A couple of points:
Any HTML5 validation should be taken with a grain of salt. The specification is still under active development, and not everything is set in stone.
You're using the HTML4 syntax for that meta tag. Try <meta charset="iso-8859-1">
That said, HTML validators don't serve that much purpose in this day and age.
But apparently the default for HTML4 was iso=8869-1. That said, the default charset for HTML5 is UTF-8.
More information about the HTML5 doctype can be found in this post by John Resig.
It throws a warning Line 4, Column 72: Using windows-1252 instead of the declared encoding iso-8859-1.
It means the file was saved with the encoding Windows-1252 on creation (AKA Western Windows 1252 or CP1252) and your charset declaration says "hey read this file with ISO 8859-1" when that's not the encoding the file has.
The meta charset exist for that reason. It exist to declare the encoding of the file you are sending/reading/using so when, for example a browser, reads the document it knows what encoding the file is using.
In detail, you have this charset declared:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
But the file you are validating is actually encoded in Windows-1252. How? Why? Check the text editor you are using and what encoding it is using to save files. If the editor can be configured to change the encoding, choose the one you want to use.
About HTML5
Using
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
or
<meta charset="iso-8859-1">
are both valid for HTML5. See <meta charset="utf-8"> vs <meta http-equiv="Content-Type">
The W3C validator offers options for which encoding the validator uses. You have specified encoding in your document, so you should see "Encoding: iso-8859-1" in the top block of information once the validator has been run.
To the right of that, there is a pull-down menu. Change the choice from "(detect automatically)" to "iso-8859-1 (Western European)". The validator will then use ISO 8859-1 instead of its own choice, and you will not receive the error.
Do the following:
ISO 8859-15. Yeah, -15, and it will work.
Don't place too much stock in the validators. There are typically too many Internet Explorer workarounds, particularly in the CSS content, that will trip up the validator. If your pages work in all browsers and your client is happy, it doesn't matter what some validator says.
If you are specifying the HTML5 doctype, then you should be consistent with the meta charset attribute. Try this though for your pages:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
I am building a webpage, and I found a problem which I cannot solve. If I declare the DOCTYPE, the page breaks completely, and if I don't declare it, the IE version won't work properly (the drop down menus won't drop). But, despite of it's broken, if I declare the DOCTYPE, the dropdown menus work at every explorer, including IE. So I really don't know what to do, any idea? I'm currently declaring the DOCTYPE as: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> but I've tried other options and they don't work neither.
Last time I posted here the free server blocked the page (probably too many users, as I'm the only one getting in currently), but these are 2 examples of the page:
with DOCTYPE: http://newfutureuniversity.org/project/
without DOCTYPE (dropdown menus not working with IE9):
http://newfutureuniversity.org/learn/
Any help would be appreciated. Even if it's just to orientate me about where to start searching, as I could't find anything similar.
Using or not using the doctype for modern web pages is no longer optional and is required. It is the very first thing that goes down on a page and never changes. If you created a page without one to begin with, then your whole page is set in quirks mode. Trying to fix it or change it by adding/removing the doctype is, essentially, changing the rules and the target as you go along.
Trying to use jQuery to fix this now is just sinking you into a deeper hole. Add the doctype, use a modern browser to get everything how you want it (IE is not a modern browser), then work on getting IE to follow along.
The charset you should be using is <meta charset="utf-8">
for HTML5 it is nice and small, you have an XHTML declaration
it can simply be:
<!DOCTYPE html>
for HTML 5
Using XHTML tells the parser to be much more strict in what it accepts. you have no <html> root in your document (HTML5 won't care about this).
content type specification is different in HTML5 as well
instead of <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> you can use <meta charset="iso-8859-1" /> if that is your desired character set.
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.