Slideshow non centré sur FIREFOX

Bonjour,
Dans un souci d'optimisation, j'essaie de rendre parfaitement accessible mon site sur tous les navigateurs, du moins les plus utilisés. Ma plus grande erreur lorsque j'ai reconçu le design de mon site est que je me suis basé uniquement sur le rendu que j'avais de Chrome, je me rend compte alors que très récemment que le site s'affiche très mal sur FIREFOX.

Le problème le plus gênant est que le slideshow en js (plugin que j'ai incorporé au thème wordpress) n'est pas du tout afficher correctement. Il dévie sur la droite, superposé sur ma barre de navigation. Le margin: 0; n'a pas l'air d'avoir effet sur Firefox et malgré plusieurs tentatives vaines, aucun moyen de pouvoir retrouver une apparence normale ...

Voici l'adresse de mon site : http://vibzone.fr/

Et les codes CSS concernés :

Le slideshow :

#myGallery, #myGallerySet, #flickrGallery {
    background: url('http://vibzone.fr/wp-content/plugins/dynamic-content-gallery-plugin/js-mootools/css/img/loading-bar-black.gif') no-repeat scroll center center #000;
    border: 0px solid #000;
    height: 343px;
    width: 960px;
}
#myGallery {
    z-index: 5;
}
#myGallery {
    margin: 0px auto;
    text-align: center;
}
.jdGallery {
    overflow: hidden;
    position: relative;

La navbar

#top {
    width: 960px;
    height: 40px;
    position: relative;
    z-index: 999999999;
    float: left;
    margin-top: 10px;
    text-align: center;
    background-color: #FFDBA7;
}

#top ul.sf-menu {
    font-family: bebasneueregular;
    font-style: normal;
    display: inline-block;
}
.sf-menu {
    line-height: 1;
}
.sf-menu, .sf-menu * {
    margin: 0px;
    padding: 0px;
    list-style: none outside none;
}

Pourriez vous m'aider s'il vous plait? Des pistes me permettrait de cibler plus précisément le problème. N'hésitez pas à me demander plus d'informations au besoin ... merci d'avance !

Bonjour,

Il semble déjà que tu aies quelques erreurs dans ton code html (si je fais "voir le code source" sous Chrome, je vois trainer des </div> après le </html> de fin, et sous Firefox, je ne vois même pas ce </html> de fin). Les parsers des navigateurs ont donc du mal avec ce code. Il faudrait déjà régler ça (il est possible qu'il y ait d'autres erreurs de ce type plus haut dans le document). Si ça se trouve, ça suffira.

Amicalement,

Merci de la réponse rapide,

En effet j'ai localisé ces <div> en dehors du html, je l'ai est donc déplacé de manière à ce qu'elles précédent le </html> mais ça ne change rien sur Firefox, ça n'a qu'un impact négatif sur le design, mon footer se décale (le thème wordpress est de base assez mal fichu, j'ai donc beaucoup tatonné et rafistolé pour corriger les défauts visuels auparavant).
Du coup je ne pense pas que le problème vienne de cela, auriez vous d'autres idées?

Merci d'avance.

Bonjour,

A la ligne <script type=”text/javascript” src="http://code.jquery.com/jquery-1.5.2.min.js"></script>, les guillemets autour de text/javascript ne sont pas les guillemets standards. De plus, c'est la deuxième ligne qui charge jquery, et de plus c'est une version assez ancienne de jquery.

Ce n'est pas pour ça que la présentation est différente sur firefox de celle de Chrome, mais ça n'aide pas ! Il faut vraiment avoir un HTML nickel avant tout.

Sinon, pour déboguer, tu peux dans une page de test retirer du code ligne par ligne tout ce qui est sans rapport avec le problème de rendu que tu as si tu veux avoir une chance de trouver, car là, y a beaucoup trop de choses dans cette page pour pouvoir comprendre ce qui s'y passe.

Amicalement,

Bonjour,
J'ai supprimé tout ce qui ne concernait pas le slideshow et aucun changement visible. Ca ne viendrait plutôt d'un problème de compatibilité avec le CSS, du fait que la page s'affiche normalement sur Explorer et Chrome?

Par ailleurs, est-ce que vous pourriez m'indiquer comment changer la version de Jquery. Enfin le fait que ce soit le deuxième ligne qui charge Jquery est-il mauvais? Je ne suis pas vraiment calé dans le domaine..

Merci de votre aide.

Bonjour,
Le problème a bien l'air de venir du slideshow en lui-même car c'est un problème "récurrent" qui revient sur le support du développeur du plugin.
J'ai donc trouver un topic où quelqu'un semblait avoir une solution : http://wordpress.org/support/topic/plugin-dynamic-content-gallery-shifts-right-in-firefox-windows-but-not-mac

J'ai à peu près compris où il voulait en venir, mais je n'ai cependant pas vraiment compris comment il résout ce problème.
Pourriez vous m'éclairer s'il vous plait?

Petit up

thefactory a écrit :
Bonjour,
... Ca ne viendrait plutôt d'un problème de compatibilité avec le CSS, du fait que la page s'affiche normalement sur Explorer et Chrome?
.

C'est très probablement un problème de ce genre. Encore faut-il trouver lequel : c'est un travail de fourmi.

thefactory a écrit :

Par ailleurs, est-ce que vous pourriez m'indiquer comment changer la version de Jquery. Enfin le fait que ce soit le deuxième ligne qui charge Jquery est-il mauvais? Je ne suis pas vraiment calé dans le domaine.

Il faut faire en sorte qu'il n'y ait qu'une ligne chargeant jquery déjà (il faut donc identifier quels sont les composants qui inclut jquery). Ensuite, quand on le peut, il faut faire en sorte que la ligne restante chargeant jquery fasse référence à la dernière version. Par exemple :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Enfin, si on fait ça, il faut aussi vérifier que mettre une version récente de jquery ne perturbe pas le fonctionnement de modules testés avec des versions plus anciennes.

Amicalement,

Bonjour,

la page utilise à la fois les frameworks JS Mootools et jQuery, ce qui est pas mal lourd en terme de chargement de dizaines de ko de code ! Si l'un des 2 est utilisé pour juste 1 ou 2 plugins, ce serait pas mal de chercher l'équivalent avec l'autre framework dans le but de n'utiliser et de ne charger qu'un seul des 2

jQuery 1.4.2 est chargé puis 1.5.2 : inutile ; je suppose qu'un des 2 est chargé automatiquement par un plugin ou WP ou autre ?

Une version plus récente, oui mais attention : et la version 1.6.1 et la version 1.9 ont introduit quelques et beaucoup de différences avec les versions précédentes.
Surtout avec des plugins anciens, ça a peu de chances de fonctionner tel quel. Le plus simple avant de lire ce qu'il y a ci-dessous, c'est de tester.
v1.6.1 Upgrading From 1.5.2 to 1.6.1
v1.9 et plus (on en est à 1.1 ou 1.12) : guide de migration vers 1.9 (et l'utile plugin Migrate)
Note : jQuery 2.x enlève la compatibilité avec IE8 et moins, à part ça c'est à peu près comme les dernières versions de jQuery 1.x en plus rapide et moins gros
Modifié par Felipe (29 Jun 2014 - 14:50)

Merci pour vos réponses,

Je comprend les pistes que vous m'avez indiqué mais je ne sais pas si tout ça est modifiable à travers Wordpress. Je travaille sur une nouvelle version de mon site et je vais donc déjà réduire considérablement les plugins sollicitant trop souvent Jquery.

@Felipe : Chercher l'équivalent reviendrait à trouver un autre plug-in utilisant lui Jquery? Je vais m'y attarder plus tard, mais ça doit sûrement être JS Mootools qui doit faire défaut.

Tout ça m'a l'air bien minutieux, je vais m'y attarder quand j'aurais résolu ce problème de slider. Par ailleurs, ayant réussi à identifier le problème, pourriez vous m'aiguiller sur cette réponse-ci?

Bonjour,
Le problème a bien l'air de venir du slideshow en lui-même car c'est un problème "récurrent" qui revient sur le support du développeur du plugin.
J'ai donc trouver un topic où quelqu'un semblait avoir une solution :  http://wordpress.org/support/topic/plugin-dynamic-content-gallery-shifts-right-in-firefox-windows-but-not-mac
 

J'ai à peu près compris où il voulait en venir, mais je n'ai cependant pas vraiment compris comment il résout ce problème.
Pourriez vous m'éclairer s'il vous plait?  Smiley biggrin 

Merci pour vos éléments de réponses.

Désolé du doublon,
Finalement je suis passé sur un autre plugin, à l'époque c'était le seul qui correspond à mes attentes mais j'ai réussi à en trouver un aussi bien, je n'avais pas vraiment le courage de me lancer dans tout un tas de modifications, ce plugin étant celui utilisant le JS Moontools ..

Merci