W3 Validator Issues

Get Started
1

Hi all. Brand new to website design and I’ having issues resolving some W3 validation messages. I was hoping someone here could help.

First… Here is the code in question:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>
<meta http-equiv=“content-type” content=“text/html; charset=utf-8”>

<img src=“gun.jpg” alt=“Great guns at great prices!” style=“margin: auto;” >

<title> Rick’s Guns and Ammo</title>
<link rel=“stylesheet” href=“rga.css” type=“text/css” >

<style type=“text/css”>

</style>
</head>

The error I get with the highlighted text says: “document type does not allow element “IMG” here”.

If I do anything to change that image (short of deleting it altogether), I lose all of my graphics including my background!

Can anyone tell me how to fix this??

Thanks

Rick

2

[FONT=Verdana]Hi Rick, and welcome to the forums. :slight_smile:

The image shouldn’t be inside the <head></head> section of your page. The only stuff that should be in there is meta data, links, scripts etc. that are not directly visible.

The image needs to come after the opening <body> tag.

If you need more help sorting things out, just ask. :)[/FONT]

3

Yep—nothing in <head> should actually show up on the page. <body> is for page content.

4

Techno - Thanks so much!! I have been staring at this all day and couldn’t figure it out. I really appreciate the help.

I have one more question to post when I get home tonight. I created a CSS document to formatting. I created a <ht> group to format the header text (ht). However, the W3 validator is returning a "element <ht> undefined error. It suggests I use CSS to fix the error. I did!

Grrrr… I’ll post the exact details shortly. Thanks again!!!

5

Spritanuium - Lesson definitely learned there!! :wink:

6

Ok… Here’s the code from the HTML file:

<ht>At Rick’s Guns and Ammo we offer the best quality and cheapest prices on new and Curio and Relic firearms as

well as a full line of ammo for all your weapons.</ht>

Here’s the error from the W3 validator:

Line 34, Column 4: element “HT” undefined

<ht>At Rick’s Guns and Ammo we offer the best quality and cheapest prices on ne…

:email:

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "&lt;frameset&gt;" element),
by using vendor proprietary extensions such as "&lt;spacer&gt;" or "&lt;marquee&gt;" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).

Here’s what I have in my CSS file:

ht {
font-family: Times New Roman;
font-size: 18pt;
margin-left: 15px;
margin-right: 15px;
color: #000000;
text-align: center;
}

The DTD has to be strict if that helps.

Any ideas??

Rick

7

[FONT=Verdana]<ht> (as the validator is trying to tell you :)) doesn’t exist. For a heading you need to use <h1> or <h2> or whatever, down as far as <h6>, depending on the importance of the heading. You normally have one <h1> per page, for your main heading, then work down.

You might find the SitePoint HTML Reference helpful as a general guide.[/FONT]

8

Ahhhhh… I was under the impression I could create whatever <name> I wanted as long as it correlated to the same name in the CSS file.

So it has to be a pre-defined name or it won’t work, eh? hmmmm…

Ok then. Thanks for the info!

Rick

9

[FONT=Verdana]Yes, you need to use pre-defined element tags to structure your text. You can then add ids or classes in order to style it, and there you can use whatever name you like, provided it correlates with the CSS. I think that’s maybe what’s confused you.

If you’re interested in some on-line tutorials to improve your skills, these are good for beginners:
http://www.htmldog.com/guides/
http://www.iraqtimeline.com/maxdesign/basicdesign/.

And, of course, come back here with any further questions you have. :)[/FONT]

10

Ahhhh… Now that makes sense. I’ll give those tutorials a shot!!

Thanks so much for your help!!

Rick

11

Speaking of any further questions…

I am not able to center a table using CSS. Here is what I have in my CSS file:

table {
border: solid 1px;
height: 100px;
width: 380px;
font-size: 18px;
text-align: center;
}

It will align the text itself inside the table, but it will not align the table itself to the center of the page. The only way I have been able to do that is to put the “align” code in the HTML file itself. That works, but it gives me an error in the W3 validator. (DTD strict)

Once again I’m stuck.

I also can’t figure out how to put a graphic on either side of the header. I figured out how to use the “float” command to place the graphic on the left side of the header, but how do I get a different graphic on the right side as well?? Here’s the code I have in my CSS file for the one that does work:

.image {
width: 150px;
float:left;
margin-left: 80px;
border-style: solid;
border-color: black
}

Thanks in advance for the help!!

Rick

12

That’s right - text-align just aligns the contents of the div, table or whatever. To centre it in the page, you need to set a width on the item (which you’ve already done) and set margin: auto, which will automatically centre it for you. So

table {
    border: solid 1px;
    height: 100px;
    width: 380px;
    font-size: 18px;
    text-align: center;
    margin: auto;
}

Have you tried doing something similar using float: right? If you can’t get that to work, please post your HTML for the header as well as the CSS.

13

As we used to say in the military, FM baby! It worked. Both issues fixed.

This stuff is easy when you know what you’re doing eh?

The good thing is… Lessons learned this hard are usually never forgotten.

Thanks again for the help!

14

Great - glad we can help. :slight_smile:

15

This is amazingly frustrating. Once again I have been trying all morning to get an image to center on my page, and I just can’t figure it out.

Here’s the HTML code that’s in the <body> section of the page:

<p><img class=“imagecr” src=“crifle_c.jpg” alt=“Curio and Relic Rifles” ></p>

Here’s the CSS code that I’m told will center the image:

.imagecr {
width: 450px;
border-style: solid;
border-color: black
display:block;
margin:0 auto;
text-align:center;
}

The image shows up, but it’s aligned to the left border of the page.

I have a list of bulleted items that I wanted to center horizontally across the page, but when I got THAT to work, it lost all of the graphics I used to replace the bullets.

None of this works like the instructions say it should. I used this page http://forum.hostpapasupport.com/index.php?topic=258.0 as the reference to center the image.

What the heck am I doing wrong???

16

Looks like a missing semicolon ( ; ) for: border-color: black; so once it is valid it should work.

17

OMG… I hate my life some days.

Thanks.

18

Don’t worry about it and the CSS Validator would have spotted that one. :slight_smile:

19

Me again.

Trying to get an order form to validate, and send me an e-mail AFTER if validates all of the form field inputs.

Right now when you hit submit, the e-mail window pops up and it loads the email. I see it’s capturing all of the fields in the e-mail… SO I know it sees them all correctly… It just won’t validate them.

I have it working on a different page and a different site, but it will not validate any of the form fields on this page! Very aggravating.

The only difference between the 2 pages (sites) is this site uses <div class=“sections”> commands to align the 3 separate areas horizontally on the screen.

The other site/page just has <fieldset> code to separate the sections vertically down the page.

Beyond that, everything else is the same. I’ve been staring at this for 5 hours now. If someone could it a look and provide some help, I would be most grateful.

Not sure what the best way to do this is so, here’s the code!

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

<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>

<head>

<meta http-equiv=“content-type” content=“text/html; charset=utf-8”/>
<title>Kudler Ecommerce Sampler</title>
<meta name=“keywords” content="kudler fine foods, kudler,bakery , pastry, fresh produce, organic, fresh meat, fresh

seafood, condiments, packaged foods, cheese, specialty dairy products" >
<meta name=“description” content=“Kudler Fine Foods” >

<link rel=“stylesheet” type=“text/css” href=“base.css” />

<style type=“text/css”>
hr {height:2px}
</style>

<script type=“text/javascript”>
function validateForm()
{
var x=document.forms[“order”][“lastname”].value;
if (x==null || x==“”)
{
alert(“Last name must be filled out”);
return false;
}
var x=document.forms[“order”][“firstname”].value;
if (x==null || x==“”)
{
alert(“First name must be filled out”);
return false;
}
var x=document.forms[“order”][“address”].value;
if (x==null || x==“”)
{
alert(“Street address must be filled out”);
return false;
}
var x=document.forms[“order”][“city”].value;
if (x==null || x==“”)
{
alert(“City name must be filled out”);
return false;
}
var x=document.forms[“order”][“zip”].value;
if (x==null || x==“”)
{
alert(“Zip code must be filled out”);
return false;
}
var x=document.forms[“order”][“email”].value;
var atpos=x.indexOf(“@”);
var dotpos=x.lastIndexOf(“.”);
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert(“Not a valid e-mail address”);
return false;
}
}
var x=document.forms[“order”][“cardnum”].value;
if (x==null || x==“”)
{
alert(“Credit card number must be filled out”);
return false;
}
var x=document.forms[“order”][“securitycode”].value;
if (x==null || x==“”)
{
alert(“Security must be filled out”);
return false;
}
var x=document.forms[“order”][“bzip”].value;
if (x==null || x==“”)
{
alert(“Billing zip code must be filled out”);
return false;
}
}
</script>

</head>
<body>

<div id=“container” style=“width:1200px”>
<p><img class=“topbanner” src=“kudlerbanner.jpg” alt=“Kudler Fine Foods!” /></p>

 &lt;h2&gt;
  HOME&nbsp;&nbsp;|&nbsp;&nbsp;
  BAKERY&nbsp;&nbsp;|&nbsp;&nbsp;
  MEAT &amp; SEAFOOD&nbsp;&nbsp;|&nbsp;&nbsp;
  PRODUCE&nbsp;&nbsp;|&nbsp;&nbsp;
  CHEESE &amp; DAIRY&nbsp;&nbsp;|&nbsp;&nbsp;
  WINE&nbsp;&nbsp;|&nbsp;&nbsp;
  &lt;a href="index.html"&gt;ORDERING&lt;/a&gt;
  &lt;/h2&gt;

<h1>Kudler E-commerce Order Page</h1>
</div>

<div class=“pagecontent”>
<h3>Ordering products from Kudler Fine Foods is a 3-step process:<br />
1. Fill out the form below with your shipping information.<br />
2. Select your product from the drop-down menu.<br />
3. Select your payment method.<br />
</h3>
<hr />
</div>

<div class=“sections”>
<div id=“shipping” style=“height:650px;width:350px;float:left;”>
<p><big>Step 1.</big></p>

<div id=“text_form”>
<form name=“order” action="mailto:kudlerordersummary@gmail.com" onsubmit=“return validateForm()” method=“post”>

  &lt;p class="legend"&gt;Shipping Information&lt;/p&gt;
  &lt;fieldset id="shipping"&gt;

<p><img class=“truck” src=“truck.jpg” alt=“Shipping Information!!” /></p>
<p class<label>Last Name: </label><input name=“lastname” type=“text” size=“30” /><br /><br />
<label>First Name: </label><input name=“firstname” type=“text” size=“30” /><br /><br />
<label>Street Address: </label><input name=“address” type=“text” size=“30” /><br /><br />
<label>City: </label><input name=“city” type=“text” size=“30” /><br />
<p id=“state”><label>State: </label><select name=“state”>
<option value=“Select State”>Select State</option>
<option value=“Alabama”>Alabama</option>
<option value=“Alaska”>Alaska</option>
<option value=“Arizona”>Arizona</option>
<option value=“Arkansas”>Arkansas</option>
<option value=“California”>California</option>
<option value=“Colorado”>Colorado</option>
<option value=“Connecticut”>Connecticut</option>
<option value=“Delaware”>Delawar</option>
<option value=“Florida”>Florida</option>
<option value=“Georgia”>Georgia</option>
<option value=“Hawaii”>Hawaii</option>
<option value=“Idaho”>Idaho</option>
<option value=“Illinois”>Illinois</option>
<option value=“Indiana”>Indiana</option>
<option value=“Iowa”>Iowa</option>
<option value=“Kansas”>Kansas</option>
<option value=“Kentucky”>Kentucky</option>
<option value=“Louisiana”>Louisiana</option>
<option value=“Maine”>Maine</option>
<option value=“Maryland”>Maryland</option>
<option value=“Massachusetts”>Massachusetts</option>
<option value=“Michigan”>Michigan</option>
<option value=“Minnesota”>Minnesota</option>
<option value=“Mississippi”>Mississippi</option>
<option value=“Missouri”>Missouri</option>
<option value=“Montana”>Montana</option>
<option value=“Nebraska”>Nebraska</option>
<option value=“Nevada”>Nevada</option>
<option value=“New Hampshire”>New Hampshire</option>
<option value=“New Jersey”>New Jersey</option>
<option value=“New Mexico”>New Mexico</option>
<option value=“New York”>New York</option>
<option value=“North Carolina”>North Carolina</option>
<option value=“North Dakota”>North Dakotaa</option>
<option value=“Ohio”>Ohio</option>
<option value=“Oklahoma”>Oklahoma</option>
<option value=“Oregon”>Oregon</option>
<option value=“Pennsylvania”>Pennsylvania</option>
<option value=“Rhode Island”>Rhode Island</option>
<option value=“South Carolina”>South Carolina</option>
<option value=“South Dakota”>South Dakota</option>
<option value=“Tennessee”>Tennessee</option>
<option value=“Texas”>Texas</option>
<option value=“Utah”>Utah</option>
<option value=“Vermont”>Vermont</option>
<option value=“Virginia”>Virginia</option>
<option value=“Washington”>Washington</option>
<option value=“West Virginia”>West Virginia</option>
<option value=“Wisconsin”>Wisconsin</option>
<option value=“Wyoming”>Wyoming</option>
</select></p>
<label>ZIP: </label><input name=“zip” type=“text” size=“10” /><br /><br />
<label>E-mail Address: </label><input name=“email” type=“text” size=“40” />
</fieldset>

&lt;/div&gt;

</div>

<div class=“sections”>
<div id=“selections” style=“height:650px;width:350px;float:left;”>
<p><big>Step 2.</big></p>

  &lt;p class="legend"&gt;Your Selections&lt;/p&gt;
  &lt;fieldset id="selections"&gt;

<p><img class=“wine” src=“wine.png” alt=“Select Your Items!!” /></p>
<p id=“bakery”><select name=“Bakery”>
<option value=“Bakery”>Bakery Selection</option>
<option value=“Sour Dough Rolls”>Sour Dough Rolls</option>
<option value=“Bread”>Bread</option>
<option value=“Chocolate Cake”>Chocolate Cake</option>
<option value=“Assorted Dozen Doughnuts”>Assorted Dozen Doughnuts</option>
<option value=“Cupcakes”>Cupcakes</option>
</select>  
Qty: <select name=“qty”>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>15</option>
<option>20</option>
<option>99</option>
</select>
</p>
<p id=“meatandseafood”><select name=“Meat and Seafood”>
<option value=“Meat and Seafood”>Meat and Seafood Selection</option>
<option value=“Filet Mignon”>Filet Mignon</option>
<option value=“New York Strip”>New York Strip</option>
<option value=“Chilean Sea Bass”>Chilean Sea Bass</option>
<option value=“Copper River Salmon”>Copper River Salmon</option>
<option value=“Halibut”>Halibut</option>
</select>  
Qty: <select name=“qty”>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>15</option>
<option>20</option>
<option>99</option>
</select>
</p>
<p id=“Produce”><select name=“Produce”>
<option value=“Produce”>Produce Selection</option>
<option value=“Asparagus”>Asparagus</option>
<option value=“Broccoli”>Broccoli</option>
<option value=“Pineapple”>Pineapple</option>
<option value=“Apples - Red Delicious”>Apples - Red Delicious</option>
<option value=“Serrano Peppers”>Serrano Peppers</option>
</select>  
Qty: <select name=“qty”>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>15</option>
<option>20</option>
<option>99</option>
</select>
</p>
<p id=“cheeseanddairy”><select name=“Cheese and Dairy”>
<option value=“Cheese & Dairy”>Cheese and Dairy Selection</option>
<option value=“Cheddar - Extra Sharp Bandon”>Cheddar - Extra Sharp Bandon</option>
<option value=“Cheddar - Sharp Tillamook”>Cheddar - Sharp Tillamook</option>
<option value=“Milk - 2 Percent”>Milk - 2 Percent</option>
<option value=“Milk - Non-Fat”>Milk - Non-Fat</option>
<option value=“Yogurt - Oregon Strawberry”>Yogurt - Oregon Strawberry</option>
</select>  
Qty: <select name=“qty”>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>15</option>
<option>20</option>
<option>99</option>
</select>
</p>
<p id=“Wine”><select name=“Wine”>
<option value=“Wine”>Wine Selection</option>
<option value=“Chardonnay - Dry”>Chardonnay - Dry</option>
<option value=“Pinot Noir”>Pinot Noir</option>
<option value=“Cabernet Sauvignon”>Cabernet Sauvignon</option>
<option value=“Merlot - Very Dry”>Merlot - Very Dry</option>
<option value=“White Reisling”>White Reisling</option>
</select>  
Qty: <select name=“qty”>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>15</option>
<option>20</option>
<option>99</option>
</select>
</p>

&lt;label&gt;Your Order Total:&lt;/label&gt;&lt;input name="ordertotal" type="text" size="8" /&gt;&lt;br /&gt;&lt;br /&gt;

</fieldset>

&lt;/div&gt;

</div>

<div class=“sections”>
<div id=“paymenttype” style=“height:650px;width:350px;float:left;”>
<p><big>Step 3.</big></p>

  &lt;p class="legend"&gt;Payment Method&lt;/p&gt;	
  &lt;fieldset id="payment"&gt;

<p><img class=“cards” src=“cards.gif” alt=“Credit Cards Accepted!!” /></p>
<p id=“cardtype”><label>*Card Type:</label><select name=“cardtype”>
<option value=“Visa”>Visa</option>
<option value=“Master Card”>Master Card</option>
<option value=“Discover”>Discover</option>
<option value=“American Express”>American Express</option>
</select></p>
<label>*Card Number:</label><input name=“cardnum” type=“text” size=“20” ><br ><br >
<label>*Security Code:</label><input name=“securitycode” type=“text” size=“6” ><br ><br >
<label>*Billing ZIP Code:</label><input name=“bzip” type=“text” size=“10” ><br ><br>
<label>Your Order Total With Tax and Shipping:</label><input name=“ordertotal” type=“text” size=“10” ><br ><br >
<p>
<input name=“Submit” type=“submit” value=“Submit” >
<input name=“Reset” type=“reset” value=“Reset” >
</p>

  &lt;/form&gt;