Weborum Webmaster Forum > Help with validation
Help - Search - Members - Calendar
Full Version: Help with validation
Weborum Webmaster Forum > Web Page Design > HTML
MIS Nole
May 4 2005, 11:20 PM
I'm trying to get this page validated, it's not the best looking but let's not worry about that... biggrin.gif

http://seminolestats.com/webmaster/ASP/home.asp

I'm getting alot of errors, but most of these are from the "flash" movie embedded, not worried about those so much.

I would like to get the first 3 errors taken care of if possible though:
QUOTE
#

Line 75, column 139: character ";" not allowed in attribute specification list

...5246B'" onmouseover="OverMouse(this)"; onmouseout="OutMouse(this)" />

✉
#

Line 75, column 140: end tag for "input" omitted, but OMITTAG NO was specified

...246B'" onmouseover="OverMouse(this)"; onmouseout="OutMouse(this)" />

You may have neglected to close a tag, or perhaps you meant to "self-close" a tag; that is, ending it with "/>" instead of ">".

✉
#

Line 75, column 0: start tag was here

<input type="submit" class="buttonS" name="Submit" value="Go" style="color:white


Thanks in advance...
coothead
May 5 2005, 08:37 AM
Hi there MIS Nole,

here is your code validated....

CODE

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tombstone</title>
<link href="stylesheet.css" rel="stylesheet" />

<script type="text/javascript">
<!--
function OverMouse(button) {
 button.style.backgroundColor="#25246B"
 button.style.color='white'
 button.style.cursor='hand'
}
function OutMouse(button) {
 button.style.backgroundColor="#25246B"
 button.style.color='white'
}
//-->
</script>

</head>
<body>

<script type="text/javascript">
<!--
window.defaultStatus = "I'm Your Huckleberry";
//-->
</script>

<div style="position:absolute; top:0px; left:0px; width:780px; color:white; padding:5px">

<img src="banner.jpg" width="770" height="80" alt="Tombstone Records, Inc." title="Tombstone Records, Inc"/>

</div>

<div style="position:absolute; top:90px; left:10px; width:175px">
<a href="home.asp"><img src="Home.jpg" alt="Home" width="104" height="29" title="Home" border="0" /></a>
<br />
<br />
<a href="shopcart.asp">
<img src="Shopcart.jpg" alt="Shopping Cart" width="105" height="33" title="Shopping Cart" border="0" />
</a>
<br />
<br />
<br />
<img src="Product.jpg" alt="Products" width="100" height="20" title="Products" />
<br />
<table>

 <tr style="color:'#25246B'; line-height:14pt; font-size:14pt"
   onmouseover="this.style.backgroundColor='#25246B';this.style.color='white';this.style.cursor='hand'"
   onmouseout="this.style.backgroundColor='white';this.style.color='#25246B'"
   onclick="location.href='search.asp?Category=Games'">
   <td>Games</td>
 </tr>
 
 <tr style="color:'#25246B'; line-height:14pt; font-size:14pt"
   onmouseover="this.style.backgroundColor='#25246B';this.style.color='white';this.style.cursor='hand'"
   onmouseout="this.style.backgroundColor='white';this.style.color='#25246B'"
   onclick="location.href='search.asp?Category=Movies'">
   <td>Movies</td>
 </tr>
 
 <tr style="color:'#25246B'; line-height:14pt; font-size:14pt"
   onmouseover="this.style.backgroundColor='#25246B';this.style.color='white';this.style.cursor='hand'"
   onmouseout="this.style.backgroundColor='white';this.style.color='#25246B'"
   onclick="location.href='search.asp?Category=Music' ">
   <td>Music</td>
 </tr>
 
</table>

<form action="search.asp" method="get">
<img src="Search.jpg" alt="Search" width="120" height="30" title="Search" /><br />
<input type="text" name="Criterion" class="textbox" size="12" value="" />
<input type="submit" class="buttonS" name="Submit" value="Go"
style="color:white; background-color:'#25246B'"
onmouseover="OverMouse(this)" onmouseout="OutMouse(this)" />
</form>

</div>

<div style="position:absolute; top:90px; left:200px; width:570px">

<object type="application/x-shockwave-flash" data="3morph.swf" width="550" height="400">
<param name="movie" value="3morph.swf" />
<param name="quality" value="high"/>
</object>

<br />
</div>

</body>
</html>


There were only two errors
  • Line - 75 semi-colon removed here...
    <input type="submit" class="buttonS" name="Submit" value="Go"
    style="color:white; background-color:'#25246B'"
    onmouseover="OverMouse(this)"; onmouseout="OutMouse(this)" />
  • Line - 85 embed replace with the Satay Method...
    <object type="application/x-shockwave-flash" data="3morph.swf" width="550" height="400">
    <param name="movie" value="3morph.swf" />
    <param name="quality" value="high"/>
    </object>

Now all that you have to do is remove all those <br /> tags
and start using margin for spacing. biggrin.gif

A quick look at your CSS only revealed two validating problems...
  • mediumblue will not validate you will need to use #0000cd
  • generic font-family is required, which basically means adding
    serif or sans-serif in the appropriate places.
MIS Nole
May 5 2005, 05:26 PM
Thanks coothead. I have just found out that I need to change it to XHTML 1.1 and that added a few new errors. Hopefully you (or anyone) could help out with this, it has me baffled.

http://seminolestats.com/webmaster/ASP/home.asp

QUOTE
Line 36, column 94: there is no attribute "border"

document type does not allow element "input" here; missing one of "ins", "del", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "address", "fieldset" start-tag

document type does not allow element "input" here; missing one of "ins", "del", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "address", "fieldset" start-tag

end tag for "form" which is not finished


What has replaced the "border" attribute? I liked it because my image otherwise has a nasty border around it.

And what do you mean by getting rid of the <br /> tags and replacing with margin? Never heard of that.

And thanks for the css tips, I fixed that after your recommendations.

Thanks
Joe
May 5 2005, 05:58 PM
The border attribute for images is no longer used in favour of CSS;

CODE
img {
border: 0px;
}


What coothead means, is instead of using br to create some space between elements you use the margin attribute instead.

<something style="margin-bottom: 10px;"> gives a space at the bottom of the element 10 pixels.
MIS Nole
May 5 2005, 06:30 PM
Thanks joe. Would you mind helping with the "form" problems? I don't understand why it's saying that document type does not allow element "input" here.

My form looks like this:
CODE
<form action="search.asp" method="get">
<input type="text" name="Criterion" class="textbox" size="12" value="<%=Request.QueryString("Criterion")%>" />
<input type="submit" class="buttonS" name="Submit" value="Go" style="color:#FFFFFF; background-color:#25246B" onmouseover="OverMouse(this)" onmouseout="OutMouse(this)" />
</form>


It also tells me end tag for "form" which is not finished?
Joe
May 5 2005, 06:49 PM
I was looking at that to find a solution ... looking at it again the only problem I can see is your missing a submit button ...
MIS Nole
May 5 2005, 07:13 PM
Missing a button? Not sure what you mean by that, here is the code for the button:
CODE
<input type="submit" class="buttonS" name="Submit" value="Go" style="color:'#FFFFFF'; background-color:'#25246B'" onmouseover="OverMouse(this)" onmouseout="OutMouse(this)" />


Joe
May 5 2005, 07:14 PM
blush.gif Just goes to show how good my observation is ...
Joe
May 5 2005, 07:16 PM
Ok, back to the basic way of error checking here. Comment out that small form section of code and validate your code, see if you still get an error.
MIS Nole
May 5 2005, 07:16 PM
timo.gif
MIS Nole
May 5 2005, 09:18 PM
I added a <fieldset> and that cleared it up.

CODE
<form action="search.asp" method="get">
<fieldset>
<input type="text" name="Criterion" class="textbox" size="12" value="<%=Request.QueryString("Criterion")%>" />
<input type="submit" class="buttonS" name="Submit" value="Go" style="color:'#FFFFFF'; background-color:'#25246B'" onmouseover="overmouse(this)" onmouseout="outmouse(this)" />
</fieldset>
</form>
Joe
May 6 2005, 07:33 AM
http://www.topxml.com/xhtml/xhtml_tag_fieldset.asp

That's a strange tag to be missing ... I've never used it before and managed to pass forms through the validator no problems.
coothead
May 6 2005, 08:22 AM
Hi there Joe,

when validating xhtml a block container is required for the form elements.
You can use fieldset or div for this.
The fieldset element will automatically have a border, which may be removed with css.
Also the fieldset is a form element whereas the div is not,
MIS Nole
May 6 2005, 02:21 PM
coothead,
How would you remove the border of a fieldset with css?

And can I get a little more on this statement:
QUOTE
What coothead means, is instead of using br to create some space between elements you use the margin attribute instead.

<something style="margin-bottom: 10px;"> gives a space at the bottom of the element 10 pixels.


I assume you control this with CSS?

coothead
May 6 2005, 05:15 PM
Hi there MIS Nole,

this little example may help...

CODE

<style type="text/css">
<!--
#div1 {
    width:324px;
    height:200px;
    background-color:#f00;
    margin-bottom:10px;
}
#div2 {
    width:324px;
    height:200px;
    background-color:#00f;
    margin-left:324px;
    margin-bottom:10px;
}
#field {
    background-color:#ccc;
    border:none;
    margin-left:648px;
}
//-->
</style>





<div id="div1"></div>
<div id="div2"></div>

<form action="#">
<fieldset id="field">
<input type="text"/>
</fieldset>
</form>


...you may also find that w3schools - margins can help your erudition. biggrin.gif
MIS Nole
May 6 2005, 05:19 PM
Thanks chief!
user posted image
coothead
May 6 2005, 05:24 PM
Hi there MIS Nole,

Sorry but my last reply had to be edited. blink.gif

My typing is having an off day. blush.gif
Joe
May 6 2005, 10:25 PM
Ahh that explains it then, I always put my forms inside of a div. Actually I put most things inside div's ... helps to control each individual element when positioning smile.gif
coothead
May 7 2005, 06:47 AM
Hi there Joe,

the fieldset element does have one feature that the div lacks - the legend element.
Just in case you were unaware of this, here is a little example...

[codebox]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fieldset with legend</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
fieldset {
width:204px;
padding:10px;
border:3px double #999;
margin:30px auto;
}
#inputs1 {
width:204px;
margin-top:10px;
}
#inputs2 {
width:144px;
margin-top:5px;
text-align:center;
}
input,legend,label {
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px;
color:#999;
}
legend {
font-style:oblique;
padding:5px;
}
.text {
width:140px;
border:1px solid #999;
}
.butts {
width:66px;
border:1px solid #999;
background-color:#fff;
}

/*//]]>*/
</style>

</head>
<body>

<form action="#">

<fieldset>
<legend>your details</legend>

<div id="inputs1">
<input class="text" type="text"/><label> : name</label>
<input class="text" type="text"/><label> : age </label>
<input class="text" type="text"/><label> : gender</label>
</div>

<div id="inputs2">
<input class="butts" type="submit" value="submit"/>
<input class="butts" type="reset"/>
</div>

</fieldset>

</form>

</body>
</html>


[/codebox]
Joe
May 7 2005, 12:25 PM
Ahh cool;

http://www.w3.org/TR/REC-html40/interact/f...tml#edef-LEGEND

QUOTE
The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.


Did not know that biggrin.gif
coothead
May 7 2005, 12:38 PM
Hi there Joe,

I forgot to mention that fieldset does not have to be used within the
form but may be used, with the legend, in the same manner as the div.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.