CodingForums.com - Yahoo UI code having cross browser compatibility issues

Hi,

Here is a sample code.

It works with -
* FireFox 2.0.0.13
* Opera 9.25
* IE 7 (the last three items response, but the first item does not
response on click)
* IE 6 (the last three items response, but the first item does not
response on click)
* Safari 4 (running on macmini) - responses to the mouse event but
the modal window doesn't show up

Could anybody please tell me, how would I fix issues with IE and Safari?

Thanks.
Shehab
-----------------------------------------------
The Code
------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style><endnote><head>
<style></style>
<title>Nothing</title>

<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.5.1/build/container/assets/skins/sam/container.css">

<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.5.1/build/button/assets/skins/sam/button.css">

<script type="text/javascript"
src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.5.1/build/animation/animation-min.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.5.1/build/connection/connection-min.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.5.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.5.1/build/button/button-min.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.5.1/build/container/container-min.js"></script>
<style>
#example {height:30em;}
label { display:block;float:left;width:45%;clear:left; }
.clear { clear:both; }
#resp { margin:10px;padding:5px;border:1px solid #ccc;background:#fff;}
#resp li { font-family:monospace }
</style>
</head>
<body class="yui-skin-sam">
<script>
var elementId = '';
YAHOO.namespace("example.container");
function click(){
elementId = 'show';
YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", { width : "300px", fixedcenter : true, visible : true, modal:true, constraintoviewport : true } );
var result = YAHOO.example.container.dialog1.render();
}
function click1(){
elementId = 'show1';
YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", { width : "300px", fixedcenter : true, visible : true, modal:true, constraintoviewport : true } );
var result = YAHOO.example.container.dialog1.render();
}
function click2(){
elementId = 'show2';
YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", { width : "300px", fixedcenter : true, visible : true, modal:true, constraintoviewport : true } );
var result = YAHOO.example.container.dialog1.render();
}
function click3(){
elementId = 'show3';
YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", { width : "300px", fixedcenter : true, visible : true, modal:true, constraintoviewport : true } );
var result = YAHOO.example.container.dialog1.render();
}
function submit1(){
var ping = document.getElementById("select1");
/*alert(ping.options[ping.selectedIndex].value);*/
document.getElementById(elementId).innerHTML=ping.options[ping.selectedIndex].value;
YAHOO.example.container.dialog1.hide();
/*alert(document.getElementById('show').innerHTML);*/
}
</script>
<div id="myDialog">
<div class="hd">Subjects <font color="blue"
size="0">Click
to edit</font></div>
<br>
<br>
<br>
<div id="show"
style="color: blue; font-size: 0.8em; font-family: Verdana;"
onclick="click();">Technical
support issue</div>
<div id="show1"
style="color: blue; font-size: 0.8em; font-family: Verdana;"
onclick="click1();">Expression
of Interest</div>
<div id="show2"
style="color: blue; font-size: 0.8em; font-family: Verdana;"
onclick="click2();">It
is a general query</div>
<div id="show3"
style="color: blue; font-size: 0.8em; font-family: Verdana;"
onclick="click3();">Need
sales information</div>
</div>
<div id="dialog1" style="visibility: hidden;">
<div class="hd">Select subject</div>
<div class="bd">
<form name="form1" method="post" action="">
<select name="cars" id="select1">
<option value="Technical Suport Issue">Technical Suport
Issue</option>
<option value="Request for Data Sheet">Request for Data
Sheet</option>
<option value="Need sales information">Need sales
information</option>
<option value="It is a general query">It is a general
query</option>
</select>
<br>
<button onclick="submit1()">Submit</button>
<button>Reset</button>
</form>
</div>
</div>
</body>
</html>