I have this code that i wrote out. Basiclly you have four selections of audio you can choose from. This works fine in FF but in IE6 initially the first track will play but if you drop down to any other track it will freeze. Any ideas on how I can fix this?
If you're using IE7 I could use some feedback on this as well.
Thanks
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>drop down audio yo</title> </head> <body bgcolor="#FFFFFF"> <!-- Css Menu --> <style> ul.cssMenu ul{display:none} ul.cssMenu li:hover>ul{display:block} ul.cssMenu ul{position: absolute;left:-1px;top:98%;} ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;} ul.cssMenu,ul.cssMenu ul { margin:0px; list-style:none; padding:0px 2px 2px 0px; background-color:#ffffff; background-repeat:repeat; border-color:#AAAAAA; border-width:1px; border-style:solid; } ul.cssMenu table {border-collapse:collapse}ul.cssMenu { display:block; zoom:1; float: left; } ul.cssMenu ul{ width:77.7px; } ul.cssMenu li{ display:block; margin:2px 0px 0px 2px; font-size:0px; } ul.cssMenu a:active, ul.cssMenu a:focus { outline-style:none; } ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover { display:block; vertical-align:middle; background-color:#ffffff; border-width:0px; border-color:#6655ff; border-style:solid; text-align:left; text-decoration:none; padding:4px; _padding-left:0; font:normal 11px Verdana; color: #444444; text-decoration:none; cursor:default; } ul.cssMenu span{ overflow:hidden; } ul.cssMenu li { float:left; } ul.cssMenu ul li { float:none; } ul.cssMenu ul a { text-align:left; white-space:nowrap; } ul.cssMenu li.sep{ text-align:center; padding:0px; line-height:0; height:100%; } ul.cssMenu li.sep span{ float:none; padding-right:0; width:5; height:16; display:inline-block; background-color:#AAAAAA; background-image:none;} ul.cssMenu ul li.sep span{ width:80%; height:3; } ul.cssMenu li:hover{ position:relative; } ul.cssMenu li:hover>a{ background-color:#4792E6; border-color:#665500; border-style:solid; font:normal 11px Verdana; color: #ffffff; text-decoration:none; } ul.cssMenu li a:hover{ position:relative; background-color:#4792E6; border-color:#665500; border-style:solid; font:normal 11px Verdana; color: #ffffff; text-decoration:none; } ul.cssMenu li.dis a { color: #AAAAAA !important; } ul.cssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px; height:16px; } ul.cssMenu ul img {width:16px; height:16px; } ul.cssMenu img.over{display:none} ul.cssMenu li.dis a:hover img.over{display:none !important} ul.cssMenu li.dis a:hover img.def {display:inline !important} ul.cssMenu li:hover > a img.def {display:none} ul.cssMenu li:hover > a img.over {display:inline} ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover img.over{display:inline} ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover img.def{display:none} ul.cssMenu a:hover ul{display:block} ul.cssMenu span{ display:block; background-image:url(./images/arrv_anim_1.gif); background-position:right center; background-repeat: no-repeat; padding-right:11px;} ul.cssMenu li:hover>a>span{ background-image:url(./images/arrv_anim_1o.gif); } ul.cssMenu a:hover span{ _background-image:url(./images/arrv_anim_1o.gif)} ul.cssMenu ul span,ul.cssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)} ul.cssMenu ul li:hover > a span{ background-image:url(./images/arr_double_1o.gif);} ul.cssMenu table a:hover span{background-image:url(./images/arr_double_1o.gif)} #newboxes1 { position:relative; top:0px; width:125px; height:20px; } #newboxes2 { position:relative; top:0px; width:125px; height:20px; } #newboxes3 { position:relative; top:0px; width:125px; height:20px; } #newboxes4 { position:relative; top:0px; width:125px; height:20px; } </style> <script> function showonlyone(thechosenone) { var newboxes = document.getElementsByTagName("div"); for(var x=0; x<newboxes.length; x++) { name = newboxes[x].getAttribute("name"); if (name == 'newboxes') { if (newboxes[x].id == thechosenone) { newboxes[x].style.display = 'block'; } else { newboxes[x].style.display = 'none'; } } } } </script> <ul class="cssMenu cssMenum"> <li class=" cssMenui"><a class=" cssMenui" href="#"><span>Languages</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class=" cssMenum"> <li class=" cssMenui"><a class=" cssMenui" href="javascript:showonlyone('newboxes1');">English</a></li> <li class=" cssMenui"><a class=" cssMenui" href="javascript:showonlyone('newboxes2');">Spanish</a></li> <li class=" cssMenui"><a class=" cssMenui" href="javascript:showonlyone('newboxes3');">Japanese</a></li> <li class=" cssMenui"><a class=" cssMenui" href="javascript:showonlyone('newboxes4');">Mandarin</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <div style="width:225px;"> <div style="float:left;"> <div name="newboxes" id="newboxes1" style="display: none; display:block; background-color:#060"><embed src="1.mp3" autostart="value" type="audio/mpeg" loop="value" width="150" height="20" controller="true"></div> <div name="newboxes" id="newboxes2" style="display: none; display:none; background-color:#099"><embed src="2.mp3" autostart="value" type="audio/mpeg" loop="value" width="150" height="20" controller="true"></div> <div name="newboxes" id="newboxes3" style="display: none; display:none; background-color:#00C"><embed src="3.mp3" autostart="value" type="audio/mpeg" loop="value" width="150" height="20" controller="true"></div> <div name="newboxes" id="newboxes4" style="display: none; display:none; background-color:#C96"><embed src="4.mp3" autostart="value" type="audio/mpeg" loop="value" width="150" height="20" controller="true"></div> </div> </div> </body> </html>
Reply With Quote
Bookmarks