Menu qui ne fonctionne pas sous IE

Bonjour tout le monde,

Ce site :

http://www.brussels-peroxidases-meeting-2011.com/

fonctionne correctement avec Chrome et FF.

Avec IE, la bulle bleue du menu n'apparaît pas.

Je me demandais si le CSS était bien appliqué quand j'utilise IE.

Je me demande aussi si il ne faudrait pas utiliser des hack ?

Voici le code CSS du menu :

/* CSS Document */
.lavaLampWithImage {
    position:            relative;
    height:                29px;
    width:                750px;
    background:            url("../img/bg_orange.gif") no-repeat top;
    padding:            1px;
    margin:                0;
    overflow:            hidden;
}
    .lavaLampWithImage li {
        float:                left;
        list-style:            none;
        margin-left:        1px;
    }
            .lavaLampWithImage li.back {
                background:            url("../img/LavaLampBleu_calques_fusionnes_2par2_court.gif") no-repeat right -20px;
                width:                9px;
                height:                50px;
                z-index:            8;
                margin-top:            3px;
                margin-left:        5px;
                position:            absolute;
            }
                .lavaLampWithImage li.back .left {
                    background:            url("../img/LavaLampBleu_calques_fusionnes_2par2_court.gif") no-repeat top left;
                    height:                50px;
                    margin-right:        12px; /* 7px is the width of the rounded shape */
                }
            .lavaLampWithImage li a {
                font:                900 0.8em arial;
                text-decoration:    none;
                color:                #FFFFFF;
                outline:            none;
                text-align:            center;
                top:                6px;
                text-transform:        uppercase;
                letter-spacing:        0;
                z-index:            10;
                display:            block;
                float:                left;
                height:                30px;
                position:            relative;
                overflow:            hidden;
                margin:                auto 6px;
                padding-left:        7px;
            }
                .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
                    border:                none;
                }

J'utilise jquery, j'ai déclaré les fichiers de cette façon :

<link rel="stylesheet" href="css/bulle.css" type="text/css" media="screen" />
        
        
        <script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.min.js"></script>
        <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
        <script type="text/javascript" src="js/jquery.lavalamp.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#1").lavaLamp({
                    fx: "backout",
                    speed: 900,
                    click: function(event, menuItem) {
                        return true;
                    }
                });
            });
        </script>

Je vous remercie sincèrement pour votre aide.

beegees
Modifié par beegees (13 Oct 2010 - 10:58)