[Résolu]Probleme Css IE6

Probleme Css IE6 [Résolu] - HTML/CSS - Programmation

Marsh Posté le 18-12-2007 à 15:51:16    

Bonjour,  
 
Je suis en train de creer un site, et j'ai fais une maquette pour vous exposez mon problème.
 
http://muby53.free.fr/Aide/ProbIE6/
 
Le CSS est disponible ici : http://muby53.free.fr/Aide/ProbIE6/style.css
et le code HTML ici : http://muby53.free.fr/Aide/ProbIE6/index.html
 
Voila la maquette.  
 
Alors mon problème est que le menu fonctionne "très bien" sous Firefox, Internet Explorer 5.5,Internet Explorer 7, Flock, Safari(windows), Opera Mais sous Internet Explorer 6, cela ne fonctionne pas du tout. En effet au passage de la souris sur les menus, le sous menu ne s'affiche pas et la taille du div n'est pas la bonne ce qui rend le "border" du div trop bas et pas en cohérence avec le design.
 
 
J'ai surfer un peu partout pour justement connaitre les bug IE6, mais je n'arrive pas à savoir exactement ou est le probleme.
 
Merci d'avance pour votre aide
 
(je rajoute des screenshots pour ceux qui ont plus IE6 et qui voudrait tout de même aider ;) )
 
FF / Opera / IE5.5 / IE7 / Safari --> Résultat :  
http://muby53.free.fr/Aide/ProbIE6/FF.jpg
 
 
IE6 --> Résultat :
http://muby53.free.fr/Aide/ProbIE6/IE6.jpg


Message édité par muby le 20-12-2007 à 16:22:19
Reply

Marsh Posté le 18-12-2007 à 15:51:16   

Reply

Marsh Posté le 18-12-2007 à 17:18:13    

Note: j'ai pas lu ton code.
 
Ce genre de bugs d'affichage se produit avec IE6 la plupart du temps à cause des définitions de marges qui ne sont pas les mêmes. IE a commencé à implémenter les CSS avec les marges "à l'envers" par rapport à la norme CSS. La marge sous IE6 est calculé à l'intérieur de la boite définie par width/height, alors que CSS stipule la norme décrite ici:
http://www.w3.org/TR/CSS1#formatting-model
avec les marges à l'extérieur (comme en imprimerie).
 
Je te laisse chercher la marge, le padding, ou le border responsable... pour corriger il suffit en général de remplacer la marge fautive par un div coloré de la bonne dimension.

Reply

Marsh Posté le 18-12-2007 à 18:30:49    

Merci bien de ta réponse, je vais essayer de regarder cela, mais l'autre souci c'est que sous ie6 il n'affiche pas le sous menu... qui est placer en Absolue par rapport au div du menu.

Reply

Marsh Posté le 19-12-2007 à 17:10:28    

J'ai chercher toute la journée et je n'utilise pas de marge qui pourrait supprimer le sous menu.  
 
Mon reel probleme c'est que mon sous menu qui est afficher en Absolue s'affiche pas du tout ...  
 
Auriez vous une piste sur cela ?

Reply

Marsh Posté le 20-12-2007 à 10:56:05    

Après avoir débuggé un peu ce qui se passait sous IE6, il apparaît que le problème vient du Javascript et non du CSS.
 
Lorsque tu survoles ton élément "menu", le classe 'select' est appliquée à l'élément <li class="MenuX">, et pas à l'élément <ul> qui contient ton menu.
 
A priori je pense que le problème vient de cette partie du code :
 

Code :
  1. function menuHover(e) {
  2. var element = Event.element(e); // récupere l'élément appellé
  3. if (element.parentNode.parentNode.parentNode.parentNode.id == 'menu' )
  4. { // si survole un <a> du menu supérieur
  5. menuSelect(element.parentNode.parentNode); // applique le survol
  6. Event.stop(e); // arrête la propagation
  7. }
  8. }


 
Il faudrait regarder du côté des .parentNode, qui ne sont pas forcément interpretés de la même manière suivant les différents navigateurs.

Reply

Marsh Posté le 20-12-2007 à 11:58:03    

nargy a écrit :

Note: j'ai pas lu ton code.


 
t aurais du, tu parles d ie6 en mode quirks [:petrus75]


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 20-12-2007 à 16:20:46    

J'ai trouver le souci.
 
Il venait bien du CSS. j'ai juste enlever le padding top et bottom et agrandi le span en hauteur et tout est redevenu a la normal.
 
Resultat ici : ici
 
 
Enfin voila merci encore a vous tous ;)


Message édité par muby le 20-12-2007 à 16:21:59
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed