XHTML Special Character and Symbol Entities

W3C XHML 1.0 Entity Sets
W3C DTD Special Characters
Beginner's Guide to XHTML: Special Characters

ALA article from 2001: The Trouble With EM ’n EN (and Other Shady Characters)

deprecated HTML

Commonly used tags by WYSIWYG's
align="center"
center tags
border attribute
target attribute
marginheight attribute

name attribute: replaced with the id attribute. (In transitional documents both name and id can be used, but a name without an id is not allowed).

Resources:
W3C Attributes Chart: has a column to note which attributes are deprecated

Going XHTML 1.0 Strict

Before: Oh no! This page is not Valid XHTML 1.0 Strict!

It's like HTML but you put a different doctype at the begining of your page, you stop using certain tags and attributes you learned, and you close out the tags that you didn't have to before. There's more but but nothing that your knowledge of HTML and a validator can't get through together.

Start Here:
How simple going from HTML to XHTML can be
XHTML 101
Lesson 1: Writing XHTML in Notepad

Now that you are encouraged, Start here:
W3C QA
Doctype explained by ALA
XML well-formedness

Memorize a small list of deprecated HTML to get started. Don't worry about knowing it all cause the validator will give you a list of what needs to be corrected. Even if you write good code, you will have to catch the bad code your HTML editor ads.

Dreamweaver still sneaks these in:
align="center"
center tags
border attribute
font tag
target attribute
name attribute

Some Other Rules to Note:
XHTML is all lower-case
all tags must be closed (ex. br / or hr/)


Learn from my mistakes:

value of attribute "id" must be a single token

id="Tons of text I'm used to typing to help seeing impaired and help SEO"

W3C says ---- This attribute can not take a space-separated list of words as a value, but only one word ("token"). This may also be caused by the use of a space for the value of an attribute which does not permit it.

ID "deal" already defined.

p id="deal"

W3C says ---- An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element). -

I say ---- Before this project, I used class for everything and used id for things like a selected menu item (one element). When starting this project, I noticed that a lot of respected websites were using primarily id for group elements and class on a single element. So I tried something new. I would have never learned this if I didn't. I didn't know that what I was doing normally was a standard.

there is no attribute "border"

border="0"

W3C says ---- You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the embed element to incorporate flash media in a Web page, see the FAQ item on valid flash.

I say ---- Double check your mark up to see what your HTML editor added. I deleted border="0" once already from that tag.

After: This Page Is Valid XHTML 1.0 Strict!

1. Correct Doctype code in Header from w3C

2. Validate Template Page with one of these...

---- a. W3C HTML Validator

---- b. Tidy

---- c. Validome

3. Make changes and run validator until you pass.

More Reading:

Better Living Through XHTML

Modifying Dreamweaver to Produce Valid XHTML

2 columns in CSS

The Basic Layout Classes

The DOCTYPE has to be correct for this to work.

.contentContainer {
margin:0 auto;
width:800px;
}
.contentL {
float:left;
width:400px;
}
.contentR {
float:right;
width:400px;
}

The widths are very sensitive properties

content L width + content R width must be < = "contentContainer". Any padding or margin applied will disrupt their side-by-side balance so be careful.

Let Me Clear My Float

You will need to "push down" the div that follows the "contentContainer" div with this CSS property:

.following-div {
clear:both;
}

Backgrounds can cause trouble too

If you run into problems with background colors/images not showing up (in Firefox) of your "contentContainer" div, you can add one of these classes:

.contentContainer {
float: left;
}

or


.floatfix {
clear: both;
}

insert < br class="floatfix" > before the "contentContainer" 's closing div tag

Anatomy of the Layout

¿ Porque Container? Because

Resources

Simple 2 column CSS layout
Webmaster World Forum

Further Research

http://www.glish.com/css/9.asp

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

http://www.neuroticweb.com/recursos/2-columns-layout/

http://css-discuss.incutio.com/?page=TwoColumnLayouts

http://realworldstyle.com/2col.html

http://wellstyled.com/css-2col-fluid-layout.html

http://www.bigbaer.com/css_tutorials/two-column-header-footer.htm

http://www.maxdesign.com.au/presentation/page_layouts/

--- http://css.maxdesign.com.au/floatutorial/tutorial0809.htm

What's Up DOCTYPE?

Quick Link: W3C Doctypes

Standards Compliant Doctype from the horse's mouth
W3C's List of Recommended Doc Type Definitions (DTDs)
W3C article "Don't forget to add a doctype" explains the importance of DTDs

When something's wrong, check your doctype
Fix Your Site With the Right DOCTYPE!

"if your pages use outdated elements such as the bgcolor attribute in table cells or the target attribute in links, then HTML 4.01 Transitional is likely the best document type for your pages." - Jeffery Zeldman

Doctype Advanced

Beyond DOCTYPE
From Switches to Targets

Related Topics: deprecated HTML

center img

W3C SAMPLE :
img class="centeredPIC"
IMG.centeredPIC { display: block; margin-left: auto; margin-right: auto }



FINAL:

#flkr-cntrPIC{ display: block; margin-left: auto; margin-right: auto; float: center; padding: 5px; margin-bottom: 8px; border: 1px solid #ccc;}






References:
Web Publishing Secrets - Zeldman [written 10 days before 9/11]
Centering Images is harder than you think [2004/09]
W3C section on centering [lu 2007/01/15]