Bug barre navigation sous firefox

[Tsukynette]

Détails techniques

Version du forum : ModernBB
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
Lien du forum : https://woa-rpg.forumactif.com/

Description du problème

Bonjour,

Comme la capture d'écran le démontre, ma barre de navigation cause des décallages de façon aléatoire avec le haut du forum. Le bug se produit seulement sous Mozilla Firefox. Tout fonctionne bien sous chrome !

Auriez-vous des pistes pour que cette barre de navigation s'affiche proprement sous firefox ?

Merci à vous !

Voici les codes concernés sous hide :

[Tsukynette]

Up

[Tsukynette]

Up <3

[Tsukynette]

Up !

[Self]

Bonjour,

Je ne pense pas que ça vienne de la barre de navigation mais peut être du calcul des flex-box que vous avez mit dans un conteneur affiché en mode inline avec ce code dans votre feuille de style:

Code:

#container {
    display: inline;
}

Il peut être enlevé ou remplacé par un :

Code:

#container {
    display: inline-flex;
}

peut être, cependant je ne reproduis pas tout le temps ce problème de décalage pourriez vous fournir le contenu de vos templates index_body & index_box ainsi que le CSS si le problème ne se résout pas avec la solution que je vous ai donné.

[Tsukynette]

Bonjour,

Merci pour votre passage !

Concerant l'ajout du flex, ça ne règle pas le problème malheureusement et même ça l'ajoute des soucis d'affichage.

Voici mes templates :

[Self]

Hello !

Alors j'ai réussi à reproduire puis à corriger de mon côté en retirant du CSS le passage :

Code:

#container{
    display: inline;
}

Puis en remplaçant le passage :

Code:

#page-body {
    margin-left: -14%;
}

Par :

Code:

#page-body {
    display: grid;
    grid-template-columns: 80% 20%;
}
#emptyidcc{ grid-row-start: 1; grid-column-start: 1; }

Et le passage :

Code:

#navi-woa {
    width: 200px;
    background-image: url(https://i.imgur.com/tsTgKrk.png);
    background-size: 100%;
    background-color: #212122;
    text-align: center;
    margin-top: 40px;
    animation: stickAnim .3s;
    float: right;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    margin-right: -34%;
}

Par :

Code:

#navi-woa {
    grid-column-start: 2;
    width: 200px;
    background-image: url(https://i.imgur.com/tsTgKrk.png);
    background-size: 100%;
    background-color: #212122;
    text-align: center;
    margin-top: 40px;
    animation: stickAnim .3s;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

Est-ce que la correction fonctionne également sur votre forum ?

[Tsukynette]

Salut,

Après avoir essayé ces nouveaux codes, le problème est toujours présent hélas
Voici une capture d'écran du rendu : https://i.imgur.com/upHhIht.png

[Self]

Je ne reproduis pas et je vois les anciens codes sur votre forum, pourriez vous appliquer ceux que je vous ai donné que j'essaie de voir comment je peux reproduire ce comportement ?

[Tsukynette]

Oups, pardon, j'ai remis le forum normalement car nous avons des visiteurs dessus ^^

Voici mon forum test où j'ai appliqué vos codes https://adminee-test.forumactif.com/

[Self]

En effet sur mon forum la variable {ID_CONTENT_CONTAINER} présente dans le overall_header à cette ligne :

Code:

<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>

génère l'ID #emptyidcc alors que sur vos forums c'est l'ID #content-container.

Donc il faut remplacer le passage que je vous ai donné :

Code:

#page-body {
    display: grid;
    grid-template-columns: 80% 20%;
}
#emptyidcc{ grid-row-start: 1; grid-column-start: 1; }

Par :

Code:

#page-body {
    display: grid;
    grid-template-columns: 80% 20%;
}
#content-container{ grid-row-start: 1; grid-column-start: 1; }

Et comme dans le CSS de base de votre forum cet ID agit aussi sur une marge de #container il faudra je pense ajouter à ce code le suivant :

Code:

#content-container #container{ margin-left: 0px; }

en modifiant le 0px si besoin .

[Tsukynette]

Bonjour,
merci de votre nouveau passage !

J'ai apporté les modifications et j'en suis à ce rendu : https://i.imgur.com/a9nTC0i.png
Malheureusement, quand je joue avec le margin-left pour ditinguer la barre de navig du corps du forum, ça vient créer un grand décalage et le corps du forum n'est plus positionné comme il devrait l'être à l'origine
J'ai d'ailleurs remarqué un autre petit bug qui s'est ajouté avec l'ajout de vos codes : la barre de navigation s'affiche mal lorsqu'on scroll

Merci !

[Self]

Je suis désolé mais c'est des problèmes que je ne reproduis pas sur mon forum de test, c'est pour cela que l'on avance à tâtons.
Pour la marge de la barre de navigation je m'étonnais que ça me le fasse pas (c'est un comportement normal du display: grid;) et pour le corriger on peut entourer celle-ci d'une nouvelle div et donc remplacez :

Code:

                                   <div id="navi-woa">
<div class="woa_nav_barre">
 
  <h1 style="margin:10px 0px;">Navigation rapide</h1>
 
  <div class="woa_navi">{GENERATED_NAV_BAR}</div>
 
  <h1>Liens utiles</h1>
 
  <div class="woa_barre_link">
    <a target="_blank" href="/">Contexte</a>
    <a target="_blank" href="/">Guide du nouveau</a>
    <a target="_blank" href="/">Questions ?</a>
    <a target="_blank" href="/">Prédéfinis importants</a>
    <a target="_blank" href="/">Carte du monde</a>
  </div>
 
  <h1 style="margin-bottom:10px;">Membre du mois</h1>
 
  <div class="woa_mdm">
    <img src="/"/>
    <span>Féliciations à Pseudo très long du joueur pour voir jusqu'où ça va</span>
  </div>
 
</div>
  </div>

Par :

Code:

<div class="m20">
 <div id="navi-woa">
 <div class="woa_nav_barre">
 <h1 style="margin:10px 0px;">Navigation rapide</h1>
 <div class="woa_navi">{GENERATED_NAV_BAR}</div>
 <h1>Liens utiles</h1>
 <div class="woa_barre_link">
 <a target="_blank" href="/">Contexte</a>
 <a target="_blank" href="/">Guide du nouveau</a>
 <a target="_blank" href="/">Questions ?</a>
 <a target="_blank" href="/">Prédéfinis importants</a>
 <a target="_blank" href="/">Carte du monde</a>
 </div>
 <h1 style="margin-bottom:10px;">Membre du mois</h1>
 <div class="woa_mdm">
 <img src="/"/>
 <span>Féliciations à Pseudo très long du joueur pour voir jusqu'où ça va</span>
 </div>
 </div>
 </div>
</div>

Puis pour le reste trouvez dans votre CSS :

Code:

#wrap {
    background-color: #e9ebed;
    border: 1px solid #;
    font-size: 1.3rem;
    margin: 0 auto;
    max-width: 1400px;
    padding: 24px 36px;
    width: 900px;
}

Et enlevez la ligne width: 900px;

Et comme dit dans mon précédent message régler le margin-left à 0px pour commencer :

Code:

#content-container #container{ margin-left: 0px; }

[Tsukynette]

Bonjour,

Cela semble fonctionner avec ces nouveaux codes !

Merci pour votre aide