Déformation de mise en page et d’image sous Firefox (Créer un compte)

Bonjour les WordPressophiles,

Ma configuration WP actuelle : 3.8.1
– Version de PHP/MySQL : Je ne sais pas du tout
– Thème utilisé : Expositio
– Extensions en place : Contact Form 7
– Nom de l’hebergeur : 1and1
– Adresse du site : En cours
– Version de Firefox : 23.0.1
Problème(s) rencontré(s) : Déformation de mise en page et d’image sous Firefox
Solution(s) écartée(s) :
– Option de désactivation de mis en page css sous firefox (vérifié suite lecture de ce même blog)
– Versions de Firefox (testé sur plusieurs versions et sur plusieurs postes informatiques mais toujours sous OSX)
Piste(s) possible(s) :
– J’ai personnalisé mon fichier Style.CSS de mon WP en y ajoutant une fonction « fade in fade out »
– J’ai pu tester un plugin Firefox (grâce à un lien sur ce forum) Firebug qui me déclare un soucis comme l’indique l’image ci-dessous :

On y voit que ce plugin décèle un bug au niveau du html qui permet de partitionner mon écran en un bandeau bas noir et mon WP en haut. Mais est-ce bien la raison de mon bug d’affichage ? Comment le résoudre ?
Pour ma part je suis parfaitement incompétent pour y remédier seul.

Enfin voilà le rendu toujours sur Firefox et selon deux rafraichissements (car le soucis va et vient au grés des rafraichissement et toujours sur plusieurs postes). Via Chrome et Safari aucun soucis du genre.

SANS le bug :

AVEC le bug :

Et enfin ma feuille de style.css pour la lecture si besoin :

/*
Theme Name: Expositio Theme modifié par Cestquoiladresse
Author URI: http://www.wpshower.com
Description: Expositio est un template WordPress gratuit pour les photographes et les concepteurs. Le Template Expositio a été modifié par Cestquoiladresse
Author: Cestquoiladresse
Version: 1.0.1
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html
Copyright: (c) 2011 Wpshower
*/

@charset « UTF-8 »;
/* CSS Document */

/* Réinitialisation globale des alignements et des marges pour tous les éléments HTML */
*{ margin-left: auto; margin-right: auto; width: 850; padding: 0;}
/* Correction: réinitialisation marge / padding causant de trop de petites boîtes de sélection. */
option { padding-left: 0 0.4em; }
select { padding: 1px; }
/* Solution globale des Italique bugs dans IE 5.x et IE 6 */
* html body * { overflow:visible; }
* html iframe, * html frame { overflow:auto; }
* html frameset { overflow:hidden; }
html { height: 100%; }
/* default for body */
body { font-size:12px; color: #000;font-family: Arial, Verdana, Tahoma, Geneva, sans-serif; background: white; text-align: left; }

/* Lists */
ul li { margin:0; padding:0;}
ul.cls-menu li, ul.menu li { list-style:none;}

/*

---

DEBUT de la fonction d’animation des Images

---

*/
#images {
width: 630px;
}

#images a img {
opacity: 1.0;/* l’opacite que vous voulez au depart */
border: none;/* enlever les border d’une image en lien */
-ms-filter: « prodig:DXImageTransform.Microsoft.Alpha(Opacity=25) »; /* Hack IE8 */
filter: alpha(opacity = 25); /* Hack IE 5-7 */
-webkit-transition: opacity 0.5s ease-in-out;/* transition pour Chrome et Safari */
-moz-transition: opacity 0.5s ease-in-out;/* transition pour Firefox */
-o-transition: opacity 0.5s ease-in-out;/* transition pour Opéra */
transition: opacity 0.5s ease-in-out; /* on écrit cette ligne à la fin de façon à ce que ce soit elle qui soit prise en compte lorsque l’attribut transition sera pris en compte par tous les navigateurs */

}

#images a:hover img, #images a:focus img {
opacity: 0.5; /* opacite au survol */
-ms-filter: »prodig:DXImageTransform.Microsoft.Alpha(Opacity=90) »; /* Hack IE 8 */
filter: alpha(opacity = 90); /* Hack IE 5-7 */
}
/*

---

FIN de la fonction d’animation des Images

---

*/

/* Border background */
.Frame, .Ft, .Ftl, .Ftr, .Fb, .Fbl, .Fbr, .Fc { height:1%;}
.Frame { background-repeat:repeat-y; background-position:center; }
.Frame * { background-position:center; }
.Ft { background-position:top; background-repeat:no-repeat;}
.Fb { background-position:bottom; background-repeat:no-repeat}
.Ftl { background-position:top left; background-repeat:no-repeat;}
.Ftr { background-position:top right; background-repeat:no-repeat;}
.Fbl { background-position:bottom left; background-repeat:no-repeat;}
.Fbr { background-position:bottom right; background-repeat:no-repeat;}

/* Modèles communs */
/* Par défaut pour les liens */
a { color:#000; background:transparent; text-decoration:none; }
a:focus, a:hover { font-weight: none;color:#707173;}
.f-left { float: left;}
.f-right { float: right;}
.clr { clear: both; background: url(‘./_css/blank.gif’) repeat-x; height: 0px;}
.notext-left { text-indent: -9999px;}
.notext-right { text-indent: 9999px;}

/* Modèles de site Web se trouvent sous */
body { background: white; color: #000; font-size: 13px; margin-top: 0; font-family: « Helvetica Neue », Helvetica, Arial;}
#wps-site-wrapper {}
#wps-site-inner { }

h1 { font-size: 13px; font-weight: bold; margin-bottom: 20px; line-height: 20px;}
h2 { font-size: 13px; font-weight: bold; margin-bottom: 20px; line-height: 20px;}
h4 { font-size: 13px; font-weight: bold; line-height: 20px;}
h5 { font-size: 13px;}

/* -_-_-_-_-_-_-_-_-_-__-_-_DÉBUT aspect des pages des marges de la barre latérale-_-_-_-_-_-_-_-_-_-_-_-_-_ */

#wps-sidebar { position: fixed; top: 0px; left: 40px; width: 220px; padding: 0px 14px 6px 14px; z-index: 10; background: white; line-height: 15px; height: 100%; }
#wps-sidebar h1 { padding: 0 6px;}
#wps-sidebar h2 { padding: 0 6px;}
#wps-sidebar h4 { padding: 0 6px;}
/* -_-_-_-_-_-_-_-_-_-__-_-_FIN aspect des pages des marges de la barre latérale-_-_-_-_-_-_-_-_-_-_-_-_-_ */

/* -_-_-_-_-_-_-_-_-_-__-_-_DÉBUT aspect des pages du Menu de la barre latérale-_-_-_-_-_-_-_-_-_-_-_-_-_ */
.wpscls-menu-main {margin-bottom: 20px;}
/* Début aspect bouton de liste */
.wpscls-menu-main li { list-style: none;}
/* Fin aspect bouton de liste */
.wpscls-menu-main li a { padding: 1px 6px; display: block;}
/* Début aspect titre menu survolé */
.wpscls-menu-main li a:hover { font-weight: none;color:#707173;}
/* Fin aspect titre menu survolé */
/* Début aspect titre menu préalablement sélectionné */
.wpscls-menu-main li.current-menu-item a {font-weight: bold;}
/* Fin aspect titre menu préalablement sélectionné */
/* -_-_-_-_-_-_-_-_-_-__-_-_FIN aspect des pages du Menu de la barre latérale-_-_-_-_-_-_-_-_-_-_-_-_-_ */

/* -_-_-_-_-_-_-_-_-_-__-_-_DÉBUT aspect des articles du Menu de la barre latérale-_-_-_-_-_-_-_-_-_-_-_ */
.wpscls-cate-post {margin-bottom: 20px;}
.wpscls-cate-post ul { margin-bottom: 20px;}
/* Début aspect bouton de liste */
.wpscls-cate-post ul li { list-style: none ;}
/* Fin aspect bouton de liste */
.wpscls-cate-post ul li a { padding: 1px 6px; display: block;}
/* Début aspect titre menu survolé */
.wpscls-cate-post ul li a:hover { font-weight: none;color:#707173;}
/* Fin aspect titre menu survolé */
/* Début aspect titre menu préalablement sélectionné */
.wpscls-cate-post ul li a.current { font-weight: bold;}
/* Fin aspect titre menu préalablement sélectionné */

/* -_-_-_-_-_-_-_-_-_-__-_-_FIN aspect Menu de la barre latérale-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ */

table.cls-table-gallery { margin: 60px 0 0 300px;}
table.wpscls-with-content { }
table.cls-table-gallery td { vertical-align: top; padding-right: 28px;}
table.cls-table-gallery td.wpscls-post-content { }
table.cls-table-gallery td.wpscls-post-content h2 { width: 450px; padding: 0 3px; margin-top: -2px;}
table.cls-table-gallery td.wpscls-post-content .wpscls-field-content { width: 450px; padding: 0 3px 16px 3px; line-height: 20px;}
table.cls-table-gallery td.wpscls-post-content .wpscls-field-content p { margin-bottom: 20px; }
table.cls-table-gallery td.wpscls-post-content .wpscls-field-content h1 { padding: 21px 0 21px 0; margin-bottom: 0; font-size: 21px; line-height: 26px;}
table.cls-table-gallery td.wpscls-post-content .wpscls-field-content h2 { padding: 18px 0 18px 0; margin-bottom: 0; font-size: 18px; line-height: 23px;}
table.cls-table-gallery td.wpscls-post-content .wpscls-field-content h3 { padding: 16px 0 16px 0; margin-bottom: 0; font-size: 16px; line-height: 21px;}
table.cls-table-gallery td.wpscls-post-content .wpscls-field-content img { margin: 6px 0;}
table.cls-table-gallery td.wpscls-post-content .wpscls-field-content img.alignright { margin-left: 8px; float: right;}
table.cls-table-gallery td.wpscls-post-content .wpscls-field-content img.alignleft { margin-right: 8px; float: left;}
table.cls-table-gallery td img {}
table.cls-table-gallery td h5 { font-weight: normal; line-height: 20px; margin: 10px 0 4px 0;}

.wpscls-copyright {padding: 0px 6px;}
.wpscls-copyright a {}
.wpscls-copyright a:hover { font-weight: none;color:#707173;}

Aux plaisirs de pouvoir un jour répondre pour vous sur ce forum

Christophe