mark

<html>
<style type="text/css">
<!--
.backStyle {
        position:absolute;
        width:269px;
        height:250px;
        left:0px;
        top:0px;
        z-index:0;
        visibility: visible;
}

.textStyle {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
        position:absolute;
        z-index:1;
        left: 67px;
        top: 68px;
}

.inputStyle{
        position:absolute;
        z-index:2;
        left: 67px;
        top: 87px;
        visibility: visible;
}

.outputStyle{
	position:absolute;
	z-index:1;
	width: 200px;
	Height: 45px;
	left: 25px;
	top: 55px;
}

-->
</style>

<script language="javascript">
var xmlhttp=false;

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {

	try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      xmlhttp = false;
    }

}

function loadDoc(docname) {

	if (xmlhttp) {
	
	xmlhttp.open("GET", docname,true);
	 xmlhttp.onreadystatechange=function() {
	  if (xmlhttp.readyState==4) {
	   document.all.OutputLayer.innerHTML=xmlhttp.responseXml;
	  }
	 }
	 xmlhttp.send(null)

	 }

}

</script>

<body>
<div id="BackgroundLayer" class="backStyle">
  <center>
        <img src="./default.png" width="269" height="250">
  </center>
        <div id="TextLayer" class="textStyle">
                <div align="center"> Search for Recipes:</div>
        </div>
</div>

<div id="InputLayer" class="inputStyle">
  <center>
	<form action="test.php" method="get" name="recipeType">
	 <select name="type" id="recipeName" onChange="loadDoc('test.php')" size="1" border="0">
	  <option value="null" selected> </option>
	  <option value="appetizer" name="appetizer">Appetizers</option>
	  <option value="lunch" name="lunch">Lunches</option>
	  <option value="dinner" name="dinner">Dinners</option>
	  <option value="dessert" name="dessert">Desserts</option>
	 </select>
	</form>
  <center>
</div>

<div id="OutputLayer" class="outputStyle">

</div>





</body>
</html>