Hi,
I've had no problems until I upgraded to IE 9. I'm running jquery 1.4.4 and also tried it with the newest version. In IE 9, it will work if I switch the browser to IE 8 Standards Mode. When I switch it back to IE 9 Standards it stops working. By stop working I mean I click on the button and nothing happens.
Here is the javascript:
jQuery.noConflict(); var $j = jQuery; $j(document).ready(function () { $j('div.menu_class').click(function () { $j('ul.the_menu').slideToggle('medium'); });});Here is the html:
<div id="button" class="menu_class"> <ul class="the_menu"> <li><a href="/houston.html">Houston</a></li> </ul></div>Here is the CSS:
#button { height: 32px; width: 184px; margin: auto; background-image: url(button.png); background-repeat: no-repeat; background-position:0 0; position:absolute; left: 499px; top: 71px; color:#FFF; font-size:20px; font-weight: bold; text-align:center; line-height:32px; z-index:1;}#button ul, li { margin:0; padding:0; list-style:none;}.menu_class { border:1px solid #1c1c1c; cursor:pointer;}.the_menu { display:none; width:184px; border: 1px solid #1c1c1c; font-size:14px; text-align:left; line-height:16px; z-index:1; position:absolute; top:33px; left:0;}.the_menu li { background-color: #302f2f; margin:0; padding:0; list-style:none; display:block; float:left; width:100%;}.the_menu li a { color:#FFFFFF; text-decoration:none; padding:10px; display:block;}.the_menu li a:hover { padding:10px; font-weight:bold; color: #F00880;Any ideas on what the problem could be or how to fix it?
Thanks,
Tim