Affichage IE/Opéra

Bonjour à tous,

Je suis actuellement confronté au problème suivant:
Je dois adapter un site web à IE, celui-ci étant déjà terminé et fonctionnant parfaitement sous FF et Chrome.
Je vous laisse tester le site sous chrome/Firefox puis sous IE ou Opera (l'affichage est à peu près le même pour ces deux navigateurs): ici

Le fond n'est plus le même et les bulles sur le coté près du personnage violet ne sont plus cliquables (uniquement sous IE). Sans parler de certaines bulles de texte sur le site qui deviennent transparentes.

Je pense à un problème de CSS, mais j'aimerais confirmation tout de même.

Avez vous une solution ? J'avoue ne pas être très compétent dans le domaine, et qu'un peu d'aide ne me ferait pas de mal !

Merci d'avance.

Moi je pense plus à un problème de JavaScript vu que vous en utilisez partout il doit y avoir une méthode que ie ne supporte pas...

Pourquoi attribuer toutes les classes avec du JavaScript alors que vous auriez pu le faire dans le HTML...?

Le site n'a pas été fait par moi même, mais par un designer web qui n'est plus dans l'entreprise.

En farfouillant un peu, j'ai découvert que j'avais un problème de css et de javascript, le problème de css est quasiment réglé, mais pour le js, je suis bien moins à l'aise et je ne sais pas vraiment ce que ne supporte pas ie...

Bon j'ai regardé un peu et à mon avis t'es pas sorti de l'auberge vu ce que le gars t'as laissé :aie:. Mais au moins c'est bien indenté.

En gros ya un truc déjà que ie ne supporte pas c'est :

Code:

---

window.innerHeight

---

et tu en as dans ton code après j'ai parcouru le code dans les grandes lignes le mieux c'est que tu utilises un débogueur et dès qu'il coince tu remontes l'erreur pour trouver la méthode qui n'est pas supportée.

Je te souhaite bonne chance, il y a moyen que tu t'amuses!! ;)

Citation:

---

Envoyé par DrDarko

Bon j'ai regardé un peu et à mon avis t'es pas sorti de l'auberge vu ce que le gars t'as laissé :aie:. Mais au moins c'est bien indenté.

En gros ya un truc déjà que ie ne supporte pas c'est :

Code:

---

window.innerHeight

---

---

Ah ben voilà, c'est de la que vient le problème de taille de la fenêtre...(je me retrouve avec un bandeau violet le long de mon site, coté droit).
Merci pour la piste !

Citation:

---

Envoyé par DrDarko

et tu en as dans ton code après j'ai parcouru le code dans les grandes lignes le mieux c'est que tu utilises un débogueur et dès qu'il coince tu remontes l'erreur pour trouver la méthode qui n'est pas supportée.

Je te souhaite bonne chance, il y a moyen que tu t'amuses!! ;)

---

J'ai l'impression qu'il y a des trucs assez "basiques" du JS qu'il ne supporte pas, les mouseover & co ne se déclenchent pas alors qu'ils devraient...
Comme tu dis, je vais m'amuser (et je m'amuse déjà) !

Citation:

---

les mouseover & co ne se déclenchent pas

---

IE reconnait très bien ce genre d'événement... Reste à savoir comment tu les implémentes :whistle:

Je viens de retchecker le code et plus je le regarde, plus mes yeux saignent car oui ton code et ben il pique les yeux!

Ce genre de code par exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function made2() { if (document.documentElement.clientWidth<'1024') { } else {setTimeout( function(){ document.getElementById('titlemade').className="name"; document.getElementById('textmade').className="nameblank"} , 50000); }}

---

Pourquoi diable faire un if qui ne contient rien pour enchaîner avec un else qui contient des choses!!! :mur: (au passage je viens juste de lire que clientWidth retournait des valeurs qui étaient différentes entre FF et IE... surement un autre de tes bugs...)

Et ya pas que ça, pour le code il n'a pas réfléchi une seule seconde il a fait des copier coller qui sont affreux. Franchement je te plains...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

setTimeout( function() { document.getElementById('bigcontain').style.opacity= 0; } , 0); setTimeout( function() { document.getElementById('bigcontain').style.opacity= 1; } , 1000);

---

La je ne suis pas expert mais je pense que cela reste très moyen de faire un setTimeout de 0... Ce n'est pas le but de cette méthode.

Je viens de jeter un dernier coup d’œil et il a vraiment abusé du ctrl+c et ctrl+v... Toutes mes condoléances.

Citation:

---

Envoyé par DrDarko

Je viens de retchecker le code et plus je le regarde, plus mes yeux saignent car oui ton code et ben il pique les yeux!

Ce genre de code par exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function made2() { if (document.documentElement.clientWidth<'1024') { } else {setTimeout( function(){ document.getElementById('titlemade').className="name"; document.getElementById('textmade').className="nameblank"} , 50000); }}

---

Pourquoi diable faire un if qui ne contient rien pour enchaîner avec un else qui contient des choses!!! :mur: (au passage je viens juste de lire que clientWidth retournait des valeurs qui étaient différentes entre FF et IE... surement un autre de tes bugs...)

---

Effectivement, je n'avais même pas fait attention à ça. Du coup je pense que virer ce genre de choses pour ne pas mettre de structure conditionnelle ne peut qu'être meilleur pour le code.
Pour ce qui est des "clientWidth", c'est moi qui les ai rajouté pour remplacer les "window.InnerWidth", qui ne fonctionnent pas sous IE. J'ai également lu qu'il était universel et qu'à priori, il devait renvoyer la même chose pour tous les navigateurs...

Citation:

---

Envoyé par DrDarko

Et ya pas que ça, pour le code il n'a pas réfléchi une seule seconde il a fait des copier coller qui sont affreux. Franchement je te plains...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

setTimeout( function() { document.getElementById('bigcontain').style.opacity= 0; } , 0); setTimeout( function() { document.getElementById('bigcontain').style.opacity= 1; } , 1000);

---

La je ne suis pas expert mais je pense que cela reste très moyen de faire un setTimeout de 0... Ce n'est pas le but de cette méthode.

Je viens de jeter un dernier coup d’œil et il a vraiment abusé du ctrl+c et ctrl+v... Toutes mes condoléances.

---

Etant donné mes capacités en JS, je sens que ça va être la croix et la bannière pour adapter tout ça.
Je suis en tout cas très reconnaissant pour le temps que tu as pris pour m'aider, et je suis preneur de tes conseils si tu en as d'autres !

Citation:

---

Envoyé par Bovino

IE reconnait très bien ce genre d'événement... Reste à savoir comment tu les implémentes :whistle:

---

Le problème vient-il du fait que les méthodes à lancer en mouseOver sont décrites dans le head et comporte des "GetElementById" ? Comme ici par exemple:

Code:

---

1 2 3 4 5 6

function changequoi() { document.getElementById('quoi').style.zIndex="4"; document.getElementById('quoi').className="bulle2"; }

---

J'ai entendu dire que les "document.getElementById" étaient assez mal supporté dans le head, penses-tu que cela puisse venir de là ?

Citation:

---

J'ai entendu dire que les "document.getElementById" étaient assez mal supporté dans le head

---

8O

Change de conseiller alors !
Quel que soit l'endroit où il se trouve, getElementById() est parfaitement supporté. Ensuite, c'est comme pour toute instruction informatique : il n'existe pas de mode "divination" et pour l'utiliser, il faut que l'élément ayant l'id recherché existe dans le DOM !

Voilà, c'est plutôt ce que je voulais dire, que de le mettre dans le head n'était une très bonne idée si on créait par la suite des éléments dynamiquement (et qu'on l'identifiait avec son id dans le head).

Je m'étais mal exprimé :)

Bon pour être honnête avec toi, j'ai commencé le JavaScript et le jQuery (que je recommande) il y a un mois seulement donc je ne suis pas encore au top.

Je pense qu'il serait préférable que tu réorientes ton sujet dans la catégorie JavaScript. Tu disposerais d'un peu plus d'aide. Notamment sur le setTimeout de 0 par exemple, il y aura surement quelqu'un qui pourra soit dire que c'est à bannir soit expliquer son utilité.

Bon je viens de regarder encore un coup et c'est encore quelque chose ou je ne suis pas sur à 100%, il faudrait demander sur le forum JavaScript - jQuery. Dans un de tes scripts il y a

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

$(document).ready(function() { <!--Firefox--> if($.browser.mozilla) { $(document).ready ( function() { $('#slide').parallax("left", 1.5, 0, true); } ) $(document).ready ( function() { var deck = new $.scrolldeck ( { buttons: '.nav-button', easing: 'easeInOutExpo' } ); } ); .......... // même chose pour les autres navigateurs }

---

Donc ici on fait un $(document).ready suivi d'une fonction, ce qui permet d'attendre que tout le DOM soit chargé avant d’exécuter cette fonction. Jusque-là c'est bon mais pourquoi refaire des $(document).ready après ? Normalement le DOM est chargé et ne bouge plus... Après je te l'ai dit je ne suis pas un expert, il faudrait que d'autres personnes beaucoup plus compétentes que moi se penchent sur ton cas. Parce qu'il y à beaucoup à dire à mon avis...

D'accord, je vois.
A la base, je ne savais pas vraiment d'où venait le problème, maintenant j'ai pu le cibler de manière plus efficace.
Je pense me réorienter vers cette section, j'espère y trouver autant d'aide qu'ici !

Merci pour ton aide, et à bientôt peut être !