décallage dans div entre Firefox et IE

Eléphanteau du PHP | 25 Messages

31 janv. 2009, 21:11

Bonjour, je monte un site composé de la manière suivante :
1 entete provenant d'un fichier php
1 menu gauche provenant d'un fichier php
1 menu droite provenant d'un fichier php

Mon problème est le suivant : sous Firefox tout fonctionne nickel alors que sous IE j'ai un décallage dans mon menu

Ci dessous le code de mon menu :

Code : Tout sélectionner

<div style="width:287px;height:613px;float:left;padding-top:10px;padding-left:30px;background:url(images/gauche1.png) top left no-repeat"> <div style="width:130px;height:55px;float:right;margin-right:10px"> <a href="index.php" target="_self"> <img src="images/btaccueil1.png" onmouseover="this.src='images/btaccueil.png'" onmouseout="this.src='images/btaccueil1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:50px"> <a href="asso.php" target="_self"> <img src="images/btasso1.png" onmouseover="this.src='images/btasso.png'" onmouseout="this.src='images/btasso1.png'"/></div> </a> <!-- debut sous menu deroulant BOUTON ASSOCIATION --> <div onmouseover="document.getElementById('smsg').style.display='block'" onmouseout="document.getElementById('smsg').style.display='none'" style="width:130px;height:auto;float:right;margin-top:1px;margin-right:80px"> <div> <img src="images/btsect1.png" onmouseover="this.src='images/btsect.png'" onmouseout="this.src='images/btsect1.png'"/> <div id="smsg" style="display:none;"> <div style="width:130px;height:55px;float:right;margin-top:1px"> <a href="secmon.php" target="_self"> <img src="images/moniteurs1.png" onmouseover="this.src='images/moniteurs.png'" onmouseout="this.src='images/moniteurs1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/baby1.png" onmouseover="this.src='images/baby.png'" onmouseout="this.src='images/baby1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/pouss1.png" onmouseover="this.src='images/pouss.png'" onmouseout="this.src='images/pouss1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/pupilles1.png" onmouseover="this.src='images/pupilles.png'" onmouseout="this.src='images/pupilles1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/adultes1.png" onmouseover="this.src='images/adultes.png'" onmouseout="this.src='images/adultes1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/remf1.png" onmouseover="this.src='images/remf.png'" onmouseout="this.src='images/remf1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/btjuges1.png" onmouseover="this.src='images/btjuges.png'" onmouseout="this.src='images/btjuges1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/btcalend1.png" onmouseover="this.src='images/btcalend.png'" onmouseout="this.src='images/btcalend1.png'"/></div> <!-- fin sous menu deroulant BOUTON ASSOCIATION --> </div> </div> </div> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:110px"> <img src="images/btinscrip1.png" onmouseover="this.src='images/btinscrip.png'" onmouseout="this.src='images/btinscrip1.png'"/></div> <!--début sous menu déroulant BOUTON CALENDRIER--> <div onmouseover="document.getElementById('smca').style.display='block'" onmouseout="document.getElementById('smca').style.display='none'" style="width:130px;height:auto;float:right;margin-top:1px;margin-right:140px"> <div> <img src="images/btcalendrier1.png" onmouseover="this.src='images/btcalendrier.png'" onmouseout="this.src='images/btcalendrier1.png'"/> <div id="smca" style="display:none;"> <div style="width:130px;height:55px;float:right;margin-top:1px"> <a href="calendad.php" target="_self"> <img src="images/adultes1.png" onmouseover="this.src='images/adultes.png'" onmouseout="this.src='images/adultes1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px"> <a href="calendpup.php" target="_self"> <img src="images/pupilles1.png" onmouseover="this.src='images/pupilles.png'" onmouseout="this.src='images/pupilles1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px"> <a href="calendpouss.php" target="_self"> <img src="images/pouss1.png" onmouseover="this.src='images/pouss.png'" onmouseout="this.src='images/pouss1.png'"/></div> </a> </div> </div> </div> <!--Fin sous menu déroulant BOUTON CALENDRIER--> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:160px"> <img src="images/btcompet1.png" onmouseover="this.src='images/btcompet.png'" onmouseout="this.src='images/btcompet1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:160px"> <a href="essainotes.php" target="_self"> <img src="images/btresult1.png" onmouseover="this.src='images/btresult.png'" onmouseout="this.src='images/btresult1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:160px"> <a href="articles.php" target="_self"> <img src="images/btarticle1.png" onmouseover="this.src='images/btarticle.png'" onmouseout="this.src='images/btarticle1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:160px"> <a href="photos1.php" target="_self"> <img src="images/btphotos1.png" onmouseover="this.src='images/btphotos.png'" onmouseout="this.src='images/btphotos1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:160px"> <img src="images/btcd1.png" onmouseover="this.src='images/btcd.png'" onmouseout="this.src='images/btcd1.png'"/></div> </div>
SI quelqu'un peut me mette sur une piste svp le decallage se fait entre le bouton article et le bouton photo.

Merci de votre aide

Administrateur PHPfrance
Administrateur PHPfrance | 11457 Messages

31 janv. 2009, 23:52

Modération :
Afin d'obtenir plus de réponses, le sujet est déplacé dans le forum "HTML, XHTML, CSS".

Merci de prendre le temps de lire les règlements
ainsi que l'intitulé de chaque forum avant de poster un nouveau sujet.

theblackbeast
Invité n'ayant pas de compte PHPfrance

02 févr. 2009, 01:39

J'ai eu le même probléme que toi lorsque j'ai commencé mon site, j'ai était obligé de modifié mes données pour qu'elles soient a peu prés compatible et avec IE et avec Mozilla

Mammouth du PHP | 2937 Messages

02 févr. 2009, 09:53

Ci dessous le code de mon menu :

Code : Tout sélectionner

<div style="width:287px;height:613px;float:left;padding-top:10px;padding-left:30px;background:url(images/gauche1.png) top left no-repeat"> <div style="width:130px;height:55px;float:right;margin-right:10px"> <a href="index.php" target="_self"> <img src="images/btaccueil1.png" onmouseover="this.src='images/btaccueil.png'" onmouseout="this.src='images/btaccueil1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:50px"> <a href="asso.php" target="_self"> <img src="images/btasso1.png" onmouseover="this.src='images/btasso.png'" onmouseout="this.src='images/btasso1.png'"/></div> </a> <!-- debut sous menu deroulant BOUTON ASSOCIATION --> <div onmouseover="document.getElementById('smsg').style.display='block'" onmouseout="document.getElementById('smsg').style.display='none'" style="width:130px;height:auto;float:right;margin-top:1px;margin-right:80px"> <div> <img src="images/btsect1.png" onmouseover="this.src='images/btsect.png'" onmouseout="this.src='images/btsect1.png'"/> <div id="smsg" style="display:none;"> <div style="width:130px;height:55px;float:right;margin-top:1px"> <a href="secmon.php" target="_self"> <img src="images/moniteurs1.png" onmouseover="this.src='images/moniteurs.png'" onmouseout="this.src='images/moniteurs1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/baby1.png" onmouseover="this.src='images/baby.png'" onmouseout="this.src='images/baby1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/pouss1.png" onmouseover="this.src='images/pouss.png'" onmouseout="this.src='images/pouss1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/pupilles1.png" onmouseover="this.src='images/pupilles.png'" onmouseout="this.src='images/pupilles1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/adultes1.png" onmouseover="this.src='images/adultes.png'" onmouseout="this.src='images/adultes1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/remf1.png" onmouseover="this.src='images/remf.png'" onmouseout="this.src='images/remf1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/btjuges1.png" onmouseover="this.src='images/btjuges.png'" onmouseout="this.src='images/btjuges1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px"> <img src="images/btcalend1.png" onmouseover="this.src='images/btcalend.png'" onmouseout="this.src='images/btcalend1.png'"/></div> <!-- fin sous menu deroulant BOUTON ASSOCIATION --> </div> </div> </div> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:110px"> <img src="images/btinscrip1.png" onmouseover="this.src='images/btinscrip.png'" onmouseout="this.src='images/btinscrip1.png'"/></div> <!--début sous menu déroulant BOUTON CALENDRIER--> <div onmouseover="document.getElementById('smca').style.display='block'" onmouseout="document.getElementById('smca').style.display='none'" style="width:130px;height:auto;float:right;margin-top:1px;margin-right:140px"> <div> <img src="images/btcalendrier1.png" onmouseover="this.src='images/btcalendrier.png'" onmouseout="this.src='images/btcalendrier1.png'"/> <div id="smca" style="display:none;"> <div style="width:130px;height:55px;float:right;margin-top:1px"> <a href="calendad.php" target="_self"> <img src="images/adultes1.png" onmouseover="this.src='images/adultes.png'" onmouseout="this.src='images/adultes1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px"> <a href="calendpup.php" target="_self"> <img src="images/pupilles1.png" onmouseover="this.src='images/pupilles.png'" onmouseout="this.src='images/pupilles1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px"> <a href="calendpouss.php" target="_self"> <img src="images/pouss1.png" onmouseover="this.src='images/pouss.png'" onmouseout="this.src='images/pouss1.png'"/></div> </a> </div> </div> </div> <!--Fin sous menu déroulant BOUTON CALENDRIER--> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:160px"> <img src="images/btcompet1.png" onmouseover="this.src='images/btcompet.png'" onmouseout="this.src='images/btcompet1.png'"/></div> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:160px"> <a href="essainotes.php" target="_self"> <img src="images/btresult1.png" onmouseover="this.src='images/btresult.png'" onmouseout="this.src='images/btresult1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:160px"> <a href="articles.php" target="_self"> <img src="images/btarticle1.png" onmouseover="this.src='images/btarticle.png'" onmouseout="this.src='images/btarticle1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:160px"> <a href="photos1.php" target="_self"> <img src="images/btphotos1.png" onmouseover="this.src='images/btphotos.png'" onmouseout="this.src='images/btphotos1.png'"/></div> </a> <div style="width:130px;height:55px;float:right;margin-top:1px;margin-right:160px"> <img src="images/btcd1.png" onmouseover="this.src='images/btcd.png'" onmouseout="this.src='images/btcd1.png'"/></div> </div>
Ça ne coûte rien de créer des fichiers CSS et JavaScript : le code XHTML gagne en visibilité. ;)

Modérateur PHPfrance
Modérateur PHPfrance | 6037 Messages

02 févr. 2009, 11:47

Règle n°2 du webmaster : Toujours commencer par le HTML qu'on veut obtenir....toujours ! :priere:
J'aime apprendre de nouvelles choses.

Eléphanteau du PHP | 25 Messages

23 févr. 2009, 19:06

Merci pour les liens.

Apres recherche, j'ai supprimer mon padding-top et margin-left de ma div principale.

Maintenant ça à l'air de fonctionner sous les 2 navigateurs.

Merci de votre aide