Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Web Design & Development Web Design & Development
Search Search
Search for:
Tech Support Guy > > >

Solved: Help with W3C Validation


(!)

DrP's Avatar
DrP DrP is offline DrP has a Profile Picture
Computer Specs
Member with 734 posts.
 
Join Date: Jul 2005
Location: Norwich, UK
18-May-2012, 04:21 PM #16
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's Avatar
colinsp   (Colin) colinsp is offline
Computer Specs
Member with 1,662 posts.
 
Join Date: Sep 2007
Location: Spain
19-May-2012, 02:22 AM #17
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's Avatar
Ent   (Josiah) Ent is offline Ent is a Trusted Advisor with special permissions.
Computer Specs
Trusted Advisor with 5,242 posts.
 
Join Date: Apr 2009
Location: United Kingdom
Experience: Intermediate
20-May-2012, 11:00 AM #18
Quote:
Originally Posted by Ovivtopher View Post
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's Avatar
Ovivtopher Ovivtopher is offline
Member with 109 posts.
THREAD STARTER
 
Join Date: Jul 2005
Experience: Beginner
20-May-2012, 10:08 PM #19
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's Avatar
colinsp   (Colin) colinsp is offline
Computer Specs
Member with 1,662 posts.
 
Join Date: Sep 2007
Location: Spain
21-May-2012, 01:19 AM #20
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's Avatar
Ovivtopher Ovivtopher is offline
Member with 109 posts.
THREAD STARTER
 
Join Date: Jul 2005
Experience: Beginner
21-May-2012, 01:28 PM #21
I have uploaded the new index.html file here: http://www.bluelotus-consulting.com/...-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's Avatar
colinsp   (Colin) colinsp is offline
Computer Specs
Member with 1,662 posts.
 
Join Date: Sep 2007
Location: Spain
21-May-2012, 02:18 PM #22
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.

Last edited by colinsp; 21-May-2012 at 02:24 PM..
Ovivtopher's Avatar
Ovivtopher Ovivtopher is offline
Member with 109 posts.
THREAD STARTER
 
Join Date: Jul 2005
Experience: Beginner
21-May-2012, 05:50 PM #23
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's Avatar
colinsp   (Colin) colinsp is offline
Computer Specs
Member with 1,662 posts.
 
Join Date: Sep 2007
Location: Spain
22-May-2012, 01:34 AM #24
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

Code:
<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's Avatar
Ovivtopher Ovivtopher is offline
Member with 109 posts.
THREAD STARTER
 
Join Date: Jul 2005
Experience: Beginner
22-May-2012, 05:57 PM #25
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's Avatar
colinsp   (Colin) colinsp is offline
Computer Specs
Member with 1,662 posts.
 
Join Date: Sep 2007
Location: Spain
23-May-2012, 01:47 AM #26
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's Avatar
Ovivtopher Ovivtopher is offline
Member with 109 posts.
THREAD STARTER
 
Join Date: Jul 2005
Experience: Beginner
23-May-2012, 07:40 PM #27
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's Avatar
Ovivtopher Ovivtopher is offline
Member with 109 posts.
THREAD STARTER
 
Join Date: Jul 2005
Experience: Beginner
23-May-2012, 11:13 PM #28
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's Avatar
colinsp   (Colin) colinsp is offline
Computer Specs
Member with 1,662 posts.
 
Join Date: Sep 2007
Location: Spain
24-May-2012, 02:18 AM #29
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's Avatar
Ovivtopher Ovivtopher is offline
Member with 109 posts.
THREAD STARTER
 
Join Date: Jul 2005
Experience: Beginner
24-May-2012, 01:37 PM #30
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; }
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
WELCOME TO TECH SUPPORT GUY!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.


(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑