simple jQuery appears fine except in IE7
<p>I have created a simple animation using jQuery and the mouseenter / mouseleave. It works fine in IE7, FF, Opera, Chrome and safari. </p>

<p>however, something is wrong in IE7 - nothing happens at all - I can't even get alert boxes to pop up.</p>

<p>Could somebody please take a look at my code and tell me what I am doing wrong before I pull my hair out.</p>

<p>The offending page can be viewed at www.ypfservice.net - its part of a joomla install, hence bloated code.</p>

<p>Thanks a lot</p>

<p>E</p>

<pre><code>enter code here$('a.panelImage').parent().addClass('panel');      

 var numberLinks = $('a.panelImage').length;

 for (var j=0; j&lt;numberLinks; j++){

var currentLink = $('a.panelImage').eq(j);          

$('&lt;div class="fred"&gt;&lt;/div&gt;').insertAfter(currentLink);

var gtr=(currentLink.position().left)+'px';

 $(currentLink).next().css({ // ie div.fred
    'position':'absolute',
    'background-position':'0 0',
    'top':'222px',
    'left':gtr,
    'display':'none',
    'z-index':'1000',
    'width':'5px',
    'height':'5px',
    'overflow':'hidden',
    'backgroundImage':'url(http://www.ypfservice.net/templates/ypftemplate/images/foyerPreview.jpg)',
       });

 }

 $('div.panel').mouseenter(function () {

 $(this).find('div').animate({          
       height: '138px', 
       width: '184px' 
    }, 500)     
})
.mouseleave(function () { 
    $(this).find('div').animate({ 
       'width': '0px', 
       'height': '0px' 
    }, 500); 
}); //end function 
</code></pre>
