Hi,

I have this code working perfectly fine with the cool subwai stuff on the left side and the Reset All button below it. And the menu summary box towards the right handside of the cool subwai stuff. And the pictures come on almost the center of the page.

But when I do the validations on W3C. It shows me errors as below

Error  Line 1, Column 1: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>" 
Line 4, Column 73: end tag for element "META" which is not open
Line 5, Column 64: end tag for element "LINK" which is not open
Line 7, Column 7: end tag for "HEAD" which is not finished

I tried placing the heading as below

<?xml version="1.0" encoding="UTF-8"?>
<!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"> 

But then website goes for a toss.. the box that contains the menu summary data shifts on the left right on the Reset All button. The pictures are also displayed right on top of the Reset Button. Could you please tell me how I can fix this.

Below is my html code

<html>
    <head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"></meta>
<link href="styles.css" rel="stylesheet" type="text/css"></link>
<script charset="utf-8" src="external.js" type="text/javascript"></script>
</head>
    <body>




    <div>
        <p>Cool Subwai presents a number of offers to feast your stomach</p>
        <p>Click on the items that you would like to have!!!</p>
        <ul>     
            <li onmouseover="showImg(this,'meatball.jpg')" onmouseout="hideImg()" id="meatball" onclick="select(this)"> Meatball Marinara</li>
            <li onmouseover="showImg(this,'bmt.jpg')" onmouseout="hideImg()" id="bmt" onclick="select(this)"> B.M.T </li>
            <li onmouseover="showImg(this,'melt.jpg')" onmouseout="hideImg()" id="melt" onclick="select(this)">Subwai Melt</li>
            <li onmouseover="showImg(this,'tuna.jpg')" onmouseout="hideImg()" id="tuna" onclick="select(this)">Tuna</li>

        </ul>
        </div>


<div id="menuSummary">
<center>Classic Subwais <br>  Orders  </center>
<div id ="meatballselect"></div>------------------------------- Meatball Quantity Ordered <span id = "meatballcount">0</span>
<div id ="bmtselect"></div>------------------------------- BMT Quantity Ordered <span id = "bmtcount">0</span>
<div id ="meltselect"></div>------------------------------- Melt Quantity Ordered <span id = "meltcount">0</span>
<div id ="tunaselect"></div>------------------------------- Tuna Quantity Ordered <span id = "tunacount">0</span>

</div>


<form name="f1" action="">
<input type="button" onclick="resetPage()" value="Reset All" align="middle">
</form>

</body>
</html>

Below is my javascript code
function select(obj){

    id = obj.getAttribute("id");
    if( id==""){}
    else    if (id =="meatball")
        {myselect = document.getElementById("meatballselect");
        mycount = document.getElementById("meatballcount");
        }
    else    if (id =="bmt")
        {myselect = document.getElementById("bmtselect");
        mycount = document.getElementById("bmtcount");
        }
    else    if (id =="melt")
        {myselect = document.getElementById("meltselect");
        mycount = document.getElementById("meltcount");
        }
    else    if (id =="tuna")
        {myselect = document.getElementById("tunaselect");
        mycount = document.getElementById("tunacount");
        }
    newchild = obj.cloneNode(true); 
    tn=newchild.firstChild;
    txt = tn.nodeValue.substr(0,22);
    tn.data=txt;
    newchild.appendChild(tn);
    obj.setAttribute("class", "selected");
    newchild.setAttribute("class", "ordered");
    myselect.appendChild(newchild);
    count = myselect.childNodes.length
    ctnode = document.createTextNode(count);
    mycount.removeChild(mycount.childNodes[0]);
    mycount.appendChild(ctnode);

}

function resetPage(){

    var counts=new Array("meatballcount","tunacount","bmtcount","meltcount");
    var selects=new Array("meatballselect","tunaselect","bmtselect","meltselect");
    var arraylen=counts.length;
    for(i=0; i<arraylen; i++){
    var count = 0;
    var ctnode = document.createTextNode(count);

    mycount = document.getElementById(counts[i]);

    while ( mycount.firstChild ) mycount.removeChild( mycount.firstChild );
    mycount.appendChild(ctnode);
    myselect = document.getElementById(selects[i]);

    while ( myselect.firstChild ) myselect.removeChild( myselect.firstChild );

    }
}

var offsetx = 200
var offsety = 10
var elementID="myImg"

function showImg(obj,image){

if(document.createElement){

if(!document.getElementById(elementID)){
newImg = document.createElement('IMG')
newImg.id = elementID
newImg.style.display="none"
newImg.style.position="absolute"
document.body.appendChild(newImg)
}

imageDisplay = document.getElementById(elementID)
imageDisplay.src = image
imageDisplay.style.display = 'block'

imageDisplay.style.left=obj.offsetLeft+offsetx
imageDisplay.style.top=obj.offsetTop+offsety

if(imageDisplay.offsetLeft<0){
imageDisplay.style.left=0
}

if(imageDisplay.offsetLeft+imageDisplay.offsetWidth>document.body.clientWidth){
imageDisplay.style.left=document.body.clientWidth - imageDisplay.offsetWidth-50
}

}
}

function hideImg(){
imageDisplay.style.display="none"
}
Below is my css stylesheet code
#myImg {
width:169px;
height:225px;
border:1px solid #5555aa;
}


#menuSummary{
    position:fixed;
    right: 20;
    top:20;
    opacity:0.6;
    border-width: thin; 
    border-style: solid; 
    padding: 10px; 
    background-color: #eeeeff; 
    width: 430px;}

.selected { color:green;}
.ordered {color: blue; font-size: 12pt;}
.reset {color:black;}

Thanks,
Raqeeb

You have the same problem that was already described to you in your other identical post. LINK and META do not have closing tags.

The correct form is:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link href="styles.css" rel="stylesheet" type="text/css"/>

And if you're changing the doctype, that could change how your page is displayed.

you went from no doctype, to xhtml
no doctype = html 2, no support for anything, lucky if it works
xhtml, support for everything, very strict declarations and positioning required
noted several times in several dozens of threads for heaps of questions xhtml requires all elements to be closed, either as <element></element> or <element /> for singletons
as well as just shoving 'something' in the noted errors it may be a reasonable thing to read up on what effect adding the 'something' may have.
As well as the w3c validators use W3Schools the companion instruction site,
topics matchup very well with the error messages generated by the validators, and you will save yourself the same set of hassles with further developments

-aside- Congrats,
try question learn succeed repeat
is much cooler than [whine]"I dunno what to do somebody else do it for me".[/whine]

when posting code wrap it in

[code]

[/code] or [code=css] [/code] or [code=php] [/code] or [code=javascript] [/code] etc tags, gives the highlight to keywords and structures, and makes it easier for those reviewing, and on occassion has been known to jump out the screen and scream at the OP look at me, Im misspelled, making the fix very apparent <--attempt humor, lame, had to shoot it

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.