Problème de marges différentes sur Firefox

[Snow White]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Toujours
Lien du forum : https://unforumtestcpasassez.forumactif.com/

Description du problème

Bonsoir!

Je reviens vers vous suite à l'apparition d'un nouveau problème ^^" J'ai fait quelques recherches sans parvenir à régler le souci. La PA/QEEL sous la bannière du forum a des marges décalées sur Firefox, ce qui n'est pas super esthétique... Nous avons pas mal de personnes utilisant Firefox, du coup c'est un peu embêtant. Ma PA est très mal codée, j'ai placé les éléments avec des marges par ce qu'ils ne voulaient pas s'agencer les uns par rapport aux autres, du coup je suppose que le problème vient de là (du moins c'est ce que j'ai compris en faisant des recherches). Je voulais savoir s'il y avait un moyen de définir des marges propres à Firefox (j'ai tenté d'utiliser -moz-margin-start/end sans succès). J'ai tenté de reprendre le code mais j'arrive toujours au même résultat, je ne sais pas quoi faire pour régler le problème ^^"

Template :

Code:

<!-- BEGIN disable_viewonline -->
<!-- SUPER PARTENAIRES --><iframe class="topPA" src=" https://otherlands.forumactif.com/h3-toppartenaires" scrolling="no" width="auto" height="auto" frameborder="0"></iframe>

<!-- PA BG -->
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
<div class="PABGFULL">
  
<!--                TOP-SITES                -->
<div class="TSGOM">
                      
 <!--                I                --><a target="_blank" href="http://www.root-top.com/topsite/virtu4lgames/in.php?ID=6051">1</a>              
 <!--                II                --><a target="_blank" href="http://www.root-top.com/topsite/virtu4lhunt3r/in.php?ID=2927">2</a>          
 <!--                III                --><a target="_blank" href="http://en.root-top.com/toplist/chenshen/in.php?ID=1492">3</a>              
 <!--                IV                --><a target="_blank" href="http://www.root-top.com/topsite/justmarried/in.php?ID=822">4</a>              
 <!--                V                --><a target="_blank" href="http://www.root-top.com/topsite/gilgamesh/in.php?ID=8183">5</a>  
  </div>
 
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><div class="QEEL"> <div class="titlePA">What's up in the <span class="titlePA2">Otherlands ?</span></div>
<!-- ACTUALITES --><div class="newBOX"><iframe src="https://unforumtestcpasassez.forumactif.com/h2-news" scrolling="no" width="350px" height="auto" frameborder="0"></iframe></div>
  
  <!-- TOTAL MESSAGES --><div class="tlPQEEL"><span id="tPOSTS"><b>{TOTAL_POSTS}</b></span><script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/messages/," ");</script>messages </div><!-- TOTAL MEMBRES --><div class="tlMQEEL"><span id="tUSERS"><b>{TOTAL_USERS}</b></span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre(s?) enregistré(s?)/," ");</script>membres</div>

<!-- LIENS - MEMBRES EN LIGNE - GROUPES -->
  <div class="boxLKS"><!-- 5 LIENS -->
    <div class="lksQEEL">
      <!-- --><a href="http://otherlands.forumactif.com/t25-reglement#72" target="_blank">Règlement</a>
      <!-- --><a href="https://otherlands.forumactif.com/t2-contexte" target="_blank">Contexte</a>
      <!-- --><a href="http://otherlands.forumactif.com/t11-les-royaumes" target="_blank">Groupes</a>
      <!-- --><a href="http://otherlands.forumactif.com/t12-les-races" target="_blank">Races</a>
      <!-- --><a href="http://otherlands.forumactif.com/t1-staff-et-credits#71" target="_blank">Staff et Crédits</a>
      <!-- --><a href="http://otherlands.forumactif.com/t14-devenir-partenaire" target="_blank">Partenariats</a>
      <!-- FIN LIENS --></div></div>

  <!-- PREDEFINIS & DERNIER MEMBRE - PREDEFINIS --><iframe class="pfQEEL" src="https://unforumtestcpasassez.forumactif.com/h3-predefinis" scrolling="no" width="auto" height="auto" frameborder="0"></iframe>

<!-- MEMBRES CONNECTES --><div class="onlineQEEL" id="onLINE"><div id="TLUS"><span id="gensmall">{TOTAL_USERS_ONLINE}
      <script type="text/javascript">document.getElementById('gensmall').innerHTML=document.getElementById ('gensmall').innerHTML.replace(/Il y a en tout/,"Il y a");
  </script></span>
  </div>
  
  <div class="txtCOmbrs">{LOGGED_IN_USERS_LIST}</div><script type="text/javascript">document.getElementById('onLINE').innerHTML=document.getElementById('onLINE').innerHTML.replace(/Utilisateurs enregistrés :/," ")</script></div>
  
   <!-- DERNIER UTILISATEUR ENREGISTRE --><div class="lstQEEL"><div class="titleLAST">Hellcome <span id="nUSER">{NEWEST_USER}</span></div><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script></div></div>
  
  <!-- 24H --><div class="dayQEEL"><table>{L_CONNECTED_MEMBERS}</table></div>

    <!-- STAFF --><iframe id="staffQEEL" src=" https://unforumtestcpasassez.forumactif.com/h4-staff-pa" scrolling="no" width="auto" height="auto" frameborder="0"></iframe>

<!-- NOMS GROUPES --><script type="text/javascript" src="https://sd-1.archive-host.com/membres/up/211183412958130190/onglets.js"></script><div class="GQEEL"><!-- GROUPE 1 --><span class="onglet_0 onglet" id="onglet_eins" onmouseover="javascript:change_onglet('eins');" style="color:#9f86c1;">Wonderland</span><!-- GROUPE 2 --><span class="onglet_0 onglet" id="onglet_zwei" onmouseover="javascript:change_onglet('zwei');" style="color:#86adc1;">Mêmeland</span><!-- GROUPE 3 --><span class="onglet_0 onglet" id="onglet_drei" onmouseover="javascript:change_onglet('drei');" style="color:#9f9f9f;">Lostland</span><!-- GROUPE 4 --><span class="onglet_0 onglet" id="onglet_vier" onmouseover="javascript:change_onglet('vier');" style="color:#cb86c9;">Dictatures Castor</span><!-- GROUPE 5 --><span class="onglet_0 onglet" id="onglet_funf" onmouseover="javascript:change_onglet('funf');" style="color:#0080FF;">...</span><!-- AJOUTER LES NOMS SUPPLEMENTAIRES AVANT CE COMMENTAIRE --></div>

<!-- DESCRIPTIONS GROUPES --><div class="blocGQEEL"><!-- GROUPE I --><div class="contenu_onglet" id="contenu_onglet_eins"><!-- CONTENU --><div>Royaume de la Reine Blanche, Wonderland est un royaume pur où les habitants vivents en harmonie... Du moins en principe. Le royaume est en guerre avec Mêmeland.</div><!-- ALIGNEMENT --><div></div></div><!-- GROUPE II --><div class="contenu_onglet" id="contenu_onglet_zwei"><!-- CONTENU --><div>Les joyeux lurons des Otherlands, Mêmeland est un pays où il fait bon vivre, décors de cinéma, fast foods, modernité, tout ce qu'il faut pour se sentir bien en somme. Le royaume est en guerre avec Wonderland.</div><!-- ALIGNEMENT --><div></div></div><!-- GROUPE III --><div class="contenu_onglet" id="contenu_onglet_drei"><!-- CONTENU --><div>Royaume abandonné, Lostland est une contrée livrée à elle-même où les habitants désirant garder leur âme se sont réfugiés pour fuir les guerres déchirant les royaumes.</div><!-- ALIGNEMENT --><div></div></div><!-- GROUPE IV --><div class="contenu_onglet" id="contenu_onglet_vier"><!-- CONTENU --><div>Groupe de PNJs du forum.</div><!-- ALIGNEMENT --><div></div></div><!-- GROUPE V --><div class="contenu_onglet" id="contenu_onglet_funf"><!-- CONTENU --><div>A venir</div><!-- ALIGNEMENT --><div></div></div><!-- AJOUTER LES DESCRIPTIONS SUPPLEMENTAIRES AVANT CE COMMENTAIRE --></div>

    <script type="text/javascript">
                //<!--
                        var anc_onglet = 'eins';
                        change_onglet(anc_onglet);
                //-->
 </script></div></td></tr></table>
  
<div class="titlePA3">Les <span class="titlePA2">Rumeurs</span></div>
<!-- RUMEURS --><div class="newBOX1"><iframe src=" https://unforumtestcpasassez.forumactif.com/h5-rumeurs" scrolling="no" width="140" height="auto" frameborder="0"></iframe></div>

 
</div></td></tr></table>

<!-- LIENS INDEX --><div class="lksINDEX"><a href="{U_MARK_READ}">Marquer les forums comme lus</a><a href="{U_TODAY_ACTIVE}">Sujets du jour</a><a href="{U_TODAY_POSTERS}">Posteurs du jour</a><a href="{U_OVERALL_POSTERS}">Meilleurs posteurs du forum</a></div>
 

<!-- END disable_viewonline -->

CSS

Code:

/* BLOC SUPER-PARTENAIRES */
.topPA {
position:absolute; z-index:3; left:15px;
height:195px;
  margin-top: 220px;
}
/* QEEL & PA */
/*PA*/
.PABGFULL{width: 100%;
  Max-width: 100%;
  overflow-x: auto;
 overflow-y: hidden;
  height: 225px;
  background: #171717;
  background-image: url(https://zupimages.net/up/20/51/evba.png);
  background-size: 100%;
  position: absolute;
  background-repeat: no-repeat;
  margin-top: -20px;
  right: 0;
  -webkit-box-shadow: 0px 4px 17px 3px rgba(0,0,0,0.56);
-moz-box-shadow: 0px 4px 17px 3px rgba(0,0,0,0.56);
box-shadow: 0px 4px 17px 3px rgba(0,0,0,0.56);
  z-index: 0;
}

.TSGOM {
 vertical-align:middle; margin-top: 15px;
  width: 20px; margin-left: 20px;display:inline-block;
}
.TSGOM a {
 margin-right:10px; margin-top:7px;
width:18px; height:18px; padding:5px; padding-left: 5px; padding-right: 5px; border-radius: 18px; background: #9ba8a0;
text-align:center; text-decoration:none !important; font-size:10px; font-family:verdana;font-weight: bold; line-height:18px; border: 2px solid black; color:#000000; /* MODIFIABLE */display:inline-block;
}
.TSGOM a:hover {
background:#65252b; color:#9ba8a0;
  transition-duration: 0.8s;
}

/* QEEL & PA */
/* ACTUALITES QEEL */
.txtCOmbrs{font-size: 10px;
}
.newBOX{
  background: #9ba8a0;
  width: 390px;
  height: 120px; z-index: 10;
  margin-top: -6px;
  border: none;
  box-shadow: none;
  overflow: auto;
  padding: 5px;
}
.newBOX1{
  background: #9ba8a0;
  width: 157px;
  height: 150px; z-index: 10;
  margin-top: -3px;
  border: none;
  box-shadow: none;
  overflow: auto;
  padding: 5px;
  margin-left: 1735px;
}
.titlePA{
font-family: 'Big Shoulders Text';  
color: #9ba8a0; font-weight: bold;text-transform:uppercase;
  font-size: 38px;
}
.titlePA2{
color: #171717;
}
.titlePA3{
font-family: 'Big Shoulders Text';  
color: #9ba8a0; font-weight: bold;text-transform:uppercase;
  font-size: 36px;
  margin-left: 1734px;
  margin-top: -195px;
  height: 40px;
}
.titleLAST{
font-family: 'Big Shoulders Text';  
color: #9ba8a0; font-weight: bold;text-transform:uppercase;
  font-size: 28px;
}
.QEEL {
margin-bottom:10px;
  margin-top: -193px;
  margin-left: 285px;
text-align:left; font-family:Arial;z-index: 9;
  -moz-margin-start: 275px;
}
/* BLOCS POSITIONNEMENT */
.boxQEEL {
display:inline-block; vertical-align:top; text-align:left;
}
.boxIIQEEL {
display:inline-block; vertical-align:top;
width:300px; text-align:left;
}
/* BLOC LIENS PA */
.lksQEEL {
display:inline-block; vertical-align:top;
width:145px !important; padding:0; text-align:right;
}

/* LIENS PA */
.lksQEEL a {
display:block; margin-bottom:5px;
height:18px; padding:5px; overflow:hidden;
background:#9ba8a0; color:#171717; /* MODIFIABLE */
font-size:18px; text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-family: 'Big Shoulders Text';  
 font-weight: bold; width:180px;
}

.lksQEEL a:hover {
background:#65252b; color:#9ba8a0;
  transition-duration: 0.8s;
}

/* BLOCS POSITIONNEMENT */
.boxLKS{
 display:inline-block; vertical-align:top;
  margin-top: -165px; margin-left: 10px;
}

.boxQEEL {
display:inline-block; vertical-align:top; text-align:left;
}
.boxIIQEEL {
display:inline-block; vertical-align:top;
width:300px; text-align:left;
}

/* MEMBRES CONNECTES QEEL */
.onlineQEEL {
display:inline-block; vertical-align:top; margin-top: -165px;
  margin-left: -22px;
width:340px; height:50px; padding:10px; overflow-y:auto;
font-size:18px; text-align:justify; text-transform:uppercase;
background:#9ba8a0; color:#171717; /* MODIFIABLE */
    color:black; /* MODIFIABLE */
}
/* NOMBRE UTILISEURS EN LIGNE QEEL */
#TLUS {
margin-bottom:5px; padding-bottom:5px; border-bottom:1px solid #171717;
 color:#171717; /* MODIFIABLE */
font-size:9px; text-align:center;
}
/* BLOC NOMS GROUPES QEEL */
.GQEEL {
margin-top: -210px; margin-left: 1395px;
width:330px; height:33px; padding:8px 0 7px; overflow:hidden; text-align:center;
background:none; color:#171717; /* MODIFIABLE */  
}
/* NOM GROUPE QEEL */
.onglet {
display:inline-block; margin:0 5px;
font-family: 'Big Shoulders Text';  
color: #171717; font-weight: bold;text-transform:uppercase;
  font-size: 16px;
filter:grayscale(1); -webkit-filter:grayscale(1);
transition:all 0.75s linear; -webkit-transition:all 0.75s linear;
}
/* SURVOL NOM GROUPE QEEL */
.onglet_1 {
filter:grayscale(0); -webkit-filter:grayscale(0);
}
/* BLOC DESCRIPTIONS GROUPES QEEL */
.blocGQEEL {
display:inline-block; vertical-align:top;
width:330px; height:93px; overflow:hidden;
background:#9ba8a0; color:#171717; /* MODIFIABLE */margin-left: 1395px;
  position: absolute;
}
.contenu_onglet {
display:none;
}
/* DESCRIPTIONS GROUPES */
.contenu_onglet div {
display:inline-block; vertical-align:middle;
width:310px; padding:0 10px; overflow:hidden;
text-align:justify; font-size:9px; font-family:Arial;
color:#171717; /* MODIFIABLE */
}
.contenu_onglet div:nth-of-type(2) {
display:inline-block; vertical-align:middle;
width:0; height:83px; padding:0;
}
/* 24H QEEL */
.dayQEEL {
display:inline-block; vertical-align:top; margin-top: -162px; margin-left: 1025px;
width:350px; height:83px; padding:5px; overflow-y:auto;
text-align:justify; font-size:11px; text-transform:uppercase;
background:#9ba8a0; color:#171717; /* MODIFIABLE */
}
.dayQEEL .row1 {
background:none; padding:0 !important;
}
/* COULEUR TEXTE 24H QEEL */
.dayQEEL .gensmall {
font-family:Arial; font-size:10px;
color:#171717; /* MODIFIABLE */
}
/* STAFF QEEL */
#staffQEEL{
width: 400px;
  margin-left: 3px;
  margin-top: -270px;
  position: absolute;
  -moz-margin-start: 10px;
}

/* TOTAL MESSAGES QEEL */
.tlPQEEL {
display:inline-block; vertical-align:top; margin-left:175px;
width:auto; height:50px; padding-top:0px; overflow:hidden;
text-align:right; text-transform:uppercase; line-height:normal; font-family: 'Big Shoulders Text';  
color: #171717; font-weight: bold; margin-top:-4px;
  font-size: 28px;
}
.tlPQEEL b {
font-size:28px;
}
/* TOTAL MEMBRES QEEL */
.tlMQEEL {
display:inline-block; vertical-align:top; margin-left:10px;
width:auto; height:50px; padding-top:0px; overflow:hidden;
text-align:right; text-transform:uppercase; line-height:normal; font-family: 'Big Shoulders Text';  
color: #9ba8a0; font-weight: bold;
  font-size: 28px;margin-top:-4px;
}
.tlMQEEL b {
font-size:28px;
}
/* BLOC PREDEFINIS QEEL */
.pfQEEL {
display:inline-block; vertical-align:top; margin-left: 47px;
width:160px; height:250px; padding:10px 0; margin-top: -185px;
color:#a49071; background: transparent; /* MODIFIABLE */
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
display:inline-block; vertical-align:top;
width:380px; height:35px; overflow:hidden;
text-align:right; text-transform:uppercase; line-height:28px;
  margin-left: -378px;
  margin-top: -95px;
}

/* BLOC LIENS FORUMS LUS / SUJETS & POSTEURS DU JOUR */
.lksINDEX {
margin:5px auto; margin-left: 2px;
width:852px; padding:5px 0 5px 5px;
text-align:center; font-family:Arial;
color:#a49071; /* MODIFIABLE */
  margin-top:210px;
  position: absolute;
}
/* LIENS FORUMS LUS / SUJETS & POSTEURS DU JOUR */
.lksINDEX a {
display:inline-block; vertical-align:top; margin-right:5px;
width:208px; padding:2px 0 1px;
text-align:center; font-size:9px; text-transform:uppercase; line-height:12px;
background:#9ba8a0; color:#171717; /* MODIFIABLE */
}

Merci d'avance! :3
EDIT: Et mon message a fini au mauvais endroit je crois, vraiment désolé, je ne peux pas le supprimer... ><

[Snow White]

Un petit up ! ^^
(Je ne sais pas si quelqu'un peut déplacer mon sujet dans la bonne section "problème avec un code/script" au passage, j'ai fait une bourde en postant, merci d'avance et désolée !)

[Chacha]

Un petit up ! ^^
(Je ne sais pas si quelqu'un peut déplacer mon sujet dans la bonne section "problème avec un code/script" au passage, j'ai fait une bourde en postant, merci d'avance et désolée !)

Bonjour @Snow White,

Voilà qui est fait.

Cordialement.

[Snow White]

Bonjour !
Merci beaucoup!
Bonne journée !

[Snow White]

Un nouveau UP!

[Snow White]

Et un autre up! o/

[Snow White]

Un autre petit up!

[Snow White]

Et un UP! (Joyeuses fêtes à tous! )

[Snow White]

UP! :3

[Snow White]

Up :3

[Snow White]

Up

[Snow White]

Up !

[Snow White]

Up!

[Snow White]

Up!

[Snow White]

Et up !

[Snow White]

Up, personne n'aurait une piste ?

[Electric Soul]

Firefox et Chrome n'ont pas exactement les mêmes affichages, Chrome par exemple a tendance à afficher le texte en plus petit que Fox. Je suis sur Fox et malheureusement, ta PA n'est pas du tout adaptée aux écrans type 15 pouces, j'ai une grande barre de défilement horizontale =/ Je te dirais peut-être de travailler en % plutôt qu'en px ? Aussi, c'est un peu casse-gueule de tout travailler en tableaux =/ Essaie peut-être de coder en display inline-block ou flexbox ? Tu auras probablement moins de soucis car déplacer tes blocs avec des margin -XXX c'est pas le mieux, en effet. Mais ça impliquera de totalement repenser ta façon de coder ta PA. Courage à toi, j'espère que ça t'aidera !

[Snow White]

Merci beaucoup pour cette piste ! Je vais essayer ça ! (Et tenter d'en comprendre le fonctionnement je suis un peu une quiche hahaha) en tous cas c'est super d'avoir une piste à explorer ^^

[Chacha]

Bonjour, Attention, cela fait 7 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.