Hello,
A couple of months ago, I told my small-business employer that I thought I could develope them a web-site, so, I bought a book and set to work. I designed the site using notepad++, so no software like Kompozer or Dreamweaver. This was my first-ever attempt at web-design, and apparently I forgot one of the more important elements, the DOCTYPE. I tried to go back and add this,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
but once I did, it destroyed the appearance of my website in my browser of choice (IE version 8).
I tried consulting W3C.org for information on what html or css style rules I may have violated, but I can't make heads or tails of most of the resources there. Any suggestions of where to begin re-authoring my html to support a DOCTYPE would be very much appreciated. The source code in question can be found at http://www.bridgestop.com/index.html
Thanks again!
-David Hathaway
Full Version: Need help adding a DOCTYPE
You haven't done anything wrong. It's just that without a doctype browsers run in Quirks Mode, i.e. emulate older and buggier versions of themselves. Full explanation at the below page.
http://hsivonen.iki.fi/doctype/
Note that "Strict Mode" is just an unlucky choice of name. It does not require a Strict doctype. IMO this whole doctype switching is unlucky, but now we have to live with it.
You should fix the page, not downgrade the doctype. You'll benefit from that in the long run, since things simply work better in Standards (Strict) Mode, above all, the chance they work the same in all browsers is bigger. In fact, if you fix the very few errors you have, you could upgrade the doctype to HTML 4.01 Strict. You don't use any deprecated elements and attributes, so why not? Good job for a first page!
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
http://hsivonen.iki.fi/doctype/
Note that "Strict Mode" is just an unlucky choice of name. It does not require a Strict doctype. IMO this whole doctype switching is unlucky, but now we have to live with it.
You should fix the page, not downgrade the doctype. You'll benefit from that in the long run, since things simply work better in Standards (Strict) Mode, above all, the chance they work the same in all browsers is bigger. In fact, if you fix the very few errors you have, you could upgrade the doctype to HTML 4.01 Strict. You don't use any deprecated elements and attributes, so why not? Good job for a first page!
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
The validator (both of HTML markup and CSS) report minor errors, though of course you should fix those.
A few points.
You need to set the top image to no-repeat.
You set widths to many things inside a div that already has a width. With Safari's Web Inspector, I eliminated a few and things started to fall into place.
You also need a clear: right; to the .p class.
And you'll probably benefit from http://www.themaninblue.com/experiment/footerStickAlt/.
A few points.
You need to set the top image to no-repeat.
You set widths to many things inside a div that already has a width. With Safari's Web Inspector, I eliminated a few and things started to fall into place.
You also need a clear: right; to the .p class.
And you'll probably benefit from http://www.themaninblue.com/experiment/footerStickAlt/.
Thanks for the input so far. Pandy, the first document you referenced to me was beyond my comprehension, but maybe that's part of the problem. No matter which doctype I add, strict included, the elements of my page go all over the place.
Frederiek, are all your suggestions referring to my CSS?
One other thing, would it be reccomended to add a doctype and then put things back together, or put things together and then add the appropriate doctype?
Frederiek, are all your suggestions referring to my CSS?
One other thing, would it be reccomended to add a doctype and then put things back together, or put things together and then add the appropriate doctype?
To boil it down, browsers have 2 rendering modes since quite many years now. Standards (Strict) and Quirks. The doctype is used as a trigger for this (see the list at the page I linked to). No doctype will give you Quirks and an unknown doctype will give you Standards.
Standards Mode is usually what you want. You created the page without a doctype so you built it to work with the quirks of older browsers, not with modern standards. That's why you shouldn't try to find a doctype that gives you quirks mode and makes your page work, but rather fix the page to work with a doctype that gives you Standards mode. With me?
Doctype in place from the start. Otherwise you will do the same thing again, design to Quirks Mode, and the page will change when you put the doctype on.
Standards Mode is usually what you want. You created the page without a doctype so you built it to work with the quirks of older browsers, not with modern standards. That's why you shouldn't try to find a doctype that gives you quirks mode and makes your page work, but rather fix the page to work with a doctype that gives you Standards mode. With me?
QUOTE
One other thing, would it be reccomended to add a doctype and then put things back together, or put things together and then add the appropriate doctype?
Doctype in place from the start. Otherwise you will do the same thing again, design to Quirks Mode, and the page will change when you put the doctype on.
QUOTE(pandy @ Aug 4 2009, 08:24 PM) 
an unknown doctype will give you Standards.
First I thought the above was a typo but it seems to be right. Tested a couple of sabotaged ones in IE7:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD +++++++++++HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/strict.dtd">
=standards mode.
CODE
<!++++++++DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/strict.dtd">
=quirksmode, probably because it's not recognized as a doctype at all.
Every time we talk about it.
It's logical. Otherwise a new, custom or private doctype would automatically throw browsers in Quirks Mode, which wouldn't be good.
It's logical. Otherwise a new, custom or private doctype would automatically throw browsers in Quirks Mode, which wouldn't be good.
QUOTE
Frederiek, are all your suggestions referring to my CSS?
Yes.
QUOTE(pandy @ Aug 4 2009, 11:58 PM)
Every time we talk about it.
Is this not the first time?
QUOTE
It's logical. Otherwise a new, custom or private doctype would automatically throw browsers in Quirks Mode, which wouldn't be good.
When did logic dictate any of this?
BTW, yesterday I found another sticky footer at http://www.cssstickyfooter.com/, which is tested in many browsers/OS.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.