Problème au niveau de l'apparence du qui est en ligne pour les utilisateurs, utilisant le navigateur Mozilla Firefox.

[Misery Mind™]

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 : Plusieurs utilisateurs
Problème apparu depuis : Vendredi 29 janvier
Lien du forum : http://freaksnation.bbfr.net/

Description du problème

Bonjour, je viens vers vous car certains utilisateurs utilisant firefox on constaté un problèmes survenant au niveau de l'apprendre du qui est en ligne alors que les autres navigateurs ( le mien par exemple : google chrome) nous n'avons pas de problème. Le problème ce situ au niveau de la liste des membres connectés aux cours des 24h elle semble "chevauché" l'autre bloc du milieux. Ainsi, j'aurais besoin de votre aide pour régler ce léger désagrément ! (Merci d'avance) voici les codes du qui est en ligne:

CSS :

Code:

/*********************************QEEL*******************************************/

.bordure_qeel {
    height: 273px;}

.titre_qeel {
    background-image: url('http://i65.tinypic.com/eqb385.png');
    background-color: #e2e2df;
    opacity: 0.7;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-family: Oswald;
    text-transform:uppercase;
    color: #9a8b7b;
    padding: 22px;
    position: relative;
    font-size: 31px;
    text-align: right;
    height: 56px;
    padding-top: 42px}

.bloc_groupe {
    background-color: #f9f9f9;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    height: 24px;
    padding-top: 2px;
    text-align: center;}


.groupe1{color:#a99872 !important; 
  border: 0 none !important;
    font-size: 17px !important;
    text-transform:uppercase;
    font-family: Oswald;
    font-weight: lighter !important;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #EEEEEE;
  padding-right:3px;margin-bottom:5px;}

.groupe2{
    border: 0 none !important;
    color: #c7a963!important;
    font-size: 17px !important;
    text-transform:uppercase;
    font-family: Oswald;
    font-weight: lighter !important;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #EEEEEE;
  padding-right:3px;margin-bottom:5px;}

.groupe3{ 
  border: 0 none !important;
    color: #79424c!important;
    font-size: 17px !important;
    text-transform:uppercase;
    font-family: Oswald;
    font-weight: lighter !important;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #EEEEEE;
  padding-right:3px;margin-bottom:5px;}

.groupe4{ 
  border: 0 none !important;
    color: #bb5357!important;
    font-size: 17px !important;
    text-transform:uppercase;
    font-family: Oswald;
    font-weight: lighter !important;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #EEEEEE;
  padding-right:3px;margin-bottom:5px;}

.groupe5{ 
    border: 0 none !important;
    color:#8C6153 !important;
    font-size: 17px !important;
    text-transform:uppercase;
    font-family: Oswald;
    font-weight: lighter !important;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #EEEEEE;
  padding-right:3px;margin-bottom:5px;}


.groupe6 {
  border: 0 none !important;
    color: #c94a00!important;
    font-size: 17px !important;
    text-transform:uppercase;
    font-family: Oswald;
    font-weight: lighter !important;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #EEEEEE;
  padding-right:3px;margin-bottom:5px; }

.groupe7 {
  border: 0 none !important;
    color: #D6A145!important;
    font-size: 17px !important;
    text-transform:uppercase;
    font-family: Oswald;
    font-weight: lighter !important;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #EEEEEE;
  padding-right:3px;margin-bottom:5px; }

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: none;
    cursor: auto;}

.online_24h_block {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    float: left;
    padding: 5px;
    font-size: 10px;
    text-transform: uppercase;
    font-family: Oswald;
    height: 167px;
    margin-top: 13px;
    overflow: hidden;
    padding: 4px;
    width: 295px;}
td.row1 { vertical-align: top; }

.titre_24h {
    font-size: 16px;
    text-align: right;
    font-family: Oswald;
    border-bottom: solid 2px #a49790;
    color: #9a8b7b;}

.online_block {
    height: 58px;
    overflow: auto;}

.membres_24_table {
    background-color: #f9f9f9;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    color: #293D69;
    font-family: arial;
    font-size: 10px;
    display:block;
    height: 70px!important;
    margin-top: -149px;
    overflow: auto;
    padding: 7px;
    text-align: justify;
    vertical-align: top;
    max-height: 86px !important;
    max-width: 300px !important;
    width: 300px !important;}

.block_milieu {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    float: left;
    width: 509px;
    margin-top: -175px;
    margin-left: 310px;}

.premier_block_texte {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    float: left;
    width: 199px;
    text-align: justify;
    background-color: #f9f9f9;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    font-size: 10px;
    padding: 10px;
    height: 72px;}

.img_block_qeel {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    float: left;
    width: 130px;
    background-color: #f9f9f9;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    height: 92px;
    margin-left: 4px;}

.imgQueel_int{
  width:130px;
  border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

.block_dernier_membre {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    float: left;
    width: 352px;
    background-color: #e2e2df;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    text-transform:uppercase;
    color: #ffffff;
    height: 79px;
    margin-top: 4px;
    margin-left: 1px;}

.texte_dernier_membre {
font-size: 10px;
    font-family: Oswald;
    margin-top: 21px;
    color: #a49790;
    border-bottom: solid 2px #a49790;
    width: 338px;
    text-align: center;}
.pseudo_dernier_membre {
    text-align: center;
    margin-top: 6px;
    font-size: 22px;}

.credits_block {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 150px;
    float: right;
    margin-top: -174px;
    background-color: #f9f9f9;
        box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    height: 174px;}

.block_credit_haut {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 141px;
    height: 130px;
    padding: 5px;
    text-align: justify;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    border-bottom: solid 1px #a49790;
    font-size: 9px;}

.block_credit_bas {
    text-align: center;
    color: #9a8b7b;
    font-family: Oswald;
    text-transform: uppercase;}

templates :

Code:


<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <header class="titre_qeel">QUI EST EN LIGNE ?</header>
      <div class="bordure_qeel">
         <div class="bloc_groupe">
                             <center>
                    <a href="http://freaksnation.bbfr.net/g3-genetic-syndrome" target="_blank" class="groupe1">Genetic syndrome</a> 
                 
                    <a href="http://freaksnation.bbfr.net/g6-human-syndrome" target="_blank" class="groupe2">Human syndrome</a> 
                 
                    <a href="http://freaksnation.bbfr.net/g5-bad-company" target="_blank" class="groupe3">Bad compagny</a> 
                   
                    <a href="http://freaksnation.bbfr.net/g4-kiss-my-gun" target="_blank" class="groupe4">Kiss my gun</a> 
                 
                    <a href="http://freaksnation.bbfr.net/g13-la-legion-d-ares" target="_blank" class="groupe6">La légion d'Arès</a> 
                   
                    <a href="http://freaksnation.bbfr.net/g7-master-in-chief" target="_blank" class="groupe5">Master in chief</a> 
                   
                    <a href="http://freaksnation.bbfr.net/g15-conclave" target="_blank" class="groupe7">Le Conclave</a> 
                     
                     
                </center>
         </div>
         <div class="online_24h_block">
            <div class="online_block">{TOTAL_USERS_ONLINE} <br />{LOGGED_IN_USER_LIST}</div>
            <div class="24h_block">
                                  <div class="titre_24h">DERNIERES 24h</div>
                                </div>
          </div>
                          <div class="block_pseudo">
                                    <table class="membres_24_table">
                                        {L_CONNECTED_MEMBERS}
                                    </table>
                              </div>
               
                     
         <div class="block_milieu">
            <div class="premier_block_texte">
                Bienvenue à Washington DC, lieu où règnent Adrian Docanov et ses sbires dans le plus grand secret. Actuellement, il y a eu <span id="total_posts">{TOTAL_POSTS}</span>
               <script type="text/javascript">document.getElementById('total_posts').innerHTML=document.getElementById('total_posts').innerHTML.replace(/Nos membres ont posté un total de/,"").replace(/messages/,"petits mots");
               </script> échangés entre les citoyens de Washington DC. Nous avons <span id="toto_membres">{TOTAL_USERS}</span>
               <script type="text/javascript">document.getElementById('toto_membres').innerHTML=document.getElementById('toto_membres').innerHTML.replace(/Nous avons/,"").replace(/membre enregistré/,"personne(s)");
               </script> qui se sont installés dans la ville aux mille et un dangers.
            </div>
            <div class="img_block_qeel"><img class="imgQueel_int" src="http://john-steppling.com/wp-content/uploads/2012/11/American_Flag_waving.jpg"/></div>
            <div class="block_dernier_membre">
               <center><div class="texte_dernier_membre">MERCI D'ACCUEILLIR NOTRE NOUVEAU MEMBRE DU NOM DE</div></center>
               <div class="pseudo_dernier_membre"><span id="nb_newest">{NEWEST_USER}<script type="text/javascript">document.getElementById('nb_newest').innerHTML=document.getElementById('nb_newest').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");</script></span></div>
            </div>
         </div>
         <div class="credits_block">
                          <div class="block_credit_haut"> <b>FREAK'S NATION © 2015 /2016</b>  <br />
                            Nanou, Misery Mind et Miwaki toute reproduction partielle ou totale est interdite.<br />
                            Catégories © Sephii33 de Arcadia<br />
                            Queel © Sephii33 de Arcadia<br />
                            Mise en page © Misery Mind <br />
                            PA © Misery Mind <br />
                          Design v7  ©  visenya. de Bazzart</div>
            <div class="block_credit_bas">Crédits</div>
         </div>
      </div>
</table>
<!-- END disable_viewonline -->

[MlleAlys]

Bonjour,

Les utilisations de float ne sont pas toujours évidentes, et utiliser des marges pour positionner des éléments conduit vite à quelques problèmes selon les navigateurs puisqu'elles ne sont au départ pas faites pour ça. Si on ajoute quelques incohérences dans la structure, il y a effectivement ici des différences d'interprétation en fonction des navigateurs.

Je peux vous proposer les codes suivants, qui devraient donner le même rendu à peu de choses près, et un certain nombre de problèmes en moins (j'ai entre autres utilisé des blocs en ligne plutôt que des float) :

template :

Code:

<!-- BEGIN disable_viewonline -->
<div class="bordure_qeel">
    <header class="titre_qeel">QUI EST EN LIGNE ?</header>

    <div class="bloc_groupe">
        <a href="http://freaksnation.bbfr.net/g3-genetic-syndrome" target="_blank" class="groupe1">Genetic syndrome</a>

        <a href="http://freaksnation.bbfr.net/g6-human-syndrome" target="_blank" class="groupe2">Human syndrome</a>

        <a href="http://freaksnation.bbfr.net/g5-bad-company" target="_blank" class="groupe3">Bad compagny</a>

        <a href="http://freaksnation.bbfr.net/g4-kiss-my-gun" target="_blank" class="groupe4">Kiss my gun</a>

        <a href="http://freaksnation.bbfr.net/g13-la-legion-d-ares" target="_blank" class="groupe6">La légion d'Arès</a>

        <a href="http://freaksnation.bbfr.net/g7-master-in-chief" target="_blank" class="groupe5">Master in chief</a>

        <a href="http://freaksnation.bbfr.net/g15-conclave" target="_blank" class="groupe7">Le Conclave</a>
    </div>

    <div class="online_24h_block">
     
        <div class="online_block">{TOTAL_USERS_ONLINE}
            <br />{LOGGED_IN_USER_LIST}
        </div>
     
        <div class="24h_block">
            <div class="titre_24h">DERNIERES 24h</div>
            <div class="block_pseudo">
                <table class="membres_24_table">
                    {L_CONNECTED_MEMBERS}
                </table>
            </div>
        </div>
     
    </div>
 
    <div class="block_milieu">

        <div class="premier_block_texte">
            Bienvenue à Washington DC, lieu où règnent Adrian Docanov et ses sbires dans le plus grand secret. Actuellement, il y a eu <span id="total_posts">{TOTAL_POSTS}</span>
            <script type="text/javascript">
                document.getElementById('total_posts').innerHTML = document.getElementById('total_posts').innerHTML.replace(/Nos membres ont posté un total de/, "").replace(/messages/, "petits mots");
            </script> échangés entre les citoyens de Washington DC. Nous avons <span id="toto_membres">{TOTAL_USERS}</span>
            <script type="text/javascript">
              document.getElementById('toto_membres').innerHTML = document.getElementById('toto_membres').innerHTML.replace(/Nous avons/, "").replace(/membre enregistré/, "personne(s)");
            </script> qui se sont installés dans la ville aux mille et un dangers.
        </div>

        <div class="img_block_qeel">
            <img class="imgQueel_int" src="http://john-steppling.com/wp-content/uploads/2012/11/American_Flag_waving.jpg" />
        </div>

        <div class="block_dernier_membre">
            <div class="texte_dernier_membre">MERCI D'ACCUEILLIR NOTRE NOUVEAU MEMBRE DU NOM DE</div>
            <div class="pseudo_dernier_membre"><span id="nb_newest">{NEWEST_USER}</span>
      <script type="text/javascript">
                   document.getElementById('nb_newest').innerHTML=document.getElementById('nb_newest').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
                </script>
            </div>
      </div>
     
    </div>

    <div class="credits_block">
        <div class="block_credit_haut"> <b>FREAK'S NATION 2015 /2016</b>
            <br /> Nanou, Misery Mind et Miwaki toute reproduction partielle ou totale est interdite.
            <br /> Catégories Sephii33 de Arcadia
            <br /> Queel Sephii33 de Arcadia
            <br /> Mise en page Misery Mind
            <br /> PA Misery Mind
            <br /> Design v7 visenya. de Bazzart</div>
        <div class="block_credit_bas">Crédits</div>
    </div>
 
</div>
<!-- END disable_viewonline -->


css :

Code:

/*********************************QEEL*******************************************/

.bordure_qeel {
    width: 819px;
    margin: auto;
    text-align: center;
}
.bordure_qeel a {
    text-decoration: none !important;
}

.titre_qeel {
    background-image: url('http://i65.tinypic.com/eqb385.png');
    background-color: #e2e2df;
    opacity: 0.7;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-family: Oswald;
    text-transform:uppercase;
    color: #9a8b7b;
    padding: 22px;
    position: relative;
    font-size: 31px;
    text-align: right;
    height: 56px;
    padding-top: 42px;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
}

.bloc_groupe {
    background-color: #f9f9f9;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    padding: 2px 5px;
    margin-bottom: 10px;
}


.groupe1, .groupe2, .groupe3, .groupe4, .groupe5, .groupe6, .groupe7 {
    display: inline-block;
    border: 0 none !important;
    font-size: 17px !important;
    text-transform:uppercase;
    font-family: Oswald;
    font-weight: lighter !important;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #EEEEEE;
    margin: 0 3px;
}

.groupe1 { color: #a99872!important; }
.groupe2 { color: #c7a963!important; }
.groupe3 { color: #79424c!important; }
.groupe4 { color: #bb5357!important; }
.groupe5 { color: #8C6153!important; }
.groupe6 { color: #c94a00!important; }
.groupe7 { color: #D6A145!important; }

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: none;
    cursor: auto;
}

.online_24h_block {
    display:inline-block;
    vertical-align:top;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    padding: 5px;
    font-size: 10px;
    text-transform: uppercase;
    font-family: Oswald;
    width: 295px;
    height: 165px;
    overflow: hidden;
}

.titre_24h {
    font-size: 16px;
    text-align: right;
    font-family: Oswald;
    border-bottom: solid 2px #a49790;
    color: #9a8b7b;
}

.online_block {
    height: 58px;
    overflow: auto;
    text-align: left;
}

.block_pseudo {
    height: 87px;
    overflow: auto;
}

.membres_24_table {
    color: #293D69;
    font-family: arial;
    font-size: 10px;
    text-align: justify;
}

.membres_24_table td.row1 {
  vertical-align: top;
  background:none;
}

.block_milieu {
    display:inline-block;
    vertical-align:top;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0 5px;
}

.premier_block_texte {
    display:inline-block;
    vertical-align:top;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 209px;
    text-align: justify;
    background-color: #f9f9f9;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    font-size: 10px;
    padding: 5px;
    height: 82px;
    overflow: auto;
    border-bottom: 30px solid #F0EEEB;
}

.img_block_qeel {
    display:inline-block;
    vertical-align:top;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 130px;
    margin-left: 4px;
}

.imgQueel_int{
    width:130px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.block_dernier_membre {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 353px;
    background-color: #e2e2df;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    text-transform:uppercase;
    color: #ffffff;
    height: 83px;
    position: relative;
    top: -30px;
}

.texte_dernier_membre {
    font-size: 10px;
    font-family: Oswald;
    color: #a49790;
    border-bottom: solid 2px #a49790;
    width: 338px;
    padding-top: 21px;
}
.pseudo_dernier_membre {
    margin-top: 6px;
    font-size: 22px;
}

.credits_block {
    display:inline-block;
    vertical-align:top;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 150px;
    background-color: #f9f9f9;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    height: 174px;
    overflow: hidden;
}

.block_credit_haut {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 141px;
    height: 130px;
    overflow: auto;
    padding: 5px;
    text-align: justify;
    box-shadow: 0 0 2px #EBE8E3, 0 0 40px #EBE8E3 inset;
    border-bottom: solid 1px #a49790;
    font-size: 9px;
}

.block_credit_bas {
    color: #9a8b7b;
    font-family: Oswald;
    text-transform: uppercase;
}

J'espère n'avoir rien oublié

[Misery Mind™]

Haaa génial ! merci pour la rapidité et pour l'aide ! Du coup je vais prévenir la codeuse pour qu'elle évite de mettre des "float" de partout ! (j'avoue je m'en doutais un peu que le problème venait de là, mais de là à tout arranger ^^)
et bien ... sujet résolu, merci encore !

[MlleAlys]

Les float peuvent être utilisés dans certains cas, mais pour les positionnements de blocs, de colonnes, il y a maintenant plus pratique.

A éviter à tout prix surtout : les marges qui servent à positionner, elles ne sont pas faites pour ça (pas forcément dans votre code, mais de façon générale, les marges négatives n'existent pas, et il est bizarre d'avoir ds marges de plusieurs centaines de pixels !) !

Pour les autres modifications, en gros :

Les balises <center> ne sont en général pas utiles non plus, on préférera si possible passer par le css pour centrer un contenu.

En ce qui concerne le code html du qeel également, inutile de garder les balise <table ... > et </table> au début et à la fin : Le qeel était au départ un tableau, d'où ces balises, mais vous êtes passés sur une structure avec des blocs, donc plus de tableau, donc ces balises n'ont plus de sens ! (les navigateurs ne savent pas trop quoi en faire et en général mettent dans notre cas un tableau vide au dessus ou en dessous du qeel)

Faire attention à l'indentation du code (les décalages vers la droite quand on est dans une balise) vous permettra de bien repérer quel bloc et dans quel bloc, et d'éviter des erreurs de structure. Ici votre liste des membres connectés les 24 dernières heures n'était pas dans le même bloc que le titre juste au dessus, d'où aussi un positionnement plus compliqué à gérer.

Dans le css, j'ai également corrigé le positionnement, certains autres détails, et une astuce pour optimiser : dans le cas des liens des groupes, il n'y a que la couleur qui change de l'un à l'autre, le reste de la mise en forme ne changeait pas. J'ai donc fait un seul bloc de code pour la mise en forme commune à tous les groupes, puis juste précisé ensuite individuellement leur couleur, sans être obligé de répéter tout le reste !

Bonne continuation !