Bon pour Firefox, mais pas pour IE...

[ledamien]

Dans ma perpétuelle quête de mettre des sons sur une page ouèbe (vu mon domaine d'activité, c'est un peu obligatoire), j'ai fini par me mettre au Flash (e-anim).

Par ailleurs, j'ai trouvé un code sur Alsacréation pour un effet sympa en CSS.

J'ai donc crée cette page (c'est un test, hein), avec une liste comme menu, et des objets Flash comme éléments du menu, et un gif animé (j'ai fauté, pardon...) qui s'affiche en dessous du menu quand la souris passe sur un des liens.

Voici (en lien) la page avec le test de menu qui fait des bulles.

Voilà ce que ça donne (chez moi) sous Firefox :



Les boutons Flash sont un peu lourds à charger, mais sinon, ça marche : une bulle explose à chaque passage de souris, et le gif animé s'affiche en dessous (pas toujours, mais c'est la faute au gif...).

Et voilà ce que ça donne sous IE :



...après avoir affiché des messages effrayants genre "attention, y a des contrôles, ça peut être hyper dangeureux, etc.".

Quelqu'un a une idée de comment résoudre ce "petit" problème ? J'imagine qu'un hack serait une solution possible, mais si ça pouvait s'éviter...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

[Fabrice.Tres.Net]

A mon avis c'est un problème css, la différence de calcul entre les boîtes (marges et padding)
Essayes en agrandissant le div qui contient ton menu.

Tu peux aussi ajouter au début de ton css
* {
margin: 0;
padding: 0;
}

cela gomme certaines différences IE et FF sur les valeurs par défaut des boites.

[Invité]

Très frustrant, comme truc...

Donc, j'ai ajouté :

* {
margin: 0;
padding: 0;
}

...au début du css.
Ensuite, j'ai élargi mon conteneur et mon ul.

Pas mieux...

(Note : j'ai mis à jour l'exemple et les images...)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

[Fabrice.Tres.Net]

Et si tu ajoutes

li {display:inline;}

[Invité]

Pardon pour le retard à la réponse : j'ai laissé tombé pour l'instant cette histoire de menu Flash (cette histoire de "contrôle active X sous IE est vraiment trop gênante)...

Par contre, j'ai utilisé le truc du padding et margin à zéro pour un autre projet, et ça m'a sauvé la vie (ou tout du moins d'un pétage de câble) : c'est identique entre Firefox et IE.

Par pure curiosité, et pour être moins bête, à qui correspond "*" ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

[Fabrice.Tres.Net]

* signifie tous les éléments, donc cela initialise les margin et padding à 0. Les valeurs d'initialisation étant différentes pour certains éléments entre les différents navigateurs.