Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

HTML validation help

Status
Not open for further replies.

pahiker

Programmer
Aug 31, 2012
45
US
I ran the code below through the W3C validation and received two errors, which I am at a loss to understand. Code is below the errors.

Line 23, Column 6: document type does not allow element "BODY" here
Line 63, Column 7: end tag for "HTML" which is not finished


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
" 
<HTML>
<HEAD>
<TITLE>Friends to Friends</TITLE>
<META http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<META name="DESCRIPTION" content="An organization aimed at bringing disabled and non-disabled kids together through sports.">
<META name="KEYWORDS" content="sports, bowling, baseball, fishing, disabled">
<META name="AUTHOR" content="Mike Lipay">
<META name="RATING" content="Safe for Kids">
<META name="ROBOTS" content="index, follow">
<META name="REVISIT-AFTER" content="30 days">
 
<script src="js/ButtonJS.js" type="text/javascript"></script>
<LINK href="css/ButtonCSS.css" type="text/css" rel="stylesheet" >
<LINK href="css/Main.css" type="text/css" rel="stylesheet" >
</HEAD>
 
 
<BODY>
<div>
<IMG src="images/Friends.gif" class="hdr" style="top:10px left:10px" alt='friends'>
<IMG src="images/Baseball.png" class="hdr" style="top:80px left:50px" alt='baseball'>
 
<IMG src="images/Bowling.png" class="hdr" style="top:80px right:45px" alt='bowling'>
<IMG src="images/Fishing.png" class="hdr" style="top:10px right:10px" alt='logo'>
 
<H1>Friends to Friends</H1>
<H2 id="Chapter"></H2>
</div>
 
<table>
<tbody>
<tr>
<td>
<iframe id="Content" frameborder="0" scrolling="no" width="90%"></iframe>
</td>
 
<td>
<a id="Home" class="HomeButton" href="#" onclick="update('Home')"><span>Home</span></a>
<a id="SwPa" class="SwPaButton" href="#" onclick="update('SwPa')"><span>SW Pa.</span></a>
<a id="NwPa" class="NwPaButton" href="#" onclick="update('NwPa')"><span>NW Pa.</span></a>
 
<a id="link1" class="" style="width:36%;" target="Content" href=""></A>
<a id="link2" class="" style="width:36%;" target="Content" href=""></A>
<a id="link3" class="" style="width:36%;" target="Content" href=""></A>
<a id="link4" class="" style="width:36%;" target="Content" href=""></A>
<a id="link5" class="" style="width:36%;" target="Content" href=""></A>
<a id="link6" class="" style="width:36%;" target="Content" href=""></a>
</td>
</tr>
</tbody>
</table>
 
<script type="text/javascript">
update('Home');
</script>
 
</BODY>
</HTML>

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
You are using a frameset doctype.

Only frame definitions are allowed in a document with a frameset doctype. The only place the body tag should appear is inside the <noframes> tag. As this is the section that would get displayed if the browser used could not support frames.

Code:
[b][COLOR=#000080]<!DOCTYPE[/color][/b] [COLOR=#009900]HTML[/color] [COLOR=#009900]PUBLIC[/color] [COLOR=#FF0000]"-//W3C//DTD HTML 4.01 Frameset//EN"[/color]
[tab][tab][tab][COLOR=#FF0000]"[URL unfurl="true"]http://www.w3.org/TR/html4/frameset.dtd"[/URL][/color][b][COLOR=#000080]>[/color][/b]
[tab][b][COLOR=#0000FF]<html>[/color][/b]
[tab] [b][COLOR=#0000FF]<head>[/color][/b]
[tab]  ...
[tab] [b][COLOR=#0000FF]</head>[/color][/b]
[tab] [b][COLOR=#0000FF]<frameset>[/color][/b]
[tab]  ...
[tab]  [b][COLOR=#0000FF]<noframes>[/color][/b]
[tab]   <body>
[tab][tab]...
[tab]   </body>
[tab]  [b][COLOR=#0000FF]<noframes>[/color][/b]
[tab] [b][COLOR=#0000FF]</frameset>[/color][/b]
[tab][b][COLOR=#0000FF]</html>[/color][/b]

An iframe should not be used with a frames doctype.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech
 
What doctype should I be using? If I use strict, the validation chokes on the iFrame tag.

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
I tried transitional, but it allows a lot of bad code. The site I'm working on (Link) isnt formatting well in IE8, so I wanted to clear all the code problems.

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
If you really need to use an iframe and support IE8 you have little choice. HTML 4.01 Transitional is basically all you have.

With that said, whether or not a Doctype allows certain things should not be a deterrent to using it. Just because it allows something doesn't mean you immediately have to use it.

Code for a Strict Doctype, and once everything validates you can add the iframe in and change the Doctype. If it validates in Strict it will validate in Transitional.

In any case if you are so concerned about code validity, why then are your element ID's completely invalid even for 4.01 Transitional?



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech
 
Hi

You are loading content into the [tt]iframe[/tt] using JavaScript. So navigation is broken anyway without JavaScript. Then why not remove the [tt]iframe[/tt] and load the content into a [tt]div[/tt] using AJAX ? The navigation will also be broken without JavaScript but at least you will not need to juggle with [tt]iframe[/tt] and its size, as mentioned in thread216-1692841.

Feherke.
[link feherke.github.com/][/url]
 
pahiker said:
I tried transitional, but it allows a lot of bad code.
Define "bad code"??

How you code is up to YOU not the DTD in use, and when all is said and done "validation" is basically just a spell check and does NOT mean that the document WILL behave as expected when rendered.


You could write HTML source that validated perfectly, but would still "mess up" when rendered.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Lots of replies, let me try to respond:

In any case if you are so concerned about code validity, why then are your element ID's completely invalid even for 4.01 Transitional?

I just ran a check on the index.html page, the only errors are because of -webkit and -moz, so I don't understand what you are referring to as bad element Id's?


Code for a Strict Doctype, and once everything validates you can add the iframe in and change the Doctype. If it validates in Strict it will validate in Transitional.

That is what I am trying to do, but it does not seem to allow iFrame within strict type.


You are loading content into the iframe using JavaScript. So navigation is broken anyway without JavaScript. Then why not remove the iframe and load the content into a div using AJAX ?
I'm moderately new to this, I have no idea what AJAX is. When searching for a way to load content into a section of a page the only examples/tutorials I could find were for iFrame.


Define "bad code"??

How you code is up to YOU not the DTD in use, and when all is said and done "validation" is basically just a spell check and does NOT mean that the document WILL behave as expected when rendered.

You could write HTML source that validated perfectly, but would still "mess up" when rendered.


Bad code - initially, syntactically incorrect, once syntax is fixed, code that does not behave as intended.

I understand code can be good and not work (in my real life I code for mainframes). What I have works in Safari, FF, Chrome, but not in IE8+ or Opera. Sadly, most of the target audience for this site use IE, so it must work as designed and intended there as well. Most of what is not working is the "appearance" of the site.

What it should look like (Chrome, FF, and Safari):
6853eec156804428358b469e77863e29.png


Opera:
c9cb83afa1d40fab801f9cd4bf6fec24.png


IE8:
b72386a8316492a02fcd8f4c92ba4e9f.png


Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
Hi

pahiker said:
In any case if you are so concerned about code validity, why then are your element ID's completely invalid even for 4.01 Transitional?

I just ran a check on the index.html page, the only errors are because of -webkit and -moz, so I don't understand what you are referring to as bad element Id's?
Your [tt]id[/tt]s are correct. I am afraid, Phil was mislead by the fact that Tek-Tips markup processor converted [tt]id="[ignore]link[/ignore]1"[/tt] into [tt]id="link1"[/tt].


Feherke.
[link feherke.github.com/][/url]
 
Thanks, that's one load off my mind. I've been looking through them trying to figure out what the problem was.

Any ideas about why the CSS styling isn't working?

Is there some place that lists IE compatibility issues, and work-arounds?

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
Hi

See CSS3, please!. It generates CSS3 code for each rendering engine. See whether it generates separate code with [tt]-o-[/tt] and [tt]-ms-[/tt] vendor prefixes for the CSS rules you used.

Feherke.
[link feherke.github.com/][/url]
 
Hi

Feherke said:
See CSS3, please!. It generates CSS3 code for each rendering engine. See whether it generates separate code with [tt]-o-[/tt] and [tt]-ms-[/tt] vendor prefixes for the CSS rules you used.
Grr ! Forget it. Too late.
CSS3Please said:
[tt]__Changelog__
2012.08.29: Removed IE6-8 support.[/tt]

Feherke.
[link feherke.github.com/][/url]
 
Thanks. Wonder why IE8 was dropped, from the usage stats I've seen it's still used more than IE9.

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
Sorry, I didn't realize the id's had been auto linkfied.

Any way, what I suggested was to code for Strict, ignoring the errors relating to the iframe. Once everything is done, and the validation is only complaining about the iframes. Then simply switch the Doctype of your page to Transitional, so iframes are allowed.
Yes validation will complain about them while using the Strict Doctype, but you already know that, so just ignore those while you code.

When all is done the Validation should then pass with a Transitional Doctype.


Also, if you are concerned about validity, you should not be using tables to code your site. Embrace Divs and other more semantic elements.

Tables are for tabular data, not layout.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech
 
Actually, I wanted to use div's instead of table, but I had a hard time getting the iFrame to behave inside a div. I figured I would get this working for the customer, then go back and figure out the div problem. Right now, it's getting the CSS to behave in IE (and, apparently, Opera) that's more of the problem.

Let all bear in mind that a society is judged not so much by the standards attained by its more affluent and privileged members as by the quality of life which it is able to assure for its weakest members.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top