# Solved: Help with W3C Validation



## Ovivtopher (Jul 26, 2005)

I'm posting my HTML index page which works fine in all browsers except IE (that's another post to come later). When I paste this HTML page into W3C Validator, I get over 60 errors. None which make sense to me. Any help would be appreciated  This is my first real effort at creating a page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Blue Lotus Consulting & Training-What We Do











HOME
ABOUT
SERVICES
NEWS
CONTACT

*INNOVATE. ENERGIZE. TRANSFORM.*

The blue lotus, also known as a blue water lily, closes at night and sinks underwater. In the morning, with the rising of the sun, it reawakens and blooms again. To the ancient Egyptians, this beautiful, fragrant flower symbolized renewal, well-being and long life. On the Asian and African continents it represented immortality and the ability to survive throughout hardship remaining viable for many years. The blue lotus, which had such a profound impact on so many cultures, represents our efforts to enhance an organizations ability to meet its mission to heal the world around it.

*What We Do*

Blue Lotus provides consultant, facilitation and training services to nonprofit agencies and libraries and research services to individuals.*Consultant and facilitation services focus on building an agency's capacity to serve its community effectively.* Training services offer on-site workshops for board members or staff and presentations for local, regional or national groups or conferences.* Research services assist writers, genealogists and historians with background research in their areas of interest. Blue Lotus has successfully served libraries, faith-based and nonprofit organizations working in the fields of advocacy, arts, education, genealogy, health, youth, human services and prevention and recovery since 2001.

*RESOURCES*



*FUNDRAISING*


*GRANTSMANSHIP*


*LIBRARY RESOURCES*


*NONPROFIT RESOURCES*




Bringing strategic thinking to organizations seeking innovation, growth or transformation.


Site map
© 2012 All Rights Reserved. Blue Lotus Consulting & Training.
[email protected]]Email Blue Lotus[/EMAIL]: [email protected]


----------



## colinsp (Sep 5, 2007)

As a starter move your


```
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
```
To the first line after your Head statement.

Add a / to the end of the lines for your CSS calls

See where you go from there


----------



## colinsp (Sep 5, 2007)

You also don't need this


```
<meta charset="utf-8">
<style type="text/css">
</style>
```
So delete it.


----------



## Ovivtopher (Jul 26, 2005)

Did above suggestions and the 61 errors went down to 58! The most problems seem to be with the keywords and text I have in the head section. The errors read:

"word" is not a member of a group specified for any attribute

Once these are taken care of there are only a handful left.


----------



## DrP (Jul 23, 2005)

How about a link to the site so we can validate and see the errors? Out of curiosity: why XHTML Transitional?


----------



## Ovivtopher (Jul 26, 2005)

Here's the test link: http://www.bluelotus-consulting.com/TEST5-16-12/index.html With the recommended changes there are now three A letters showing with carrot tops on the left top side in 3 browsers (Safari, Chrome and IE). These don't show when I open the browsers from NoteTab, only when I open it from the Test Link listed above.

I created most of the HTML in NoteTab Light and originally used <!DOCTYPE html>. I thought that might be the problem, so I started a new file in Dreamweaver and then just copied and pasted that to start it off. Would it be better if it read differently?

Also, the pages are rendering correctly with the background image in all browsers except IE (except for the recent addition of the letter A in the top corner). In IE only part of the image shows and it is too high up on the page. Any suggestions for that issue will be appreciated as well, thanks all.


----------



## dukevyner (Nov 4, 2011)

DrP said:


> How about a link to the site so we can validate and see the errors? Out of curiosity: why XHTML Transitional?


Often web editors even high end ones such as Dreamweaver set this by default when creating a new page 
for example simply creating a new html page in Dreamweaver, it automatically writes


> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> 
> Untitled Document


Of course this is only a possibility as I'm not the one who wrote the code above


----------



## colinsp (Sep 5, 2007)

You have foreign characters in your source code. That is where the A's are coming from. Look at all the other weird characters in the screenshot. Open your html page in Notepad or better yet Notepad++ (its a free download) and edit out those characters.


----------



## Ovivtopher (Jul 26, 2005)

There is no foreign code in the GoDaddy files or in the NoteTab files. I noticed it also that they do show in place of the quote marks when you look at the source code in all the browsers. What's going on with that? Should I upload that file again?

And, still need answers to

a. Why all the errors in the W3C validator, and
b. Why background-image doesn't appear correctly in IE, and how to fix it?

_Here's my head code from my uploaded file on GoDaddy, you can see there are no foreign characters:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* **

Blue Lotus Consulting & Training-What We Do

_

(That's funny, the code does not have * before and * * after the meta-http equiv= line; that only shows after I post this message!)


----------



## colinsp (Sep 5, 2007)

If you look at my screen shot you will see what your characters have been converted too. This is what is causing your validation errors.

Edit the file in a plain text editor to get rid of the smart quotes and any other characters that are illegal I I expect the majority of your errors will disappear.


----------



## Ovivtopher (Jul 26, 2005)

The problem is I don't see the characters in the GoDaddy file from which the page is coming from. They're also not in the file generator NoteTab Light. So should I just upload the file again to GoDaddy? Or should I copy the file from the browser/show source into NoteTab, make the corrections, save it and then upload it to GoDaddy?


----------



## colinsp (Sep 5, 2007)

As I stated above changing the smart quotes to normal quotes reduces the errors to 20.


```
<!DOCTYPE HTML>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />**
	
         <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
	<link href="css/styles.css" rel="stylesheet" type="text/css" media="print" />
    
              
	<meta http-equiv="Content-Type" content="cache" />   
        <meta http-equiv="content-style-type" content="text/css" />
        <meta name="author" content="Vivian Linderman" />       			
	<meta name="robots" content="INDEX, FOLLOW" /> 
	<meta name="keywords" content="blue lotus consulting, training, workshops, capacity building, nonprofit, nonprofits, library, libraries, research, family, genealogy, genealogists, grantwriting, grant writing, grantsmanship, fund raising, fundraising, facilitating, facilitation, retreat, Southern California, Los Angeles, Long Beach, Vivian Linderman" />
	<meta name="description" content="Blue Lotus Consulting & Training serves the library, nonprofit and research communities seeking to innovate, energize or transform." /> 
    <meta name="date" content="Revised May 2012" />

<title>Blue Lotus Consulting & Training-What We Do</title>


</head>

<body>
<div id="outer">
<div id="wrapper">
<div id="logo">
<p><img src="images/logo.gif" width="332" height="155" alt="Blue Lotus Logo" /></p>
</div>
<div id="topnav">
<ul>
<li><a href="index.html" target="_blank">HOME</a></li>
<li><a href="about.html" target="_blank">ABOUT</a></li>
<li><a href="services.html" target="_blank">SERVICES</a></li>
<li><a href="news.html" target="_blank">NEWS</a></li>
<li><a href="contact.html" target="_blank">CONTACT</a></li>
</ul>
</div>
<div id="tagline_1">
<h1>INNOVATE. ENERGIZE. TRANSFORM.</h1>
</div>
<div id="changing_content">
<p class="change">The blue lotus, also known as a blue water lily, closes at night and sinks underwater. In the morning, with the rising of the sun, it reawakens and blooms again. To the ancient Egyptians, this beautiful, fragrant flower symbolized renewal, well-being and long life. On the Asian and African continents it represented immortality and the ability to survive throughout hardship remaining viable for many years.  The blue lotus, which had such a profound impact on so many cultures, represents our efforts to enhance an organization&rsquo;s ability to meet its mission to heal the world around it.</p>
</div>
<div id="main_content">
<h3>What We Do</h3>
<p>Blue Lotus provides consultant, facilitation and training services to nonprofit agencies and libraries and research services to individuals.&nbsp;Consultant and facilitation services focus on building an agency's capacity to serve its community effectively.&nbsp; Training services offer on-site workshops for board members or staff and presentations for local, regional or national groups or conferences.&nbsp; Research services assist writers, genealogists and historians with background research in their areas of interest.  Blue Lotus has successfully served libraries, faith-based and nonprofit organizations working in the fields of advocacy, arts, education, genealogy, health, youth, human services and prevention and recovery since 2001.</p>
</div>
<div id="right_side">
<h2>RESOURCES</h2>
<ul>
<li>
<h3><a href="resources_fundraising.html" target="_blank">FUNDRAISING</a></h3>
</li>
<li>
<h3><a href="resources_grantsmanship.html" target="_blank">GRANTSMANSHIP</a></h3>
</li>
<li>
<h3><a href="resources_library.html" target="_blank">LIBRARY RESOURCES</a></h3>
</li>
<li>
<h3><a href="resources_nonprofit.html" target="_blank">NONPROFIT RESOURCES</a></h3>
</li>
</ul>
<div id="socialmedia"><a href="http://www.twitter.com/bluelotusca"><img src="images/twitter icon.png" width="50" height="39" alt="twitter icon" /></a></div>
</div>
<div id="bottom_text">
<p class="tagline">Bringing strategic thinking to organizations seeking innovation, growth or transformation.</p>
</div>
<div id="footer" class="footer">
<ul>
<li><a href="site_map.html" target="_blank">Site map</a></li>
<li>&copy; 2012 All Rights Reserved. Blue Lotus Consulting &amp; Training.</li>
<li><a href="mailto: [email protected]">Email Blue Lotus</a>: [email protected]</li>
</ul>
</div>
</div>
</div>
</body>

</html>
```
You now need to resolve the file naming errors and the no HTML5 errors and then you will be much closer.


----------



## Ovivtopher (Jul 26, 2005)

I don't know what a "smart" quote is. But, I'll retype the file and see if that works. I've also gone back to the simple <!doctype html> DTD instead of the Dreamweaver transition version. I'll be back later.


----------



## colinsp (Sep 5, 2007)

One problem is with the HTML 5 doctype that you now have some of the other DW generated tags are invalid for HTML 5. So you need to check each statement against the HTML 5 feature set. 

IMHO you may be better off going for an older doctype.

Check Google out for smart quotes. One of the products that you used to generate your html created them that is why I said to just use a plain text editor like Notepad++.


----------



## Ovivtopher (Jul 26, 2005)

It's NoteTab Light a plain text editor? I've used that for most of the site, but tried DW for certain things, saving the files back and forth between the two. *Is that a no no?*

I've retyped the quotation marks on the meta tags and that took care of that problem. I restated the doctype using 4.01 strict and then the validator told me some of the tags weren't appropriate for the doctype. I worked on removing the last / in all of the meta tags and that got me down to one error (finally)! That error tells me I can't use the attribute target

[*]HOME

But it's only pointing out this one reference, the other "target attributes" are fine. *Should I even worry about it?*

*The change in code still does not render the IE background image correctly. *

Thanks ColinSP for staying with me on this!


----------



## DrP (Jul 23, 2005)

Going with ColinSP's code above, you should be able to get rid of the errors quite easily by removing meta tags and getting rid of spaces in image src and link href.

As for reverting back to an older doctype - why? If you're going to learn to code, you may as well use modern methods.


----------



## colinsp (Sep 5, 2007)

I see that you have switched back to html 5. That is fine but you are adding to your learning curve that is why I suggested taking baby steps and get it working how you wanted in an older more familiar doctype before experimenting with html 5.

Have a look at the html 5 tag definitions here it will help you sort out the last few errors that you have.

I have checked out the editor that you use, yes it is a plain text editor but either it, DW or GoDaddy code editor introduced the smart quotes. I suggest you give Notepad++ a try is is more powerful than your current plain text editor.

Let us know how you get on.


----------



## Ent (Apr 11, 2009)

Ovivtopher said:


> I don't know what a "smart" quote is.


Smart quotes are the quotation marks that word processors tend to put in. The opening quote mark curves or bends (depending on the font) to the right, and the closing one curves or bends left.

Smart Quotes
"Regular Quotes"

The trouble is that the smart quotes are actually 2 different characters, and they aren't recognized as quotation marks by web browsers or the validator.

Now I'll pull out again and let DrP and collinsp continue with the good job they're doing.


----------



## Ovivtopher (Jul 26, 2005)

Thanks for hangin in guys. Ok, I've realized that when I use NoteTab Light, DW and then also edit in the GoDaddy window, the quotation marks are doing weird things; I did notice the change in look when I retyped them all. And, who remembers when and if I cut and paste code into Word and then uploaded that. I probably did at one time or another. So thanks for the info on the Smart/Regular Quotes. The current code I have now is working with only one error; I don't recall if I've uploaded it to the Test site or not. I'll work on it again tomorrow. But I did go back to HTML 4.01 Strict to get it all to work.

From what I read about using !Doctype HTML I got the impression that HTML 5 would pick up all older Doctypes. But I guess it doesn't or I just ignore the errors as the site was working fine anyway. *Is it important to always validate if things are working?*

*Big issue remaining is how to get the background image to load correctly in IE. Any suggestions?*


----------



## colinsp (Sep 5, 2007)

Get the latest version up on the test site so we can see the issue with IE and the current code.

Validation is a good indication of your site and its look and feel but imho not the be all and end all. I test my sites on the common browsers (FF, IE, Chrome, Opera and Safari) to make sure they look right and get rid of all the errors. I know others are less picky about errors if it looks right.


----------



## Ovivtopher (Jul 26, 2005)

I have uploaded the new index.html file here: http://www.bluelotus-consulting.com/TEST5-16-12/index.html
Everything validates except for the one target="_blank" code. I'm not going to worry about it.

Questions:
1. Why does IE not show background image correctly? How to fix? (Not to be belaboring this point, but it's so wierd; I don't get it).

2. I looked at the W3 schools listing of new HTML 5 codes and I am wondering why you would use this code when all the IE browsers below 9 don't work with it. Couldn't we say a large majority are using older versions of IE?

3. Do I now copy this cleaned up Head section and drop it into the other pages so they are all the same? (Except, I'll change any meta tags for description, title, etc.)

Thanks.


----------



## colinsp (Sep 5, 2007)

Your validation error is probably due to you being on the home page. The href should be just # and not a url and there should be no target or it will try to open in a new window which is not what you want. Thinking about it you don't want a target on any of your links, if you do your visitors will open multiple pages on your site. That would certainly P me off big time.

You also have an error in your CSS delete the font expand for your H1 tag.

I agree about HTML5 I still have a lot of visitors to my sites in IE6. Earlier versions of IE should render common tags fine and just do nothing with the HTML5 ones BUT it is IE so there is no guaranty.

Try changing your definition for the body image to left bottom rather than just bottom and lets see where we go from there.

Yes copy the cleaned up head section over.


----------



## Ovivtopher (Jul 26, 2005)

I'm not sure what you mean by this: _ href should be just # and not a url _

And, since I don't want to P you off, I took off the target=_blank on all the onsite pages, but only the About page is opening on top of the Home page. Have only done this in my text editor, not upload yet to the test site. Why aren't they all changing?


----------



## colinsp (Sep 5, 2007)

By having a url you are forcing the browser to reload the page. # is a url but the browser interprets that as 'stay here and do nothing'. So on this page in your menu you should have


```
<li><a href="#" >HOME</a></li>
```
Likewise on the other pages on your site you should replace the url with the # so for example if you are on the About page the url in the menu should be a # and so on.

Depending on how you are testing your browser cache may be affecting things and you aren't seeing your changes.


----------



## Ovivtopher (Jul 26, 2005)

Colinsp-

The "#" does not work (is that because it's HTML 5?) so I've kept the refs as they are. Every page has been cleaned up and validated, so all are now working! Yea! The new site link is http://bluelotus-consulting.com/TEST5-22-12/index.html

Changing the background image position to bottom left or left bottom only changes the aspect of the image, but not the bad placement. I've fooled around with the position element before also using % but nothing seemed to work.


----------



## colinsp (Sep 5, 2007)

You need to read up on the position element on w3c.If you don't specify a left or right then center is assumed, is that what you want?

The # does work I suspect you aren't using it properly. On the page that you are on it shouldn't do anything. It saves all the html calls from your browser to the webserver. This is particularly important for mobile data users and users on dial up as they are unnecessary calls that slow down their browsing experience and cost them money. You are using html 4.01 not 5.

You seem to have two divs doing the same thing outer and wrapper. You can get rid of one of them.

I suspect that your IE problem is caused by the 'box model' and how ie interprets it. Google this and see if it is what is affecting you. And for IE you probably will need to set your background to transparent to allow the image to show through.


----------



## Ovivtopher (Jul 26, 2005)

It seems the box model is a problem for older versions of IE prior to IE 6; I'm testing it in IE9. 

I've deleted the wrapper container and kept the outer container which had a wider screen width. I've set the background for the outer container to transparent and that allows the image to show through, but I still can't get it positioned at the bottom of the page. It seems somehow that IE is not picking up the whole page within the body style, and only positioning the background image in relation to the top 1/3 of the page. When I position it at bottom, it only goes as far as the bottom of the changing content div. When I position it at top, it goes above the changing content div.


----------



## Ovivtopher (Jul 26, 2005)

Ok, I've been exploring different "help" sites all over the web. 

I added this code to my css file


* {
border: 1px solid red !important;
}

and it shows me the page with a box around the top 1/3 in IE; this is where the image is locating it's position within. Why it's not the whole page, you've got me. The box also shows, with a heavier bottom line, in Safari/Chrome, but the image is in the right place. 

Also, when I test the site in older IE versions, using IE Netrenderer, in IE 5.5, 6 and 7, the nav menu falls below my tagline of Innovate. Energize. Transform.


----------



## colinsp (Sep 5, 2007)

Rather than assigning that to * can you put it on all the containers in your CSS and a different colour for each one and upload it and then lets see if we can sort it?


----------



## Ovivtopher (Jul 26, 2005)

In exploring CSS on the web, I have added the following code of *overflow: hidden* to the outer container. The image now works on all versions of IE, Chrome and Safari. I haven't checked FF. And, there's no clipping of scroll bars when window size is minimized, a problem with overflow: hidden according to a lot of posts out there.

So, now my only remaining issue is that in IE7 and versions below, the nav menu falls below the tagline. II tried changing display: inline; to display: inline-block; when I do that IE 8/9 is fine, but in IE7 and below there are still problems. Here's the current working code:

body {font-size: 16px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; line-height: 1.5; background-image: url(../images/flower_back.jpg); background-color: #FFF; background-position: bottom; background-repeat: repeat-x; }

/*Containers*/

#outer { width:960px; margin:0 auto; background-color: transparent; overflow: hidden; }

#logo {margin: 0px 25px 0px 0px; float: left; }

#topnav ul {
position: relative;
top: 45px;
width: 60%;
float: right;
border-top: 2px #575757 solid;
border-bottom: 2px #575757 solid;
padding: 10px 0;
}

#topnav ul li {
display: inline; }

#topnav ul li a {
padding: 0px 25px; /* Sets the Height and Width of the menu item*/
color: #575757; /* Sets the font color of the menu item text */
text-decoration: none; /* removes the underline from underneath links */
}

#topnav ul li a:hover {
color: #FF8000;
}

#tagline_1 {clear: both; width: 600px; float: right; }


----------



## colinsp (Sep 5, 2007)

I suspect that the nav is a bit too wide. It is why I said to put temporary borders around each item so we could see.

Try this

Set the width of #topnav ul to say 560px rather than 60% and see how it is then. If this fixes it you can then slowly increase the width until it breaks and then take it back down a couple of pixels. 60% is currently 576px.


----------



## tomdkat (May 6, 2006)

colinsp said:


> I suspect that the nav is a bit too wide. It is why I said to put temporary borders around each item so we could see.


Yep, I agree. Temporary borders are your friend since they let you know how elements are actually laying out.

Peace...


----------



## Ovivtopher (Jul 26, 2005)

Yea! That worked, but then I added an href link reference on my logo only to have a border around it. It took me awhile to figure out that I need to add border="0" to the CSS for the logo. I also had to play with changing the padding and margins on my borders for the NAV menu and the changed content to get them to even out. Using temporary borders really helped figure out padding, margins, etc. Then I had to make sure all the pages had the same logo image size, which they didn't. 

Everything is working now in all browsers and the different IE versions. I am now trying to figure out how to copy current files from GoDaddy before deleting them and then how to upload this new site of files. The only issue I have on the new site files is that in the News page, the page sort of recenters towards the right and then when you go back to any other page they move a bit to the left. I'm not sure what is causing that, the basic page html codes are all the same. 

When I get the files all uploaded, tomorrow is my goal to finish this off, I'll post the new site so you can take a look.

Thank you all for helping out with this! Except for a school project I did about 2 years ago (and cheated by using a template and adjusting it), I've never done a whole web site before from scratch. I started this with a text editor then went to Dreamweaver (but that was a whole learning experience that was too much for me) and back to the text editor. 

So, I was very excited to learn that techguy included help on web page development. I've used it before for hardware issues. It's great! Thank you again colinsp, you've been great!


----------



## Ovivtopher (Jul 26, 2005)

I'm done! Thank you so much TECHGUY! Visit my new site at www.bluelotus-consulting.com. It's been a pleasure


----------



## colinsp (Sep 5, 2007)

Your news page jumps right because it is the only page that fits on the screen window and doesn't need a vertical browser scroll bar. Once you have some news on there and the scroll bar appears you won't have a problem. You can always assign a min-height if you want to to force a scroll bar.

I see you still haven't resolved the # for the url  You ought to persevere to get it 100%.

Glad you got it how you wanted.


----------



## Ovivtopher (Jul 26, 2005)

Colinsp - I do intend to add the # for the URLs. Just wanted to get it up today without any more "issues." Will also be taking your recommendation and using NotePad++ for my next effort. I already have something in mind 

Thanks again for your help!


----------

