Problem with selectors IE7 and firefox 3.0

Problem with selectors IE7 and firefox 3.0

Hello world !

Sorry  but i'm french and my english is not verry good, so i'll try to be as clear as possible !
So, this is my problem :

My page contains a mosaic named #browseProductContainer
This mosaic contains 16 divisions #product
One #product contains 2 divisions: #visu and #text

So we have #browseProductContainer > #product > #text or #visu

First, #text must be hidden. When the cursor is over his parent #product, it slideDown. When cursor is out, it slideUp.
It works perfectly for all #product, but only on "recent" Comput browsers.

But when I try the script on IE7 and firefox 3.0, il only works for the FIRST #product...

This is the script :
  1. $("div#product").each(function(){
            $(this).children("div#text").hide();
           
            $(this).hover(
            function(){
                $(this).children("div#text").slideDown(80);
            },
            function(){
                $(this).children("div#text").slideUp(80);
            });
       
        });











I think the problem comes from selectors, but i don't know how to solve that...

this script doesn't work to:
  1.     var items = $("#browseProductContainer #product");

        $("div#text").hide();

        $(items).hover(
        function(){
            $(this).children("div#text").slideDown(80);
        },
        function(){
            $(this).children("div#text").slideUp(80);
        });











Same problem... Only the first #product isregarded by the script on old
 browsers...

Can someone help me?

Thanks !