Sujets similaires

Bonjour ! (ou bonsoir)

Alors voila, je suis à la fin de la préparation de la MAJ de mon forum. Vu que tout est fini, je comptait la mettre cette semaine. Mais j'ai rencontré un soucis en ouvrant mon forum test avec Firefox et sincèrement, je suis perdue dans les changements à faire.

Depuis quelques temps je code directement depuis chrome (depuis que je me suis rendue compte que F12 fonctionne mieux que sous FF). Donc mon forum rends bien dessus, tout est beau et mignon.

Mais malheureusement, tout le monde n'utilise pas chrome (sinon se ne serait pas drôle). Je cherche donc à optimiser le mieux possible avec Firefox, l'autre gros navigateur (je pense).

Mais voila, j'ai plusieurs soucis.

Le premier :
Mes barres de défilement. Sur chrome, elles sont jolies et passent plus inaperçu, ce qui rend mieux.
Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) Nav110

Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) Nav110

Mais sur Firefox, elle ne se modifie pas.
Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) Nav210

Voici le code relatif à ces barres.

Code:: ::-webkit-scrollbar-thumb:vertical {
background-color:#341403;
height:6px;
}

::-webkit-scrollbar-thumb:horizontal {
background-color:#341403;
height:6px!important;
}

::-webkit-scrollbar {
background-color:#09080A;
height:10px;
width:10px;
}

J'imagine qu'il manque un petit quelque chose pour pouvoir la modifier ?

Deuxième problème :
J'ai créer une image pour mettre en haut de mes catégories. Pas de soucis, ça passe bien pour les deux navigateurs.
En revanche, le nom de la catégorie, je lui ai mis un petit code pour lui changer son apparence et du coup la positionner au bon endroit. ça passe nickel avec chrome. (c'est donc le texte qui est modifié directement et non une image à placer)
Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) Cat110

Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) Cat110

Mais bien entendu, absolument pas avec firefox.
Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) Cat111

Voici le code de mon css relatif à cela

Code:: .secondarytitle, .secondarytitle h2 {
text-align: center;
display: block;
border : none;
color : #9d2032;
font-size : 30px;
font-family: 'Montez';
letter-spacing: -2px;
font-weight: normal !important;
padding-left: 170px;
text-shadow: 0px 0px 2px #000;
margin-top: -95px;
}

Et celui noté dans mes titres de catégorie.

Code:: <span class="textecatego">La première page</span>

Pour être franche, je ne sais même pas pourquoi j'ai donné une class...je ne l'ai pas dans mon css...
Alors du coup, j'ai essayer de mettre un bout de code en css pour cette classe, ça me l'a positionné parfaitement avec Firefox, mais ça a décalé mon titre vers la gauche avec chrome (hors de la zone noir, sinon se ne serait pas drôle). Alors j'ai finalement enlevé tout le span. Mais...le problème est toujours là.

Et le troisième problème :
Est-il possible que le cadre de la chat box soit d'une couleur différentes à la couleur des catégories ?
Mes catégories étant marron et mon fond noir, je souhaiterais que ma chat box soient plus noir que marron. En effet, elle tranche énormément.
Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) Cb10

Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) Cb10

Alors voila, j'ai ces trois petits soucis. Si vous sauriez m'aider, se serait vraiment super. Et ainsi je pourrais faire ma MAJ.

Je vous souhaite une bonne journée.

Et je vous remercie de tout mon coeur ♥

Bonjouuur.

Alors je viens ici déjà pour répondre à ton premier problème. Je ne sais pas si c'est erroné à l'heure actuelle ou pas, mais d'après mes connaissances il n'est pas possible de personnaliser la scrollbar de firefox via le css. Cela n'est possible qu'en passant par du Javascript. De plus "webkit" ne s'applique pas à firefox, cela est uniquement pour Chrome et Safari me semble-t-il. Donc, même si il était possible de changer l'aspect de la scrollbar, ce n'est pas avec ce code que tu le pourras. J'espère ne pas dire de bêtises cependant, mais c'est ce que l'on m'a enseigné. Smile

Ensuite pour le second problème, j'ai un peu du mal à comprendre sans le code en entier - j'aime bien avoir une vision global de tous les codes pour mieux comprendre le tout- , mais déjà, je pense qu'une ID aurait été mieux, plutôt qu'une classe. - Sans vouloir là aussi dire de bêtises. - Mais la première chose qui me vient à l'esprit c'est de rajouter dans ton css:

Code:: position: absolute;

Je sais pas si c'est la réponse à ton problème, je n'ai jamais eu de problème de compatibilité entre ces deux navigateurs et c'est la seule différence entre nos codes à premières vue, me tapez pas si c'est fauuux.

Pour le troisième problème, je vois pas l'image donc... Je ne puis t'aider.

Bonjour !!!

Merci de m'avoir répondu, j'entrevoir la lumière au bout de mon long tunnel ténébreux ♥

Alors pour les barres de défilement, tant pis, c'était juste une question d’esthétique et si ce n'est pas possible, ce n'est pas grave. Et le javascript, je ne connais pas suffisamment pour modifier je pense.

Pour la dernière image, j'ai essayer de la ré-hébergé, est-ce que tu vois ? Sinon je te donne l'adresse de mon forum test, en espérant ne pas trop t'abîmer les yeux. http://marauderstest.frbb.net/

Pour le second. J'ai essayer avec une position absolute, c'est le néant.

Si ça peut aider, voici mon css

Code:: /*----INFOBULLE PA----*/
.statut-staff {
font-size: 8pt;
letter-spacing: 0,5px;
}

.staff-nom {
font-family: time new roman;
text-transform: uppercase;
font-size:14px;
text-align:center;
letter-spacing: -1px;
margin-top: -14px;
}

.gif-staff img {
border-radius: 15px;
box-shadow: black 1px 1px 2px;
}

.photo-staff {
-webkit-transform:scale(1) rotateZ(0);
-moz-transform:scale(1) rotate(0);
-ms-transform:scale(1) rotateZ(0);
-o-transform:scale(1) rotate(0);
transform:scale(1) rotateZ(0);
-webkit-transition: all 1.5s ease; /* pour navigateur webkit */
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
-o-transition: all 1.5s ease; /* pour navigateur opera */
transition: all 1.5s ease; /* pour les navigateurs récents */
}

/*.photo-staff:hover {
-webkit-transform:scale(1) rotateZ(-22deg);
-moz-transform:scale(1) rotate(-22deg);
-ms-transform:scale(1) rotateZ(-22deg);
-o-transform:scale(1) rotate(-22deg);
transform:scale(1) rotateZ(-22deg);
}*/

.bulle-staff {
width: 55px;
margin: auto;
padding: 0;
float: left;
font-size:11px;
position: relative;
}

.staff {
background: #0c0c0c;
border: 0px solid #1c1706;
width: 0;
height: 0;
font-size: 7pt;
color: #a1a1a1;
font-family: arial;
text-align: justify;
position: absolute;
top: 10px;
left: 50px;
width:150px;
overflow: hidden;
z-index: 20;
text-align: left;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 10px;
opacity:0.65;
/*transform*/
/* -webkit-transform:scale(0) rotateZ(-12deg);
-moz-transform:scale(0) rotate(-12deg);
-ms-transform:scale(0) rotateZ(-12deg);
-o-transform:scale(0) rotate(-12deg);
transform:scale(0) rotateZ(-12deg);*/
-webkit-transition: all 1.5s ease; /* pour navigateur webkit */
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
-o-transition: all 1.5s ease; /* pour navigateur opera */
transition: all 1.5s ease; /* pour les navigateurs récents */
}

.bulle-staff:hover .staff {
width: 170px;
height: 50px;
padding: 5px;
left: -35px;
top: -15px;
box-shadow: black 1px 1px 2px;
font-size: 7pt;
font-family: arial;
color: #595959;
opacity:0.95;
/*transform*/
/* -webkit-transform:scale(1) rotateZ(0);
-moz-transform:scale(1) rotate(0);
-ms-transform:scale(1) rotateZ(0);
-o-transform:scale(1) rotate(0);
transform:scale(1) rotateZ(0);*/
}

/*----PA )----*/

.contextepa {
opacity:0.9;
padding: 2px;
text-align: justify;
text-shadow: 0px 1px 1px #000;
font-family: verdana;
position:absolute;
left: 270px;
top:150px;
width:140px;
height:220px;
z-index:2;
font-size:10px;
overflow:auto;
color:#A68E5E;
}

.lienspra {
opacity:0.9;
padding: 5px;
margin: 5px;
text-align: center;
position:absolute;
left: 246px;
top:160px;
width:170px;
height:180px;
z-index:2;
line-height:12px;
}

.lienp {
font-family: verdana;
font-size: 10px;
letter-spacing: 2px;
text-shadow: 0px 0px 3px #8F2553;
color:color:#8D7249!important;
}

.lienp:hover {
color:#D3B471;
letter-spacing: 0pt;
}

.staffpa {
opacity:0.9;
padding: 2px;
text-align: justify;
text-shadow: 0px 1px 1px #000;
font-family: Verdana;
position:absolute;
left: 43px;
top:128px;
width:100px;
height:55px;
z-index:2;
font-size:10px;
overflow:none !important;
color:#A68E5E;
}

.iconpa {
opacity:0.9;
padding:1px;
border: 1px solid #251520;
}

.newspa {
opacity:0.9;
padding: 2px;
text-align: justify;
text-shadow: 0px 1px 1px #000;
font-family: Verdana;
position:absolute;
left: 270px;
top:410px;
width:140px;
height:130px;
z-index:2;
font-size:10px;
color:#A68E5E;
}

.scena{
position:absolute;
top:260px;
left:510px;
z-index:2;
font-size:10px;
width:140px;
height:130px;
padding: 2px;
text-align: justify;
font-family: Verdana;
overflow:auto;
}

a.scena{
color:#A68E5E !important;
}

.pv{
position:absolute;
top:270px;
left: 32px;

}

.iconstaff{
opacity:0.5;
padding:1px;
height: 50px;
width: 50px;
border: 1px solid #251520;
}

.iconstaff:hover {
opacity:1;
padding:1px;
height: 50px;
width: 50px;
border: 1px solid #251520;
}

a.bulle {
position: relative;
text-decoration: none;}

a.bulle span {
display: none;}

a.bulle:hover {
background: none;
text-decoration: none;
cursor : default;}

a.bulle:hover span {
display: inline;
position: absolute;
top:1.5em;
left:0.5em;
z-index: 20;
background: #6586C5;
color: #fff;
border:1px solid #666;
width:50px;
text-align:center;
font-weight:normal;
font-size: 10px;
line-height:12px;
padding:2px 4px;
}

.part{
padding:2px;
text-align:center;
}

.tops{
position:absolute;
top:455px;
left: 515px;
width:150px;
}

.partenaires {
position:absolute;
left: 20px;
top:460px;
width:160px;
height: 50px;
overflow: auto;
font-family: verdana;
font-size:10px;
z-index:2;
text-align:center;
}

/* IMAGES PA PARTENAIRES */
img.rotate{
transition: all 1.2s ease-out;
-o-transition: all 1.2s ease-out;
-webkit-transition: all 1.2s ease-out;
-moz-transition: all 1.2s ease-out;
}

/*img.rotate:hover{
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}*/

.creditspa {
opacity:0.9;
padding: 2px;
text-align: justify;
text-shadow: 0px 1px 1px #000;
font-family: Verdana;
position:absolute;
left: 475px;
top:355px;
width:140px;
height:140px;
z-index:2;
font-size:10px;
color:#A68E5E;
overflow:auto;
}

.membrepa {
position:absolute;
left: 485px;
top:145px;
width:20px;
z-index:2;
text-align:center;
}

/*----FIN PA----*/

/*-----SIDEBARS-----*/
.titrecaté {
margin-top:-82px;
margin-left:345px;}

.cathead {
background: url('http://i47.tinypic.com/15zfw34.jpg') top center no-repeat;
width: 700px;
height: 117px;
margin:auto;} /*Permet de centrer la partie du corps*/

.catbody {
width: 700px;
margin:auto;
margin-top:-5px;
background-color:#54534f;
}

.catfoot
{
background: url('http://i49.tinypic.com/2r594xy.jpg') bottom center no-repeat;
width: 700px;
height:128px;
margin:auto;
margin-top:-10px;
}

.textecatego{
position : absolute;
margin-left : -110px;
}

.secondarytitle, .secondarytitle h2 {
text-align: center;
display: block;
border : none;
color : #9d2032;
font-size : 30px;
font-family: 'Montez';
letter-spacing: -2px;
font-weight: normal !important;
padding-left: 170px;
text-shadow: 0px 0px 2px #000;
margin-top: -95px;
}

padding-top: 12px;

table#msg_et, table#msg_et td{
background-color:none !important;
}

::-webkit-scrollbar-thumb:vertical {
background-color:#341403;
height:6px;
}

::-webkit-scrollbar-thumb:horizontal {
background-color:#341403;
height:6px!important;
}

::-webkit-scrollbar {
background-color:#09080A;
height:10px;
width:10px;
}

.selectCode {
float:right;
text-transform: uppercase;
cursor:pointer; }

/*----- QEEL -----*/

.groupesqel {
opacity:0.9;
padding: 5px;
margin: 5px;
text-align: center;
text-shadow: 0px 1px 1px #000;
position:absolute;
left: 410px;
top:130px;
width:210px;
height:120px;
z-index:2;
font-weight:bold;
font-family: times new roman;
font-size: 12px;
letter-spacing: 0pt;
overflow:auto;
text-transform: uppercase;
}

.lienq:hover{
color:#898E8F;
letter-spacing: -1pt;
}

.qeelyoup {
opacity:0.9;
padding: 5px;
padding-top : 0px;
margin: 5px;
text-align: justify;
font-size: 11px;
text-shadow: 0px 1px 1px #000;
font-family: Verdana;
position:absolute;
left: 45px;
top:110px;
width:145px;
height:215px;
z-index:2;
font-size:10px;
overflow:auto;
color:#898E8F;
}

.qeeltoo{
opacity:0.9;
padding: 5px;
padding-top : 0px;
margin: 5px;
text-align: justify;
font-size: 11px;
text-shadow: 0px 1px 1px #000;
font-family: Verdana;
position:absolute;
left: 230px;
top:290px;
width:410px;
background-color: transparent !important;
height:70px;
z-index:2;
font-size:10px;
overflow:auto !important;
color:#898E8F;
}

.DeBug td.row1 {
background : none;
text-align: justify;
}

#QEEL{
background-image:url('http://i50.tinypic.com/2eba0ie.jpg');
height:400px;
width: 700px;
border: none !important;
position:relative;
}

/*----- FIN QEEL -----*/

/*PROFIL*/
.pseudoprofil {
font-family: 'Montez'/*'Bilbo'*/, cursive;
font-style: italic;
width: 100%;
text-shadow: 1px 1px 1px #0a0a0a;
text-transform: lowercase;
font-size: 25px;
letter-spacing:-1px;
text-align:center;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

.pseudoprofil:hover {
letter-spacing:0px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

.avatar_profil img {
opacity: 0.6;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

.avatar_profil:hover img {
opacity: 0.9;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

.fondprofil {
background-image: url('http://i48.tinypic.com/m7cp3d.jpg');
border-radius:180px;
box-shadow: 0px 0px 4px #0a0a0a, 0px 0px 18px #050505 inset;
}

.cadreprofil1 {
background-color: #1f0c02;
border-radius: 50px;
padding:5px;
margin:0px 5px 5px 5px;
color: #A39696;
box-shadow: 0px 0px 4px #1f0c02, 0px 0px 18px #010101 inset;
}

.idcard {
font-family: 'Montez'/*'Bilbo Swash Caps'*/, cursive;
color: #A39696;
font-size : 20px;
letter-spacing:-1px;
text-shadow: #2A2A2F 0px 1px 2px;
text-align:center;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}

.idcard:hover {
letter-spacing:1px;
color: #9d2032;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}

.cadrerang {
background-color:#A39696;
opacity:0.6;
padding:5px;
padding-top:10px;
border-radius: 0px;
margin-top:-40px;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}

.cadrerang:hover {
opacity:0.9;
}

.rangprofil {
font-size: 8px;
font-family: Arial;
letter-spacing: 1px;
margin-top: -10px;
text-transform : uppercase;
text-align:center;
}

.barreprofil {
border-bottom: 1px solid rgb(80, 75, 64);
padding-right: 5px;
padding-left: 5px;
opacity: 0.1;
}

.infoprofil {
padding-left:8px;
padding-right:8px;
color:#D9D6D6;
opacity:0.5;
text-align:justify;
line-height:100%;
}

/*CATEGORIE*/
.cattitle{
color: #9d2032 !important;
}

.grisdesc {
border-left: 4px solid #9d2032;
border-right: 4px solid #9d2032;
background-color:#341403;
padding:5px;
border-radius : 10px;
margin-left:14px;
margin-right:14px;
margin-top:5px;
min-height : 80px;
}

.grismessage {
border-left: 4px solid #9d2032;
border-right: 4px solid #9d2032;
background-color:#341403;
padding:5px;
border-radius : 10px;
margin-left:14px;
margin-right:14px;
margin-top:5px;
min-height : 40px;
}

.lienscat{
padding-top: -4px;
padding-bottom: 2px;
font-size: 10px;
font-family: times new roman;
text-transform: uppercase;
letter-spacing: 1pt;
margin-left : 30px;
}

.description{
text-align : justify;
width:430px;
padding:5px;
}

.messages_sujets{
text-align: right;
font-size:10px;
letter-spacing:1px;
text-transform:uppercase;
font-family:times new roman;
}

.dernier_message {
margin-top : -10px;
width : 180px;
margin-bottom : 10px;
}

/*fin*/

/*HEADER*/
body{
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

.ban1 {
background-image: url('http://i49.tinypic.com/anypf.jpg'); /*http://i46.tinypic.com/30djvqv.jpg*/
}

.maintitle{
margin-top:-40px;
}

/*STYLE DES MESSAGES*/
a:hover{
text-decoration: none !important;
}

a{
text-decoration: none !important;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}

div.postbody {
display: block;
text-align:justify;
margin-left:15px;
margin-right:15px;
font-size: 11px;
line-height:12px;
}

b {
color: #9d2032;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}

b:hover {
color:#9d2032;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}

i {
color: #8c3404;
font-style: italic;
opacity:0.8;
font-family: Georgia;
}

u {
color: #8c3404;
font-family:Georgia;
opacity: 1;
text-decoration: none !important;
border-bottom: 1px dotted #9d2032;
font-style:italic;
}

.code {
height:auto;
max-height:200px;
overflow:auto;
text-align:justify;
padding:5px;
font-family: courier new;
letter-spacing: 0px;
border-radius:8px;
background-color: #341403;
-webkit-box-shadow: 0px 0px 1px 0px #000000;
-moz-box-shadow: 0px 0px 1px 0px #000000;
box-shadow: 0px 0px 1px 0px #1d1d1d;
}

.quote, td.spoiler_content, td.spoiler_closed {
padding: 5px;
text-align:justify;
font-family: Arial;
line-height:100%;
letter-spacing: 0px;
border-radius:8px;
-webkit-box-shadow: 0px 0px 1px 0px #000000;
-moz-box-shadow: 0px 0px 1px 0px #000000;
box-shadow: 0px 0px 1px 0px #000000;
background-color: #341403;
}

/*FICHE PRESA */

.backprez {
background-image: url('http://i48.tinypic.com/m7cp3d.jpg');
border-radius:150px;
width:480px;
box-shadow: 0px 0px 4px #0a0a0a, 0px 0px 18px #0a0a0a inset;
}

.fondprez {
background-color: #1f0c02;
border-radius: 75px;
padding:5px;
box-shadow: 0px 0px 4px #1f0c02, 0px 0px 18px #050505/*010101*/ inset;
font-size:12px;
line-height:100%;
color: #A39696;
}

.avaprez {
opacity: 0.4;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
width: 200px;
height: 320px;
border-radius:100px;
background-position:center;
}

.avaprez:hover {
opacity: 1;
}

.cadreprez {
background-color: #341403/*050505*/;
border-radius:25px;
padding:7px;
box-shadow: 0px 0px 4px #0b0b0b, 0px 0px 18px #010101/*1f0c02*/ inset;
opacity:0.8;
text-align:justify;
font-size:12px;
font-family:arial;
line-height:100%;
color: #A39696;
}

.dossier {
font-family: 'Montez', cursive; /*Aguafina Script*/
font-size : 28px;
text-align:center;
text-shadow: #2A2A2F 0px 1px 2px;
z-index:10;
color:#A39696;
letter-spacing:0px;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}

.dossier:hover {
letter-spacing:0px;
color: #9d2032;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}

.sstitreprez {
font-family: 'Montez', cursive; /*Bilbo Swash Caps*/
font-size : 25px;
letter-spacing:-1px;
text-shadow: #2A2A2F 0px 1px 2px;
margin-left: 20px;
color:#A39696;
margin-top:-10px;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}

.sstitreprez:hover {
letter-spacing:-1px;
color: #9d2032;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}

.citaprez {
text-transform:uppercase;
text-align:center;
opacity:0.5;
font-family:arial;
font-size:8px;
}

.barreprez {
border-bottom: 1px solid rgb(130, 118, 91);
padding-right: 5px;
padding-left: 5px;
opacity: 0.1;
width:55%;
}

t1 {
text-transform:uppercase;
color:#8c3404;
font-family: courier new;
font-size:12px;
opacity:0.4;
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s;
-ms-transition:all 0.6s;
-o-transition:all 0.6s;
transition:all 0.6s;
}

t1:hover {
color:#8c3404;
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s;
-ms-transition:all 0.6s;
-o-transition:all 0.6s;
transition:all 0.6s;
}

.MC {
font-family:courier new;
font-size:9px;
opacity:0.2;
text-align:center;
text-transform:uppercase;
}

/* ENLEVER IMAGES DANS LA BARRE DE NAVIGATION */
a.mainmenu img {
display:none;
}

/* RETIRER LE SOULIGNEMENT DES LIENS */
a:hover{
text-decoration: none !important;
}

a {
text-decoration: none !important;
}

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

/* SUPPRIMER LES EDITIONS */
tr.post span.gensmall {
display: none;
}

/*INFOS PROFIL*/

.postdetails{
font-size : 10px;
text-transform:lowercase;
color:#7C0000;
}

/*TITRE FORUM*/

a.forumlink {
font-family: times new roman;
font-size:27px;
line-height: 12px;
text-transform : lowercase;
text-align : center;
margin-left : 20px;
margin-bottom : 10px;
color:#b31b2f !important;
opacity:0.8;
letter-spacing:-2px;
opacity:1;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}

a.forumlink:hover {
font-family: times new roman;
font-size:27px;
line-height: 12px;
text-transform : lowercase;
text-align : center;
margin-left : 20px;
margin-bottom : 10px;
color:#341403 !important;
opacity:0.8;
letter-spacing:-2px;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
padding-left: 20px;
}

.navig {
position: fixed;
top: 0px;
width: 100%;
z-index:100;
background-color: #000000;
border-bottom: 2px solid #9d2032;
left: 0px;
}

a.mainmenu {
margin: 0px;
font-family: 'Montez';
font-size: 27px;
letter-spacing: -2px;
/*text-transform: lawrecase;
font-style:italic;
font-weight : bold;*/
color:#9d2032;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
/*text-shadow: 0px 0px 2px #622b2b;*/
}

a.mainmenu:hover {
color:#622b2b;
text-shadow: 0px 0px 2px #622b2b;
opacity:0.2;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

/*FORMU PAR EMPTY SPACES. (c)*/
.fondformu {
background-color:#1f0c02;
border-radius: 75px;
font-size:12px;
line-height:100%;
color: #A39696;
box-shadow: 0px 0px 4px #1f0c02/*030303*/, 0px 0px 18px #010101 inset;
}

.backformu {
background-image: url('http://i48.tinypic.com/m7cp3d.jpg');
border-radius:150px;
width:410px;
box-shadow: 0px 0px 4px #0a0a0a, 0px 0px 18px #050505 inset;
}

.banformu {
width:410px;
border-radius:75px 75px 0px 0px;
}

Bonjour,

Serait-il possible d'avoir le lien de ce forum de test que l'on puisse utiliser F12 nous aussi ? Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) 926145

Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) 926145

Sinon, rapidement:
Premier problème
Les propriétés que tu utilises pour modifier ta scrollbar sous Chrome ne sont pas standards et l'équivalent n'existe pas sous Firefox. Comme l'a dit Cheschire, il est donc impossible de modifier cette partie sous Firefox. Par contre, tu peux "faire semblant" en utilisant du Jquery ( CSSActif utilise: http://www.megaptery.com/2012/02/lionbars-une-scrollbar-jquery-legere-et-cross-browser.html pour la barre de défilement au niveau du QEEL ) qui te permettra de donner un style qui s'appliquera à Chrome et à FF, mais c'est plus complexe à installer.

Second problème
Rien ne me frappe dans le code. Il faudra assurément le lien de ton forum pour en faire davantage. Par contre, j'espère que tu réalises quand donnant le style à secondarytitle et à secondarytitle h2 tu "sur-appliques" le code... Padding-left:170px à secondarytitle + padding-left: 170px à secondarytitle h2 = padding-left: 340px, peut-être que Chrome et Firefox interprète différemment ce "doublon" de style. Essaie en appliquant à h2 seulement.

Troisième problème
Où est la chatbox sur ton forum ? Si elle est sur la page d'accueil tu peux aller dans L'Index_body et ajouter une classe autour de la variable {Chatbox} puis appliquer un style à cet enfant en faisant un truc du genre:

Code:: .maclasse .laclassedemesforumsenmarron { background-color: #000000; }

Note à Cheschire, on utilise un ID si et uniquement si l'élément n'apparaîtra qu'une seule fois dans la page. Ici, on parle de titre pour plusieurs catégories alors il y aura nécessairement plus d'une fois

Code:: <span class="textecatego">Quelque chose...</span>

dans la page Smile

Wow une réponse d'Orange carrément, je suis flattée

Alors j'ai mis le lien dans ma réponse à Cheschire.

http://marauderstest.frbb.net/

Donc pour les scroll, je vais regarder ce lien d'un peu plus près et je vais voir si j'y arrive ou non. Merci pour le tuyau en tout cas

Pour mon second problème, j'avoue ne pas avoir compris l'histoire de sur-appliquer. Tout le code qui est dans secondary, j'y met juste dans h2 ?

Ensuite ma chatbox est actuellement tout en bas de mon forum, mais je ne sais pas si les invités peuvent la voir. Voyez-vous mon image ?
Le background-color prendra le contour de ma chatbox ? car c'est vraiment le contour et tout qui est dérangeant, je ne sais pas si vous voyez mon dilem.

Je vais essayer de modifier mon h2 en espérant que ça résoudra mon problème

(heu au passage, j'enlève la classe de la catégorie ?)

EDIT : J'ai essayer en mettant sous h2, mais...c'est comme s'il n'y avait aucun css, enfin j'exagère, la police et la taille est prise en compte, mais pas la couleur par exemple. Je me suis peut-être plantée (me connaissant).

EDIT : Ayant une lubie d'intelligence, j'ai fini par comprendre que je devais laisser le .secondary devant le h2 et magie, ça fonctionne !!! Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) 3933776953

Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) 3933776953

Merci merci merci !!!!!!!
Bon me reste à me dépatouiller avec la box encore, mais on y arrivera !!

Salut,

Je tiens à préciser que pendant l'absence d'Orange, CSSActif a arrêté d'utiliser les lionbars au profit d'un script plus récent XD

Pour la chatbox, tu peux écrire "par dessus" les styles de la chatbox en utilisant l'identifiant qui l'entoure, si je ne me trompe pas. Je t'en dirai plus ce soir.

Merci 'Christa pour ton aide.

Ce script est-il en libre service ? Je n'ai pas vraiment compris les lionbars (mais j'étais peut-être un peu trop fatiguée)

Donc ma chatbox qui n'est pas en page d'accueil mais en bas de mon forum, je peux quand même la trouver dans le template index_body ? J'essayerais de bidouiller cet après-midi un peu tout ça.

En tout cas, merci beaucoup pour votre aide à tous ♥

À bein CSSActif utilise plus Lionbars ^^ Désolé te t'avoir induit en erreur Razz

Passé ça, regarde dans ton template index_body il y a:

Code:: {CHATBOX_BOTTOM}

Tu n'as qu'à ajouter un conteneur autour

Code:: <div class="chatbox">{CHATBOX_BOTTOM}</div>

Puis à ajouter dans ton CSS

Code:: .chatbox .forumline {
// Propriétés CSS
}

Il me semble que c'est le forumline, j'ai un blanc. Tu n'auras qu'à regarder avec quelle classe tu as appliqué la couleur à tes catégories et le mettre à la place de forumline. Wink

Voilà

Nein, nein, nein, ça ne marchera pas comme ça XD (edit : en fait, si, voir la fin du message)

La chatbox est placée dans une iframe, de ce fait même si on encadre cette iframe dans un div quelconque, ça n'aura pas d'influence sur le contenu de ladite iframe.

Par contre, quand tu vas dans la page d'une chatbox, tu peux voir par exemple que le corps du document s'est vu appliquer la classe .chatbox ! Il suffit alors de connaitre les différents éléments d'une CB pour les personnaliser.

Je digresse un peu loin en réalité, dans la mesure où il me semble que {CHATBOX_BOTTOM} (ou TOP) contient une table à laquelle on a appliqué la classe forumline. Du coup l'avis d'Orange est juste à ce titre, et j'ai pas les yeux en face des trous (mais je viens de rentrer faut me pardonner je suis fatiguée ToT)

D'accord, j'ai compris que ma méthode marchait (et compris pourquoi elle ne pourrait pas marcher), mais est-ce que ajouter une classe .chatbox autour de CHATBOX_BOTTOM est utile où s'est déjà dedans ? Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) 1616978029

Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll) 1616978029

Fondamentalement, la classe étant déjà utilisée à d'autres fins, il faudrait éviter et utiliser un autre nom de classe XD Mais sinon, entourer la variable est la bonne solution, oui, je me suis égarée dans des explications inutiles plus haut parce que j'avais pas réfléchi ^^'

Je suis désolée mais...je n'ai pas compris ce que vous avez dis tous les deux ^^'

Nous tergiversions sur certaines subtilités du codage Forumactif, ce n'est pas vraiment important. Rolling Eyes

La solution est celle que j'ai donné ici:

Orange a écrit:

À bein CSSActif utilise plus Lionbars ^^ Désolé te t'avoir induit en erreur Razz

Passé ça, regarde dans ton template index_body il y a:

Code:: {CHATBOX_BOTTOM}

Tu n'as qu'à ajouter un conteneur autour

Code:: <div class="machatbox">{CHATBOX_BOTTOM}</div>

Puis à ajouter dans ton CSS

Code:: .machatbox .forumline {
// Propriétés CSS
}

Il me semble que c'est le forumline, j'ai un blanc. Tu n'auras qu'à regarder avec quelle classe tu as appliqué la couleur à tes catégories et le mettre à la place de forumline. Wink

Voilà

D'accord, je vais essayer ce week-end, je vous remercie ♥

Bonsoir,

Ton problème est-il toujours d'actualité ? Merci de donner une réponse dans un délai de quatre jours sinon ton sujet sera archivé et verrouillé !

Bonne soirée,

Bonsoir,

Malgré une relance, l'auteur ne donne toujours aucunes nouvelles. J'archive donc ce sujet et le verrouille.

Bonne soirée.

Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll)

Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll)

Sujets similaires

Sujets similaires

Partenaires Or