[jQuery] IE7 and FF3 difference when hiding elements

[jQuery] IE7 and FF3 difference when hiding elements


I just switched from prototype to jQuery and created my first lines of
a simple script with JQuery, however IE7 and FF3 handles the script
differently.
The script itself is:
$(document).ready(function(){
$(".htmlBlock .details").each(
function(e){
$(this).hide();
}
);
$(".htmlBlock .head a").each(
function(e){
$(this).click(function(){
$(this).parent().next(".details").show();
});
}
);
});
However in IE7 the element with the class 'details' is not hidden on a
quite large page (in kb), however on a smaller page (in kb) there is
no issue. In Firefox there are not issues at all. I 'solved' it by
including the script without document ready after the element, however
that is not a very nice solution. Anyone any ideas?
The script (and the workaround) can be viewed here:
Large page (in kb): http://www.lifestylelog.nl/
Small page (in kb): http://www.lifestylelog.nl/viewSingleItem/3357/She-Wood.htm