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.
Related
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.
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.
If you use deprecated attributes or tags <center>, <font color="red">, or <td valign="top"> etc. in XHTML 1.0 Strict (no depr. attributes), modern browsers (I will use Chrome as an example) still take notice of and use them.
If you use HTML5 <video> on an XHTML 1.0 Strict DOCTYPE Chrome will still recognize it - it's not as if they'd program it to not. I tested the worst deprecated, capitalized, and unquoted attribute code I could write, along with HTML5 audio, with the XHTML 1.0 Strict DOCTYPE in Chrome and it rendered flawlessly.
Here's the code I tested, working flawlessly in Chrome (red bg, centered table, audio playing):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Do browsers care about the DOCTYPE?</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body bgcolor=#ff0000>
<CENTER>
<table cellpadding="0" cellspacing=0>
<tr><td valign=top>test</td></tr>
</table>
</CENTER>
and some HTML5 audio..
<audio autoplay>
<source src="http://www.duncannz.com/resources/sound/alarm.mp3" type="audio/mp3">fallback text</audio>
</body>
</html>
So my question: Do modern browsers (translation: browsers other than IE) pay any attention at all, or do anything differently, because of the DOCTYPE? Do they even bother to read and interpret it?
Browsers do care about the DOCTYPE - otherwise there wouldn't be any point in having it!
You are right in saying that many browsers interpret old/deprecated commands in the correct way, but this is largely a matter of backwards compatibility. There is such a huge amount of content on the web that it is next to impossible to keep everything up-to-date and standards-complient. The web browsers continue to support these outdated pages because if they didn't, much of the content on the web would look slightly off. Most users don't know the difference between HTML4 and 5, so the blame could fall on the browser, which could be devastating - especially if a page looks bad on Firefox and nice on IE!
The DOCTYPE is mainly used in validation and to determine whether a browser runs in this "quirks mode" (where many of these older rules still work) or "standards mode" . Many professional web designers use the W3C validation tools to make sure their web pages are valid HTML, and the tools provided by their website look at the DOCTYPE to choose the correct set of rules with which to validate. Furthermore, XHTML strict does not allow empty tags or other blatant syntactic errors.
Hope this helps!
Try this in Chrome:
<!DOCTYPE html>
<title>Test case</title>
<p hidden>My text
<table><tr><td>Hello World</table>
against this
<title>Test case</title>
<p hidden>My text
<table><tr><td>Hello World</table>
Only in the former case will the text "Hello World" be visible.
In most Modern Browsers, you're not going to notice much difference (depending on the page) when using different Doctypes. The biggest difference you'll notice is not in your markup, but in your use of CSS, and the layout/positioning of elements. The Doctype is used when validating your pages, and in determining the mode, the browser renders the page in. So, depending on the Doctype you use, it will determine if the page is rendered in Standards mode, Quirks mode, etc. In IE, and older browsers, you'll notice much more of a difference.
For a more in-depth information on the subject, check out this link: http://hsivonen.iki.fi/doctype/
Yes, they do. It means the difference between Quirks or Standard mode, and can affect how IE handles box containers.
Have a look here:
http://www.quirksmode.org/css/quirksmode.html
And also here:
http://www.webmasterworld.com/forum21/7975.htm They discuss this topic in detail.
maybe the paragraph called "How DOCTYPES Affect Rendering" could help you?
http://www.upsdell.com/BrowserNews/res_doctype.htm
At the current date it is still possible to use DTD entities as variables in chrome/firefox/opera/ie in .xml and .xhtml and .svg and other xml-based files(breaks in .html files as I imagine it uses an html rendered instead of an xml renderer) without having to resort to javascript or php/other server-side preprocessor magic:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" [
<!ENTITY theword "bird">
<!ENTITY thexmlns "http://www.w3.org/1999/xhtml">
]>
<html xmlns="&thexmlns;">
<head>
<title>The word is &theword;</title>
</head>
<body>
<p>This document uses the word &theword; multiple times.</p>
<p>This document's word can be changed from &theword; by altering the entity.</p>
</body>
</html>
This seems like a useful test to see if doctypes still work(save the example above as example.xml or example.xhtml and see if it works).
So far I only found a realistic use for it in android projects xml files to use
entities inside attributes to prevent lines from having too much text one one line,
or from having the repeated long text in multiple attributes that could have a short entity encode them instead.
My site is currently using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
However, things like Facebook plugins are only valid in HTML5. So, is it safe to change my DOCTYPE to <!DOCTYPE html>? Will this affect anything?
Yes you can change your DOCTYPE,it will not affect anything that you have already done.In HTML 5 you will get some new features which you can use for your future purpose.Just check this link and you will get some idea about the features present in HTML 5
You can change it. Almost all browsers just look for html in the doctype to ensure they are parsing HTML. It will also remain the same with new versions of HTML.
You might want to do the following quick changes to the head element:
Change the meta element to <meta charset="utf-8">.
Drop type="text/css" when linking stylesheets and drop type="text/javascript" in script elements as these are the default values.
Change your DOCTYPE as you said, it shouldn't affect what you've already done in HTML4, but it does give you options of some of the new HTML5 features in future.
The only thing that such a doctype change will affect is validation. Other than that, the doctype declaration only affects browser mode (quirks / almost standard / standard), and XHTML 1.0 and HTML5 doctype have the same effect in this respect.
If you don’t use a validator, there is no reason to change. If you do, you should select the doctype according to which HTML version your document is closer to. Besides, HTML5 validation is completely different from XHTML 1.0 validation (heuristic mixed-strategy checking vs. formal well-defined but limited checking).
It shouldn't affect anything, but it's considered good markup to leave it as it is. HTML5 should work anyway.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What's up, Doctype?
HTML: What is the functionality of !DOCTYPE
Okay, when I first learn HTML, I basically learn from trial and error as I went along, and didn't really sit down to properly learn it as far as I can remember. As a result of this, I've missed out a lot, and therefore, I've decided to start from the basics for my own benefit. :) So here I am, (re-)learning HTML.
Now, my question - the <!DOCTYPE> tag confuses me more than any other HTML tag I've ever come across, so I've come here to clear up any questions I have regarding it so I can use it confidently. :)
Firstly, can someone explain to me why it's necessary to use a <!DOCTYPE> tag in your webpages? They work fine without them, don't they? I've read that it is so it can be validated against the standards of the W3C, but that's all I know. A little more detail would be appreciated. :)
Secondly, after reading up on it, I'm still confused as to what exactly goes in my <!DOCTYPE> and how to type it out. For example, this is one kind of DOCTYPE I've seen used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Yet I've also seen other variations, and from what I've read, there are different DOCTYPES to validate against - it's all so very confusing, which should I use in my webpages if I was going to use one?
W3C has a pretty good answer to this at http://www.w3.org/QA/Tips/Doctype
Why?
Why specify a doctype? Because it defines which version of (X)HTML
your document is actually using, and this is a critical piece of
information needed by some tools processing the document.
For example, specifying the doctype of your document allows you to use
tools such as the Markup Validator to check the syntax of your
(X)HTML. Such tools won't be able to work if they do not know what
kind of document you are using.
But the most important thing is that with most families of browsers, a
doctype declaration will make a lot of guessing unnecessary, and will
thus trigger a "standard" rendering mode.
Basically if you leave it out, the browser will try and guess what rendering mode to use, and it might cause some unexpected results.
it basically tells the browser how to interpret the page you're sending it. If you don't send anything, it has to make guesses. Some constructs are valid in a format while invalid in others, etc. Some browsers may display your page correctly while others don't. So yes, do choose and send a DOCTYPE.
There are several doctypes you can use, xhtml, html strict, html transitional, 4.01, etc. You can see a list of valid types here ... http://www.w3.org/QA/2002/04/valid-dtd-list.html
The declaration refers to a Document Type Definition (DTD). A DTD specifies the rules for the markup language, so that the browsers render the content correctly.
Going forward, for html5 compliance, the correct tag is simply:
<!DOCTYPE html>
You set a doctype to say to your browser or somthing else what you going tho do. Its look like what you do whit a business card
There are several doctype's. The most yoused doctype's are transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
The some stricter doctype is: (see "strict")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Also you can youse a speciffie doctype declaraition for youse a frameset. But this is outdated, frameset is a unnecessary for my but i will show you the doctype for this. But forgot the framesets this is an not useful html element whit html5. Here see you the follow frameset doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
And at last. You can youse a language attribuut for your the doctypes. This can youse by html and xhtml.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">