Errors I have found in many web sites

This is not intended to teach you HTML 5 or CSS coding from scratch but rather how to avoid common mistakes I've seen or helped with others. My theory of HTML is the less code you use to display the content the better. It is the content people visit your site for, not how fancy it is or pretty, although that doesn't hurt. I code by hand using web page editor I have gone through several, I used Notepad before that to create my first web page. You don't need a lot of fancy programs to write code, I wrote two multi page web sites using only Notepad. They only make it easier and faster to do it. If you know how to write code and understand what it does then you will be able to fix problems and get by with a lot less code. I taught myself HTML by looking at other people's code, reading a book or two and taking some Online courses for the harder stuff. I got started by becoming co-ordinator of Alamosa, CoGenWeb around 1998 (I have since have left GenWeb) and writing a few personal pages for the web space I got free with my email address. I soon found I could do better than the Web Developer company that was charging the place I work for a lot of money to do a 1 page website. They messed it up so often (stuff like our phone number and dates..). I started editing the page and sending it to them because we were only allowed to change it once a month at $300 a month, pretty lousy service for that kind of money. I wrote a sample website with a few pages and put it up on the space for our work email address and made a proposal to my managers. We were able to pay for our domain and host our website for a fraction of what the Web Developer company charged us and we could put up as many pages as we wanted and change it any time we needed to.

I want to make a short statement about readability. There is a reason pretty much all commercial sites are white backgrounds and black text, they want you to be able to read them! Think double hard before doing something like a black background with funky color text or any other dark background. You need high contrast between your text and the background so it can be read. Also don't expect people to read what you write if you use tinny tiny fonts sizes or weird script fonts. I'm slightly color blind and getting to the point in my mid-50's (where did time go?) it is getting harder and harder to read small fonts. Females are especially prone to do things like pink text on aqua colored backgrounds.. People like me will skip right on by your website.

I don't use Front Page or other WYSIWYG visual editors, not even sure it is around any more. Front Page and most other editors of that type put in a lot of junk code that just plain does not need to be there and in some cases serves no purpose. They tend to use complex tables to place everything and wrap everything in a font tags, I've seen pages with hundreds of unnecessary font tags.. Very few of the pages I've written use tables to lay out stuff and displays just fine and are a lot easier to figure out and change. I've tried DreamWeaver C3 and still preferred HomeSite (now using Webuilder as homesite and topstyle are no longer supported..) Tried DreamWeaver 5 recently it was nice but crashed and lost over an hours work and they won't sell it to you, you have to pay a $30 a month usage fee.. For instance several years ago I helped one GenWeb coordinator change over to using style sheets, the large site had been done with Front Page and had thousands of font tags in it. A large many of them were around code that controlled the page and did not display to the user so they served no purpose and caused the browser to take longer to display the page because it had to interpret all of those tags. It also made the page bigger or heaver so it took longer to download. The less code you can use the faster your site will load. A free editor you can use is Notepad ++ or right now I am testing a freeware open source editor called Atom. https://atom.io/, it has a lot of "packages" which are plugins you can install to change it's behavior. So far the one thing I have felt it is lacking are buttons, especially the save button. File, Save gets tedious.. I will have to see if there is a package for that.

Proper Page Naming

Your site must have an "index.html" or "index.htm" page. It will cause problems and your site directory may show (will show if hosted on Rootsweb free pages or other sites) if you don't have one and someone goes to your base URL I.E <a href="http://scottsword.info">Scott's World</a> If your primary page is not "index.html" or "index.htm", you should make a copy of the main page and name it index.html, you should then change all the links in your site that went to the main page to the index page, this will fix the problem. You should then leave the main page in place so it doesn't break any outside links that were linked to it, but then set it up to redirect visitors that page to the index.html page. This needs to be in between the head tags some where: <meta http-equiv="refresh" content="0;URL='index.html'"> It will automatically push visitors from the old page to the new index.html page you can also use it to refresh a page by using the same file name in the URL and changing the content from 0 to something higher, it is in seconds.. I do this with my Cactus Wren, Scott's Weather Station site to reload the pages every 5 minutes, 60 seconds x 5 minutes=300 seconds.

Other wise it is best not to change established page names as you break any links that have been made to it by merely making as simple a change from .htm to .html or index.html to Index.html. When creating new pages the file names should be all in lower case and kept fairly short simple names. IE index.html, links.html, photos.html, genealogy.html, etc. Many servers are CaSe sensitive and Links.html is a different file name from links.html or even links.htm . Be consistent with what you do.

Another thing I've seen are file names that are too long and have punctuation that can't be there, This is also good_file.htm (ok but not recommended because of the under score),
thisisareallylongfilename.vip.png (too long, bad.vip.ext).

HTML Tags

Think of a tag as a container, all open containers must be closed and they must be closed in proper nesting order, IE if one tag contains another tag, the tag inside the first must be closed before the first. Containers that are not closed properly can leak contents and break your page. BTW, HTML tags should be written in lower case, not capital letters, future versions they must be lower case so start now. CSS should be lower case but classes and ID's can be any case. Some browsers are more fault tolerant than others so you should view your pages with Firefox Download Firefox and Internet Explorer to see how they look. Firefox will display the site a lot closer to how the code tells it to than IE and is just plan a better browser. A similar idea in CSS element placement is Box Model Theory

Tags are a box container and with CSS you have what is called the Box Model

The CSS box model is a box that wraps around every HTML element. It consists of: content, padding, borders, and margins. This is an explanation of the different elements:
Content - The content of the box, where text, links, images and what ever else wrapped in an html tag
Padding - Clears a space around the content, the padding is transparent.
Border - A border that goes around the padding and content can be visible or transparent
Margin - Clears an area outside the border, the margin is transparent.

The box model allows us to define space around the content element and add a border around elements though you don't need to add a visible boarder but it exists if you want to. The size of the box is the total of the content, padding, boarder and margin. The example below only has a white background for the content and blue boarder so you can see them, normally you do not want to call attention to them in the page. The spacing around the text is the padding. The spacing around the border is harder to see but is the space between the boarder and the margins of that box and the surrounding box elements.

The css code looks like this, it is in the header of this page.

div.boxmodel {
  background-color: white;
  width: 600px;
  border: 10px solid blue;
  padding: 20px;
  margin: 20px;
}

<div class="boxmodel">
</div>

Tags must be Nested correctly, If you open a tag inside of another tag it must be closed before you close the parent tag.

That I know of there are a few exceptions to the container rule <br/> (line Break), <hr/> (Horizontal Rule), image <img, <meta, and <link tags do not have closing tags. Future version of HTML such as XHTML (eXtensible HTML) or XML require they be closed thus <br />, <hr />, images <img src="image/scott.jpg" width="225" height="87" border="0" alt="Scott's Photo" />, and Meta and Link tags which are found in the <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> , <link rel="stylesheet" type="text/css" href="main.css" title="default" /></head> part of your HTML document.

<p> (Paragraph) is not interchangeable with <br/>  which should be used to break elements and not <p> which should not be left open. That is an error I see A LOT. It used to be optional to not close some tags but HTML 4.01 requires they be closed and HTML 5 requires everything be closed. A paragraph tag container set <p></p> is best used as it was intended to contain paragraphs of text. A line break is inherent at the end of a Paragraph </p>. BTW <br> has a few attributes which are not mentioned much. <br clear="all"> is the most useful for making a line break around elements that want to be stubborn about it. The attributes are all, left, right and none, although I don't have a clue what you'd use none for.. In html 5 you style a <br style="clear: both;"/< also left or right.

The sentences on this page are an example of a paragraph with a P element style class that says to indent the first word of paragraphs 30px or Pixels and sets the font style, size and weight. Also new is first-letter which I have set to change the first letter of each p paragraph, I have it fairly subtle but you could make it huge in a bold color if you wanted. It looks like this in the style sheet:

p::first-letter {
    font-size: 105% !important;
    font-weight: 500;
    color: inherit;
}

p          {
	text-indent: 30px;
	font-style: normal;
	font-size: 19px;
	font-weight: 300;
}

I just realized I had introduced Style Sheets and not explained anything about it, that is something I will get more into farther down the page, but for now I will say Style is a powerful addition to HTML that allows you to control things you could not do with straight HTML. It also allows you to control stuff site wide with out having to write the code for it in every page. It is commonly referred to as CSS (Cascading Style Sheet). In HTML 5 they want you to structure the page with html and then style and align it with CSS.

<p> A Paragraph tag must be closed thus:</p>

Span should be used to set the CSS class of an element with out affecting the formatting of the page <span class="XXL"> This is really large text </span> It changes the data in the span but not the page around it.

Horizontal Rule

The old way does not work any more the way it used to say below because WC3 wants you to use style sheets so do this instead. BTW /* this is a comment in CSS (Cascading Style Sheet) and won't do anything */ I know the old ways were easer but change happens and we need to change with it or we will be left behind.. A lot of things I was taught in html 4 and before do not work any more or are deprecated and on their way out and I have had to update my pages.

The style below sets color 2 times because other wise I had a 4 px high rectangular box. I decided to change it to a solid colored hr and found I had to set the background to fill in the box, and border type, I had the color style but it is used for text so it probably should be removed, I was experimenting. Margin and boarder gives it some spacing top and bottom, auto left right centers it in the page. I tested it and yes color: can be left out. #ooooff is blue btw. Display block makes it a line, you would think inline would be a line but after experimenting with it got a short little rectangle.. I have a page in my browser that has a open local page that I was experimenting with changing my bottom menu. It is a bit more complicated than it looks in order to get it size with out line warpping. This way you can make a change to the page or style sheet, reload the page and see the result.

/* sets Horizontal Rule hr elements,  margin-left: auto; margin-right: auto;
centers elements like tables, hr, images */
hr         {
    background:  #0000FF;
    width: 95%;
    height: 1px;
    border: solid #0000FF;
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

Tables

With Tables it is critical that tags are closed correctly and in order or they can cause major display problems. Often I see <td> that are not closed or not in correct nesting order. Also my css file is altering how tables display.
HTML5 has changed tables and all the settings or cell spacing, padding, width and so on are done with CSS now. I do not use tables on any of the pages on Scottsworld for formatting but Cactus Wren Weather station does use tables for formatting but they are not visible because the boarders are set to not display. The centert class sets the table to be centered and 100% of the container width.

/* sets borders color and style of  <table> element  */
table.centert  {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

table     {
	empty-cells: hide !important;
	border-collapse: collapse;
	border: none;
	border-width: medium thin medium thin !important;
    margin-left: auto;
    margin-right: auto;
}

.tablem     {
	empty-cells: hide !important;
	border-collapse: collapse;
	border: solid Blue;
	border-width: medium thin medium thin !important;
	width: auto;
	table-layout: auto;
    align-self: center;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
}


/* this is commented out
	border: thin double blue;
}

tr        {
	border: thin solid blue;
}
*/

/* sets font size and weight of <table> element <th></th> */

th         {
	border: inherit;
	font-size: 20px;
     color: Blue;
	font-weight: 600;
	text-align: center;
}


/*  sets font size and weight of <table> element <td></td> */
td         {
	border: inherit;
	font-size: 16px;
	font-weight: 400;
    vertical-align: middle;
    align-content: center;
    align-items: center;
    text-align: center;
    display: block;
}

You can do any combination of columns and rows, tables can be quite complex and easy to be messed up. Just remember that <td>Table Data/cell/column</td> must be inside <tr>Table Row</tr> but you can have any number of <td>Table Data/cell/column</td> pairs inside the <tr>Table Row</tr> The more <td>content column</td> pairs you the more columns you will have. This is an example of a page with complex table structure you can see: Cactus Wren, Scott's Weather Station near 43rd Ave & Camelback Rd, Phoenix, AZ, Climate Data

The code for the above table looks something like this

Table errors will cause your pages to display wrong or not at all, as can other tag nesting order problems. Common problems I see in pages are <td> table data tags are not closed or <tr> table rows tags are not closed or not closed in the correct order. A good rule with </tr> close table row tag is either it must be followed by a new <tr> tag or the table must be closed </table>. Also all data in the table MUST be inside a pair of <td>this is Data </td> tags, and all <td> tags pairs must be inside of a Table Row <tr> tag pair. You can have more than one pair (as many as you need) of <td> </td> between <tr> </tr> tags but they must be paired. The Table Data tags <td> must be closed </td> before the next <td> is opened or the next <tr> tag. Tables can be much larger and complex than the samples above with multiple rows and columns. Think of it as <td> </td> creates a box followed by more <td> </td> will create a row of boxes or in combination with <tr> <td> </td> </tr> can create rows of one box or boxes. Another useful tag set is Table Header <th></th> which can be used in place of <td></td>  I use a style sheet to set Table Header contents to be Bold and larger font than the Table Data contents. I would not use the <tbody> tag which is used inside the <table> </table> before and after all the <tr> tags, it is not necessary and many browsers do not support it but they will just ignore it. Front Page and some other editors seem to put it in anyway.

Element Alignment

<center> has been phased out and <div align="center">item</div> is depreciated (being phased out) and you should css and use align-content: center; align-items: center text-align: center; Some only work in some elements for instance <h1 style="text-align: center;"> this is a centered H1 Headline </h1> will only work with text-align: center; does exactly what it says align text center, or left or right.

You can still use but it won't validate and will probably quit working in the future, the align="center" in lots of tags or their contents you'd like to position; table, td, th, div, p, hr, h1 and others I'm sure I haven't thought of. You can also use the values "left" and "right". It took me a lot of research on how to align tables and images in the center in HTML 5 but this code in your css for that element will center about anything.

    margin-left: auto;
    margin-right: auto;

htmlhelp.com Table Body
W3 School Table Body
Microsoft Library Table body

Using quotes on values

Any value that follows an equal sign must be quoted thus; align="center",  width="600", height="20", border="0" <a href="index.html"> not a real link</a> also links out side of the site must be preceded with the http <a href="http://scottsworld.info">Scott's World</a> before rest of the address. A link to a page on your site can be done thus: <a href="index.html">Home Page</a> as long as they are in the same folder. If you wanted to link to a file in a folder above the one your file is in you would do this <a href="../index.html">Home Page</a>.

ASCII code

You should not use high value ASCII code in the text of your web pages, it may or may not display correctly. Firefox displays stuff that isn't coded right as a diamond with a question mark in the middle of it. The common ones are that should be replaced are " which you should use ", & &, © ©,
° ° and ¶ ¶ , < < Less than sign, > > Greater than sign, any accented letter symbols such as aacute á á and there are a lot more. See Character Entity Sets for an extensive list, also ASCII Character Codes Chart There are a lot of them in my Spanish/Espanol version of the Plan of Salvation page El Plan de Dios de la redencion y la salvacion.

List Items

I've seen a LOTS of errors using lists. There are three types of lists <ul> unordered lists, <ol> ordered lists and <dl> Definition Lists. The first two use <li> elements </li> Unordered list makes a bulleted list. If you change UL to OL, an ordered list, then it will number the list items instead of display a dot. Using style sheet commands gives you a lot more options for the list style types and do other things you can't with HTML. li in the OLD days you did not have to close it but now it must be closed like other tags.

• first list item
• second list item
• third list item
• fourth list item
• fifth list item

1. first list item
2. second list item
3. third list item
4. fourth list item
5. fifth list item

This is a Definition Title it will not be indented and is styled bigger and bold

1 This is a Definition Data it will be indented

2 This is a Definition Data it will be indented

3 This is a Definition Data it will be indented

4 This is a Definition Data it will be indented

5 This is a Definition Data it will be indented

I use Detail Lists </dl> a lot for scripture placement on God's Plan of Salvation, and Which is the True Church?
The questions on this page are in a OL <ol> list which generates the numbers next to them.   101 Answers from the Book of Mormon to life's great questions

The first two lists use <li> for elements </li> can NOT be used with a <dl> list and you can not use the <dt> and <dd> elements in the first two <ul> and <ol> lists, nor can you use any of the list elements out side of their intended list or mix them TOGETHER. You could put a whole list inside of a list element of another list like below but I don't know why you would want to.

• first list item
• second list item
• third list item
• fourth list item
• fifth list item

I use Unordered Lists <ul> on my General Bookmarks links page of my personal website. This is a link to my list of helpful pages to learn about html, CSS and being a webmaster.Scott's World Help Web Links

This is a link to the W3 school site, W3 sets the standards for the web, so it is an excellent site to learn from. HTML Certification School

Fonts

<font> are also depreciated (being phased out) in HTML 4 and will not validate in HTML 5 it is highly recommended you use a Cascading Style Sheet instead. If you really need to change one line or word for some reason you can use an inline style like an old font tag. This is an inline styled span element it looks like this: <span style="color: #ff0000; font-size: 26px; font-weight: 300; font-family: Times New Roman, serif;">This is an inline styled span element it looks like this:</span>

I am not an expert on style sheets but there are lots of resources on the web and I will help if I can. I highly recommend using an external style sheet. It will allow you can remove a lot of redundant unnecessary code from your pages. If you decide you want to change how text looks, an element should be bold, bigger, smaller, italic, centered, sanserif instead of serif, what ever you want, you can change the element attributes in your style sheet and it will change the look of every instance of that element on every page of your website when you upload the style sheet and you only had to edit one file! You should have a link to your style sheet <head> some where between the </head> tags of your website. The metatag should be with it just to make sure browsers display your website properly. You can code every page text like this:

body         {
	margin: auto 10% 2% 10%;
	font-size: 100.00%;
	font-family: "Times New Roman", serif;
	color: Black;
	font-variant: normal;
	line-height: normal;
	letter-spacing: normal;
	background-color: #FFFFF4;
	background-image: none;
}

<link rel="stylesheet" href="main.css" title="Default">
</head>

Colors

You can use named colors, hexdecimal colors, or RGB color coding. I've not played with RGB values, if you know them great, if not stick with hex or named colors. You can color text, backgrounds, borders and maybe other things I haven't thought of as I write this.. You can use either the color keywords or the hex values. You can set the background of the page <body background="white">, background of table elements is <body style="background-color: #E1E1E1;">. In CSS you do it a bit differently color: Black; or in hexdecimal color: #000000; would set the color of text, I had to set the <td style="background-color: blue">     </td> because the old way <td background="blue"> had quit working. If you don't set the back ground it will default to what ever the color of the pages is, which is what the table below did before I styled it to fix it. You only need to set background on stuff you want to be different, other wise it will be the default color of the page. In a style sheet you could set the background of every <td> </td> thus:

    
/*  sets font size, style, weight of text in and background <table> element <d> </td> */
td         {
	font-style: normal;
	font-size: 16px;
	font-weight: 300;
    background-color: white;
}
   

There are several links about color use on my general links page under HTMLWeb education A some what complex explanation of different color codes. CSS3 Color Module, HTML Color Names

Style precedence

You can do Styles in three ways and this is the order of their precedence. Inline styles override everything above them, styles in the head of the page come second and an external style sheet comes last. It is best to put your styling in the external sheet so you can control the whole website with it. If you need to change something on one page that is different then you would use Internal styles in the head or inline styles to control a particular element. This page will tell you more about that (note it opens a new window) CSS Basics.com Chapter: 1 - Introduction to CSS.

Selectors

When I told you about Span <span class="XXL">This is really large text</span> I need to tell you that class=XXL is a CSS selector, one of several I use to select font sizes from my external style sheet, not a standard CSS command. A Selector is any command or collection of commands that starts ".selectorname", in your Style Sheet you call it though the use of the class="selectorname", which you could put in about any HTML element. You can name it anything you want, but it can not start with a number, also you should know they are CaSe sensitive and your .selectorname and class="selectorname" must be exactly the same. In my external style sheet the selector looks like this:
.XXL { font-style: normal; font-size: 26px; font-weight: 300; }
called by class="XXL" can be used as many times as needed. #container{ width: 90%; padding: 8px; border: 0px none transparent; background-color: #ffffff; background-image: none; }
called by id="container" note you don't use the #, should only be used once in a page.

Selectors are used to control special elements, I use them to set things like the size, color and boldness of special text and to make headlines. For the most part the power of CSS is to set the attributes of an HTML element so you don't have to use all those class= or id= commands which just add more junk that really doesn't need to be there. I've read that you can use class="whatever" as many times as you need, but id="specific" should only be used once per page. When I see a page full of inline styles that are set in the code instead of an external style sheet I have to wonder why?? It is no different than using all those font tags they were meant to replace and makes the code bloated and more complex which pretty much defeats the whole idea of a style sheet. I'm not saying you should never use inline styles or class statements, sometimes they are necessary which is why the exist, but just because you can do something doesn't mean you should unless you absolutely have too. Keep it simple! An example of the styling of the HTML element <p> that I am using:
p { text-indent: 30px; font-style: normal; font-size: 19px; font-weight: 300; }

Sample style sheets and example sites

I have a few basic style sheets examples you can save, look at and experiment with. Things you will likely want to change will be the colors of the link codes, the background and maybe the font sizes or type of font used. You can do far more with a style sheet than I have in these examples, you can control the positioning of every element of the page if you wanted and produce effects that are not possible in HTML. If you look at the code of the example pages you will not find any font tags or in any of my pages. You can look at the source code of a page by right clicking on the page some blank portion of a page and selecting view page source.

You can download the sample style sheets by right clicking and save as, if you click on them you can see the code

• download sample generic style sheet, sample page below
• Sample Page
• download sample style sheet this website (what you see here)
• a sample CSS file I wrote for Ancestral Quest generated genealogy pages I switch to an new program and do not use it any more
• Cactus Wren, Scott's Weather Station style sheet see site Cactus Wren, Scott's Weather Station Page, West Phoenix, Arizona

You might find these pages interesting, I used them when I was testing the style sheet for my website and testing font sizes control methods. I choose to use px because it seems (to me) to give the most consistent size between different browsers. Most sites will tell you to use proportional fonts to accommodate the people who use font control in IE, but very few mention that if you have one element inside another and both have a proportional font set the inner element will in proportion to the first and therefore smaller, so you have to be careful with them. Fixed fonts have no such problem. I have tested it and you can zoom the page in and out on my site in both Firefox and IE using <ctrl> + plus or - Minus, <ctrl> and the scroll wheel on a mouse will do the same. It only affects those few people who have used Page; Font Size and changed it there in IE. I think the solution is to not use tiny fonts in the first place, you will note I use fairly large text on my site. I am near sighted so I appreciate sites that use decent font sized fonts and I have a Firefox plug in called Stylish that can change the styles of other sites I need to. You can see the few I've published at Userstyles.org Scott's User styles They also work with Grease Monkey which I've not used.
Try viewing the pages with Firefox and IE and note the differences between they way display the pages.
CSS Test 1/Demonstration Page
CSS Test & Font size Demonstration Page
Sample Page

DOCTYPE

Doc Type, it is becoming increasingly important to tell the web browser what sort of document it is looking at. The DOCTYPE declaration should be the FIRST line of your HTML document with nothing above it and following it should be your
<!DOCTYPE html>
<html lang="en">
<html>
<head>
tags.
You can learn why DocType is important from this sites (opens new windows) Fix Your Site With the Right DOCTYPE!

Page Structure

This is a basic structure of a page in HTML 5 with a style sheet.   I really hope your title tags tells what the page is about and does not say "untitled" "untitled page", "untitled document", "new page" or anything of that nature... If you cut and past the below into notepad and saved it as a filename.html you would have the beginnings of a page that just add needed content and proper title, etc. You would also have to save the style sheet download sample generic style sheet, sample page below. In html 5 it is simple <!DOCTYPE html>

Comments

BTW this is a HTML comment it starts with <!-- and ends with -->, <!-- this is a note in the code that can't be seen in the page --> it is a good idea to put notes in your code so you know what you did later.. The *** makes it easer for me to find the comments, I use them as markers in sections of the code. /* this is a comment in a style sheet */, it starts with /* and ends with */ and allows you to put comments in your style sheet what things do.

Here is a full Sample Page with some various example content for you to look at. Here is the same page with out the CSS so you can see what the CSS does Sample no CSS Page. Open the page and then right click anywhere on the page (except over images) and select view source to see the code and contents, the style sheet is above. You can do this with most any page to see how it is constructed. Something else I should mention you should create a template page and then use it to create other pages then it will already have the beginning structure of a page so you don't have to start from scratch each time and then you just need to add the content, change the title of the page and save the page as whatever.htm or what ever you want to call it. Don't forget to make links to your new page in your old pages. Navigation, how people get around your site is very important. If they can't find their way around they will leave. Most visitors look at a page and if they don't like what they see they leave quickly. You could copy the above in to a file, remove the words and save it as your template if you wanted.

Validate Your Code

You can validate your pages with the W3 Validator, it will tell you if your code is valid for it's doctype and where the errors are. W3 code Validator They also have a CSS validator W3 CSS validator.

Spam Proof Email Link

BTW, the below email link is in a Java Script which will prevent spammers from finding it on your web sites. This is the script below. Change "your name"; to IE "Mary Jones"; or what ever your name is, "email user name"; to what ever your user name is IE: "mary.jones"; and "email provider"; IE "yahoo.com";. You can also change the subject which the script will fill in on the email IE web page comments. Do not change anything else or the script will not work.