Problem with menu in Chrome and IE ...

[shamilsons]

Hello everyone,
I use leatest version of chrome, firefox and IE 8.0
I have two problems with menu. I have explained them below as well as you can see them from http://www.yabancidildestek.com/
1. My div tag is being positioned well in firefox but moves left on chrome. For instance make a mouse over Dil Sınavlarına Hazırlık link.
2. When ever mouse moves over the link Üniversite Hazırlık the color changes BUT when ever it moves over Dil Sınavlarına Hazırlık the color does not change.
Code fpr td and div is given below


....
<td id="tddilsinavi" class="mlink" style="cursor: pointer;" onclick="window.location='#'" onmouseover="javascript:goster('dilsinavi'); this.style.backgroundColor='#4F99C1';" onmouseout="javascript:gizle('dilsinavi');this.style.backgroundColor='#66C6F9';" align="right" height="28"><span class="title">Dil Sınavlarına Hazırlık</span>&nbsp;&nbsp;</td>
...
...
<div id="dilsinavi" style="position: absolute; left:371px; top: 158px; width: 170px; height: 190px; visibility: hidden; z-index: 0; opacity: 0.9" onmouseover="javascript:goster('dilsinavi'); document.getElementById('tddilsinavi').style.backgroundColor='#4F99C1';" onmouseout="javascript:gizle('dilsinavi'); document.getElementById('tddilsinavi').style.backgroundColor='#66C6F9';">
<table cellpadding="0" cellspacing="0" height="178">
<tbody>
<tr>
<td>
<table bgcolor="#1476A7" border="0" cellpadding="4" cellspacing="6" height="100%">
<tbody>
<tr>
<td class="header" valign="top" width="372">
<span>
<img src="images/play.png" width="15" height="15">&nbsp;<a href="#" class="header">TOEFL</a><br>
<img src="images/play.png" width="15" height="15">&nbsp;<a href="#" class="header">IELTS</a><br>
<img src="images/play.png" width="15" height="15">&nbsp;<a href="#" class="header">TOFEIC</a><br>
<img src="images/play.png" width="15" height="15">&nbsp;<a href="#" class="header">FCE</a><br>
<img src="images/play.png" width="15" height="15">&nbsp;<a href="#" class="header">ELAE</a><br>
<img src="images/play.png" width="15" height="15">&nbsp;<a href="#" class="header">ÜDS</a><br>
<img src="images/play.png" width="15" height="15">&nbsp;<a href="#" class="header">YDS</a><br>
<img src="images/play.png" width="15" height="15">&nbsp;<a href="#" class="header">KPDS</a><br>
<img src="images/play.png" width="15" height="15">&nbsp;<a href="#" class="header">PROFICIENCY</a><br>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
</div>

Could you help with this problems ?.

thank you

[stringcugu]

put the this.style.backgroundColor='yellow';before javascript:
onmouseover="this.style.backgroundColor='yellow';javascript:goster('dilsinavi'); this.style.backgroundColor='yellow';"

and move the other div closer
<div id="dilsinavi" style="position: absolute; left:241px; top: 158px; width: 170px; height: 190px; visibility: hidden; z-index: 0; opacity: 0.9" onmouseover="javascript:goster('dilsinavi'); document.getElementById('tddilsinavi').style.backgroundColor='#4F99C1';" onmouseout="javascript:gizle('dilsinavi'); document.getElementById('tddilsinavi').style.backgroundColor='#66C6F9';">

[shamilsons]

put the this.style.backgroundColor='yellow';before javascript:
onmouseover="this.style.backgroundColor='yellow';javascript:goster('dilsinavi'); this.style.backgroundColor='yellow';"

and move the other div closer
<div id="dilsinavi" style="position: absolute; left:241px; top: 158px; width: 170px; height: 190px; visibility: hidden; z-index: 0; opacity: 0.9" onmouseover="javascript:goster('dilsinavi'); document.getElementById('tddilsinavi').style.backgroundColor='#4F99C1';" onmouseout="javascript:gizle('dilsinavi'); document.getElementById('tddilsinavi').style.backgroundColor='#66C6F9';">
Hello stringcugu,
For the javascript it worked thank you ...

BUT for moving div it become even more bad. Do you have any other idea.
thanks.