Soucis entre firefox et opera

2 participants

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

Résolu Soucis entre firefox et opera

Message par demeter1 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
Soucis entre firefox et opera Sous_f10

Sous opera Thumb down
Soucis entre firefox et opera Sous_o10

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

demeter1
Membre actif

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

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

Résolu Re: Soucis entre firefox et opera

Message par Manumanu 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

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 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

demeter1
Membre actif

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

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

Résolu Re: Soucis entre firefox et opera

Message par Manumanu 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

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 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

demeter1
Membre actif

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

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

Résolu Re: Soucis entre firefox et opera

Message par Manumanu 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

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 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

demeter1
Membre actif

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

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

Résolu Re: Soucis entre firefox et opera

Message par Manumanu Mer 10 Oct 2012 - 17:48

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

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 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

demeter1
Membre actif

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

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

Résolu Re: Soucis entre firefox et opera

Message par Manumanu 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

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

- Sujets similaires

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