Soucis entre firefox et opera

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Soucis entre firefox et opera

Message par demeter1 le Mar 9 Oct 2012 - 17:47

Bonjour à tous,
Incompatibilité entre les navigateurs quand tu nous tiens geek

Alors, j'ai effectué une modification sur mon template memberlist_body pour obtenir un affichage de la liste des membres comme en PHPBB3 alors que je suis en phpbb2.

Mes modifs fonctionnent correctement sous firefox mais, apparemment opera me centre des éléments comme l'avatar ou les boutons du profil.

Des captures d'écran seront plus explicites

Sous firefox thumright


Sous opera Thumb down


Le bug doit très certainement provenir de mon css qui doit être bourré d'erreurs ::moitimide:: .

Le voici

Code:
/* ---- Modification de la liste des membres ---- */ 
    /* Boutons contact */

    .contactUsers {
  background :#6d900e;
    padding:2px;
    border-top: 1px solid #475803;
    margin-top: -45px;}

    .contactUsers img {
    width: auto;
    height: auto;}

    /* Tabel general */
    .infoUsers {
  background: rgba(152,153,106,0.2);
    margin-left: 55px;
    padding: 5px !important;
    top: -50px;
    position: relative;
font-family: Verdana,Arial,Helvetica,sans-serif; color : black;
}

    .tableUsers {
    box-shadow: 0px 0px 4px #ccc;
    background: #c2d454;
    border: 1px solid #475803;
    display: inline-table !important;
    width: 250px;
    font-size:11px;
    margin: 5px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
  color :#475803;
    border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 5px;
    -webkit-border-radius: 4px;}

    /* image avatar */

    .userAvatar img {
 
      border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  -khtml-border-radius : 3px;
    border: 1px solid #ddd;
    width: 50px;
    height: 50px;}

    .userAvatar img:hover { box-shadow: 0px 0px 4px #ccc;-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg); }

    /* pseudo des membres */

    .userNames {
    border-bottom: 1px solid #ddd;
    padding: 2px;
    margin-bottom: 4px;}

/* ---- FIN modification liste des membres---- */

Merci par avance à l'âme compatissante qui me donnera un coup de main pour régler ce soucis d'apparence;
Je fournis comme d'habitude un tube d'aspirine lol!


Dernière édition par demeter1 le Mer 10 Oct 2012 - 17:52, édité 1 fois

demeter1
+ Hyperactif +

Masculin
Messages : 8223
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis entre firefox et opera

Message par Manumanu le Mar 9 Oct 2012 - 20:14

Bonjour,

Alors, lorsque tu utilises des propriétés préfixées, il faut le faire dans un certain ordre ; à savoir en mettant la propriété finale en dernier. Il faut également penser à ne pas en oublier.

Donc lorsque tu fais :
Code:
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
Tu ne fournis d'instruction qu'à firefox (mozilla) et à Chrome/Safari (webkit), tu omets donc totalement IE et Opera.

En faisant ainsi, tu t'assures d'une part que chaque navigateur reçoive au moins une version préfixées (non stable) d'une propriété, et que si elle prend en charge la propriété finale (c'est le cas d'IE10), il utilise cette propriété en surclassant la propriété préfixée (puisqu'elle intervient ensuite). Note que les préfixes pour Internet Explorer (ms) sont rares, Microsoft préférant n'intégrer que des propriétés valides et terminées.

Code:
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);

Ceci est vrai pour toutes les propriétés encore non terminées, mais pour d'autres comme box-shadow et border-radius, tu peux directement te passer de propriétés préfixées et ne mettre que la propriété finale ; donc, tu peux retirer tes -moz-border-radius et -webkit-border-radius, et ne laisser que border-radius (et si tu ne les supprimes pas, mets ce dernier après les autres et non avant).

Fais donc déjà ça, et on y verra plus clair dans ton code. N'hésites pas à donner le lien du forum pour qu'on puisse vérifier également en "direct". Wink

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis entre firefox et opera

Message par demeter1 le Mer 10 Oct 2012 - 11:56

Bonjour Manumanu,
Tout d'abord, un grand merci pour cette aide.

Alors, voici le css retravaillé selon vos consignes

Code:
/* ---- Modification de la liste des membres ---- */ 
    /* Boutons contact */

    .contactUsers {
  background :#6d900e;
    padding:2px;
    border-top: 1px solid #475803;
    margin-top: -45px;}

    .contactUsers img {
    width: auto;
    height: auto;}

    /* Tabel general */
    .infoUsers {
  background: rgba(152,153,106,0.2);
    margin-left: 55px;
    padding: 5px !important;
    top: -50px;
    position: relative;
font-family: Verdana,Arial,Helvetica,sans-serif;
color : black;
}

    .tableUsers {
    box-shadow: 0px 0px 4px #ccc;
    background: #c2d454;
    border: 1px solid #475803;
    display: inline-table !important;
    width: 250px;
    font-size:11px;
    margin: 5px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
  color :#475803;
    border-radius: 4px;
    padding: 5px;
  }

    /* image avatar */

    .userAvatar img { 
      border-radius: 3px;   
    border: 1px solid #ddd;
    width: 50px;
    height: 50px;}

    .userAvatar img:hover {
box-shadow: 0px 0px 4px #ccc;
  -webkit-transform: rotate(15deg);
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -o-transform: rotate(15deg);
        transform: rotate(15deg); }

    /* pseudo des membres */

    .userNames {
    border-bottom: 1px solid #ddd;
    padding: 2px;
    margin-bottom: 4px;}

/* ---- FIN modification liste des membres---- */

Le lien du forum concerné
http://altitudetropicale.forums-actifs.com/





demeter1
+ Hyperactif +

Masculin
Messages : 8223
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis entre firefox et opera

Message par Manumanu le Mer 10 Oct 2012 - 16:21

On ne peut pas accéder à memberlist, crée un faux compte genre test / test que tu supprimeras après, pour que je puisse voir Wink

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis entre firefox et opera

Message par demeter1 le Mer 10 Oct 2012 - 17:08

Bonjour Manumanu, vous avez les identifiants de connexion dans ma dernière réponse. j'ai placé tout cela sous balise hide.
Merci encore pour votre aide.

demeter1
+ Hyperactif +

Masculin
Messages : 8223
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis entre firefox et opera

Message par Manumanu le Mer 10 Oct 2012 - 17:24

Ha, effectivement ; merci.

Alors, ça vient de la façon de positionner les éléments ; à vrai dire, je suis même étonné que Firefox et Chrome affichent ça correctement.

Trouve ceci :
Code:
.infoUsers {
background: rgba(152, 153, 106, 0.2);
margin-left: 55px;
padding: 5px !important;
top: -50px;
position: relative;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: black;
}

Et modifie-le comme suit :
Code:
.infoUsers {
   margin-left: 5px;
   overflow: hidden;
   background: rgba(152, 153, 106, 0.2);
   padding: 5px !important;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   color: black;
}

Ensuite, modifie ceci :
Code:
.contactUsers {
background: #6D900E;
padding: 2px;
border-top: 1px solid #475803;
margin-top: -45px;
}

Par ça :
Code:
.contactUsers {
   clear: left;
   text-align: left;
   background: #6D900E;
   padding: 2px;
   border-top: 1px solid #475803;
   margin-top: 10px;
}

Et enfin, ajoutes ceci :
Code:
.userAvatar {
   float: left;
}

Et ça devrait être tout bon.

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis entre firefox et opera

Message par demeter1 le Mer 10 Oct 2012 - 17:47

Manumanu, que dire si ce n'est Bravo2 Bravo2 Bravo2 .Tout fonctionne à merveille grâce à vous. ::fete:: ::fete:: ::fete:: ::fete:: Un grand , très grand merci pour cette aide .


Dernière édition par demeter1 le Mer 10 Oct 2012 - 17:48, édité 1 fois

demeter1
+ Hyperactif +

Masculin
Messages : 8223
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis entre firefox et opera

Message par Manumanu le Mer 10 Oct 2012 - 17:48

Je t'en prie, mais vraiment tu peux me tutoyer. Wink

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis entre firefox et opera

Message par demeter1 le Mer 10 Oct 2012 - 17:51

Pas de soucis Manumanu; l'habitude du vouvoiement mais dès qu'on me l'autorise, j'utilise volontiers le tutoiement.
Un grand merci pour cette aide inestimable. Je ne te fais pas la bise mais le cœur y est.

demeter1
+ Hyperactif +

Masculin
Messages : 8223
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis entre firefox et opera

Message par Manumanu le Mer 10 Oct 2012 - 17:53

Wink
Pense à mettre ton sujet en résolu et n'hésites pas à marquer les posts qui t'ont aidé, si jamais ça peut aider quelqu'un d'autre (bien que le sujet soit assez spécifique en fait).

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum