Souci d'affichage Chrome et Firefox Bouton_activeSouci d'affichage Chrome et Firefox Bouton_hoverSouci d'affichage Chrome et Firefox Fb-hoverSouci d'affichage Chrome et Firefox Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Souci d'affichage Chrome et Firefox EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Souci d'affichage Chrome et Firefox EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Souci d'affichage Chrome et Firefox EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Souci d'affichage Chrome et Firefox EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Souci d'affichage Chrome et Firefox EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Souci d'affichage Chrome et Firefox EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Souci d'affichage Chrome et Firefox EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Souci d'affichage Chrome et Firefox EmptyVen 03 Fév 2023, 17:22 par Krager

-15%
Le deal à ne pas rater :
(Adhérents) LEGO® Icons 10318 Le Concorde
169.99 € 199.99 €
Voir le deal

Partagez
 

Souci d'affichage Chrome et Firefox

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://oyoken.forumactif.org/
Oyoken
Oyoken
{ Membre }
{ Membre }

Masculin Messages : 34



Souci d'affichage Chrome et Firefox Empty
Bonjour/Bonsoir,

Tout d'abord j'espère avoir bien recherché si mon problème était déjà arrivé (ce dont je suis quasiment sûr mais comme j'arrive pas à mettre les bons mots-clés je rame).

Mon problème étant tout simplement une différence d'affichagede mon panneau d'accueil entre les deux navigateurs que sont Firefox et Google Chrome.

Sur Firefox le code est Ok et tout passe normalement mais lorsque je visualise le rendu sous Chrome, le panneau d'accueil est complètement déformé. Les infobulles avec les images ne fonctionnent plus alors que celles faites avec du texte fonctionnent très bien scratch

Ayant du mal à m'en sortir tout seul sur ce coup là, une âme charitable en ces périodes de fêtes saurait-elle me débloquer..?

Voici le code CSS du PA :

Code:
.pa{
 width:1100px;
 height:800px;
 background-color:#a89362;
 background-attachement:fixed;
 background-image:url(http://img195.imageshack.us/img195/5715/pastnewlogo.png);
 background-repeat:no-repeat;
 border-top:solid 5px #8a7441;
 border-bottom:solid 5px #8a7441;
 border-right:solid 2px #8a7441;
 border-left:solid 2px #8a7441;
  }
 
.link{
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 0px 10px 0px;
 -webkit-border-radius:10px 0px 10px 0px;
 text-align:center;
 position:relative;
 text-decoration:none;
 left:0px;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 color:#947e2e;
 top:110px;
 font-size:14px;

 }
 
.link:hover{
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:relative;
 text-decoration: none;
 text-shadow:2px 2px 5px white;
 color:white;
 }

 .news{
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 0px 10px 0px;
 -webkit-border-radius:10px 0px 10px 0px;
 text-align:center;
 position:relative;
 text-decoration:none;
 left:0px;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 color:#947e2e;
 top:110px;
 font-size:14px;
 color:#6e5d1d;
 }
 
.news:hover{
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:relative;
 text-decoration: none;
 text-shadow:2px 2px 5px white;
 color:red;
 }
 
.staff{
 width:890px;
 height:125px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:0px 0px 10px 10px;
 -webkit-border-radius:0px 0px 10px 10px;
 position:relative;
 top:140px;
 left:0px;
 }

.well{
 text-shadow:2px 2px 5px white;
 font-family:Georgia;
 font-size:14px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:0px 0px 10px 10px;
 -webkit-border-radius:0px 0px 10px 10px;
 padding-top:3px;
 padding-bottom:3px;
 }

.well:hover {
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:relative;
 text-decoration: none;
 text-shadow:2px 2px 5px white;
 color:white;
 }
 
a.vio
{
 position:relative;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.vio  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.vio:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
   }
   
a.vio:hover  span
{
 width: 100px;
 height: 125px;
 display: inline;
 position: absolute;
 top: -50px;
 left: -40px;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 0px 10px 0px;
 -webkit-border-radius:10px 0px 10px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px white;
 }
.story{
 position:relative;
 width:400px;
 height:280px;
 border-right: dotted #8a7441;
 border-left:dotted #8a7441;
 border-top:dotted #8a7441;
 border-bottom:dotted #8a7441;
 top:150px;
 left:-250px;
 text-align:justify;
 padding-right:5px;
 padding-left:5px;
 text-shadow:1px 1px 5px white;
 }
 
.story2{
 width:300px;
 height:25px;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 text-align:center;
 padding-top:3px;
 color:white;
 font-size:14px;
 position:relative;
 -moz-border-radius:10px 10px 10px 10px;
 -webkit-border-radius:10px 10px 10px 10px;
 margin-left:50px;
 margin-top:5px;
 margin-bottom:5px;
 text-shadow:2px 2px 5px white;
 }

.part{
 position:absolute;
 width:400px;
 height:280px;
 border-right: dotted #8a7441;
 border-left:dotted #8a7441;
 border-top:dotted #8a7441;
 border-bottom:dotted #8a7441;
 padding-right:5px;
 padding-left:5px;
 margin-top:-136px;
 margin-left:30px;
 }
.part2{
 width:300px;
 height:25px;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 text-align:center;
 padding-top:3px;
 color:white;
 font-size:14px;
 position:absolute;
 -moz-border-radius:10px 10px 10px 10px;
 -webkit-border-radius:10px 10px 10px 10px;
 margin-left:50px;
 margin-top:5px;
 margin-bottom:5px;
 text-shadow:2px 2px 5px white;
 }

.top{
 width:300px;
 height:25px;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 text-align:center;
 padding-top:3px;
 margin-left:50px;
 margin-top:5px;
 color:white;
 font-size:14px;
 position:absolute;
 -moz-border-radius:10px 10px 10px 10px;
 -webkit-border-radius:10px 10px 10px 10px;
 text-shadow:2px 2px 5px white;
  }
 
.forget{
 width:300px;
 height:25px;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 text-align:center;
 padding-top:3px;
 margin-left:50px;
 margin-top:5px;
 color:white;
 font-size:14px;
 position:absolute;
 -moz-border-radius:10px 10px 10px 10px;
 -webkit-border-radius:10px 10px 10px 10px;
 text-shadow:2px 2px 5px white;
  }
 
 a.saint
{
 position:absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
 width:150px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 text-align:center;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 text-decoration:none;
 font-size:14px;
 margin-top:160px;
 margin-left:-490px;
   }
   
a.saint  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.saint:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:absolute;
 text-decoration: none;
 text-shadow:2px 2px 5px darkblue;
 color:white;
   }
   
a.saint:hover  span
{
 width: 200px;
 height: 140px;
 display: inline;
 position: absolute;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px darkblue;
 top:21px;
 left:-25px;
 font-size:12px;
 }
 
 a.spectre
{
 position:absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
 width:150px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 text-align:center;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 text-decoration:none;
 font-size:14px;
 margin-top:160px;
 margin-left:-290px;
   }
   
a.spectre  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.spectre:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:absolute;
 text-decoration: none;
 text-shadow:2px 2px 5px indigo;
 color:white;
   }
   
a.spectre:hover  span
{
 width: 200px;
 height: 140px;
 display: inline;
 position: absolute;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px indigo;
 top:21px;
 left:-25px;
 font-size:12px;
 }
 
 a.marina
{
 position:absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
 width:150px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 text-align:center;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 text-decoration:none;
 font-size:14px;
 margin-top:160px;
 margin-left:-90px;
   }
   
a.marina  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.marina:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:absolute;
 text-decoration: none;
 text-shadow:2px 2px 5px deepskyblue;
 color:white;
   }
   
a.marina:hover  span
{
 width: 200px;
 height: 140px;
 display: inline;
 position: absolute;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px deepskyblue;
 top:21px;
 left:-25px;
 font-size:12px;
 }
 
 a.ase
{
 position:absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
 width:150px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 text-align:center;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 text-decoration:none;
 font-size:14px;
 margin-top:160px;
 margin-left:110px;
   }
   
a.ase  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.ase:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:absolute;
 text-decoration: none;
 text-shadow:2px 2px 5px white;
 color:white;
   }
   
a.ase:hover  span
{
 width: 200px;
 height: 140px;
 display: inline;
 position: absolute;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px white;
 top:21px;
 left:-25px;
 font-size:12px;
 }
 
 a.astre
{
 position:absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
 width:150px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 text-align:center;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 text-decoration:none;
 font-size:14px;
 margin-top:160px;
 margin-left:310px;
   }
   
a.astre  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.astre:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:absolute;
 text-decoration: none;
 text-shadow:2px 2px 5px darkred;
 color:white;
   }
   
a.astre:hover  span
{
 width: 200px;
 height: 140px;
 display: inline;
 position: absolute;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px darkred;
 top:21px;
 left:-25px;
 font-size:12px;
 }

Et voici le code HTML ( conscient qu'il y a certainement des erreurs.. )

Code:
</style></head>
<body>
   <div class="pa">
   <a href="http://www.saints-of-thepast.com/f1-regles" target="_blank" class="link"><color=#6e5d1d><b>R</b>èglement</color></a>
   <a href="http://www.saints-of-thepast.com/f3-presentation" target="_blank" class="link"><color=#6e5d1d><b>P</b>résentation</color></a>
   <a href="http://www.saints-of-thepast.com/f170-liste-des-personnages" target="_blank" class="link"><color=#6e5d1d><b>P</b>ersonnages</color></a>
   <a href="http://www.saints-of-thepast.com/f2-news" target="_blank" class="news"><color=#6e5d1d><b>N</b>ews</color></a>   
   <a href="http://www.saints-of-thepast.com/f4-questions-reponses" target="_blank" class="link"><color=#6e5d1d><b>Q</b>uestions ?</color></a>
   <a href="http://www.saints-of-thepast.com/f114-partenaires-de-saints-of-the-past" target="_blank" class="link"><color=#6e5d1d><b>P</b>artenaires</color></a>
   

   <div class="staff">
   <div class="well">LE STAFF DE <b>S</b>AINT <b>O</b>F <b>T</b>HE <b>P</b>AST VOUS SOUHAITENT LA BIENVENUE !</div>
   

   <a class="vio"><img src="http://img89.imageshack.us/img89/1290/violate2.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>V</b>iolate~</b></div>
   <div><a href="http://www.saints-of-thepast.com/u1"><img src="http://img89.imageshack.us/img89/1290/violate2.png"></a>
                  <a href="http://www.saints-of-thepast.com/msg.forum?mode=post&u=1" target="_blank" style="text-decoration:none;color:red;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>W</b>ebMaster|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img3.imageshack.us/img3/1017/urioadm.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>U</b>rio~</b></div>
   <div><a href="http://www.saints-of-thepast.com/u360"><img src="http://img3.imageshack.us/img3/1017/urioadm.png"></a>
                  <a href="http://www.saints-of-thepast.com/msg.forum?mode=post&u=360" target="_blank" style="text-decoration:none;color:red;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>C</b>ancer|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img90.imageshack.us/img90/5468/freiya.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>F</b>reyja~</b></div>
   <div><a href="http://www.saints-of-thepast.com/u487"><img src="http://img90.imageshack.us/img90/5468/freiya.png"></a>
                  <a href="http://www.saints-of-thepast.com/msg.forum?mode=post&u=487" target="_blank" style="text-decoration:none;color:red;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>A</b>mour|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img829.imageshack.us/img829/5126/hadesadm.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>H</b>adès~</b></div>
   <div><a href="http://www.saints-of-thepast.com/u517"><img src="http://img829.imageshack.us/img829/5126/hadesadm.png"></a>
                  <a href="http://www.saints-of-thepast.com/msg.forum?mode=post&u=517" target="_blank" style="text-decoration:none;color:red;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>M</b>onarque|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img405.imageshack.us/img405/192/henriques.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>H</b>enriques~</b></div>
   <div><a href="http://www.saints-of-thepast.com/u574"><img src="http://img405.imageshack.us/img405/192/henriques.png"></a>
                  <a href="http://www.saints-of-thepast.com/msg.forum?mode=post&u=574" target="_blank" style="text-decoration:none;color:red;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>H</b>ydra|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img401.imageshack.us/img401/2065/loki.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>L</b>oki~</b></div>
   <div><img src="http://img401.imageshack.us/img401/2065/loki.png">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=638" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>M</b>ensonge|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img220.imageshack.us/img220/4360/kyro.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>K</b>yro~</b></div>
   <div><img src="http://img220.imageshack.us/img220/4360/kyro.png">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=595" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>S</b>quale|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img217.imageshack.us/img217/4691/athenau.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>A</b>rianna~</b></div>
   <div><img src="http://img217.imageshack.us/img217/4691/athenau.png">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=417" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>S</b>agesse|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img339.imageshack.us/img339/4249/chronost.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>C</b>hronos~</b></div>
   <div><img src="http://img339.imageshack.us/img339/4249/chronost.png">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=552" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>G</b>emini|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img407.imageshack.us/img407/6917/pers.jpg">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>P</b>erséphone~</b></div>
   <div><img src="http://img407.imageshack.us/img407/6917/pers.jpg">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=641" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>R</b>eine|
               </div>
            </span>
         </a>         
      <a class="vio"><img src="http://img8.imageshack.us/img8/8193/thetis.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>T</b>hétis~</b></div>
   <div><img src="http://img8.imageshack.us/img8/8193/thetis.png">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=650" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>S</b>irène|
               </div>
            </span>
         </a>      
</div>
      <div class="story"><div class="story2"><b>S</b>tory</div><b>O</b>n raconte que, dans la Mythologie Antique Grecque, lorsque les forces du Mal menaçaient la Terre, des jeunes guerriers protégeaient la Déesse Athéna et faisaient régner l'Ordre et la Justice. On les appelle les Chevaliers Sacrés d'Athéna.On raconte aussi que leur force était si phénoménale que de leur poing ils pouvaient fendre le Ciel, et d'un coup de pied ils pouvaient entrouvrir la terre. Athéna se réincarne sur Terre tous les 200 ans pour combattre les forces du Mal, qui ne sont d'autres que la folie des autres Dieux voulant conquérir la planète et instaurer leur utopie.


<b>E</b>n 1990, les Chevaliers de Bronze, menés par Seiya de Pégase, et au service de Saori Kido, la Réincarnation d'Athéna, ont réussi à sauver la Terre ainsi que leur Déesse de nombreuses fois, contre les griffes de Saga des Gémeaux, de l'Empereur Poséidon et du Sombre Monarque Hadès.


<b>M</b>ais, savez vous ce qui s'est passé il y a 243 ans ? Cette Guerre dont ont survécu les légendaires Shion du Bélier et Dôko de la Balance ? Voici leur histoire...</div>

<span class="part"><div class="part2"><b>P</b>artenaires</div>
                  <div style="margin-top:45px;"><marquee style="width:350px;" direction="right" onmouseover=this.stop(); onmouseout=this.start();>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                  </marquee>
                  <marquee style="width:350px;" direction="left" onmouseover=this.stop(); onmouseout=this.start();>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                  </marquee></div>
                  <div class="top"><b>T</b>op <b>S</b>ites</div>
                  <div style="margin-top:45px;margin-left:-185px;"><a href="http://www.root-top.com/topsite/galaad/in.php?ID=5">
                  <img src="http://i67.servimg.com/u/f67/13/47/09/85/bpubss10.jpg"></a></div>
                  <div style="margin-top:-31px;"><a href="http://www.root-top.com/topsite/ssanthologie/in.php?ID=8">
                  <img src="http://i47.tinypic.com/rcqbrl.jpg"></a></div>
                  <div style="margin-top:-31px;margin-left:185px;"><a href="http://www.root-top.com/topsite/korben/in.php?ID=618">
                  <img src="http://img.root-top.com/topsite/korben/banner.gif"></a></div>
                  <div style="color:darkred">Un clic ne coute rien et peut apporter beaucoup :)</div>
                  <div class="forget"><b>D</b>on't <b>F</b>orget !</div>
                  <div style="margin-top:40px;"><a href="http://www.copyrightfrance.com/php/certificat.php?reference=N246166">
                  <img src="http://img174.imageshack.us/img174/8513/n2461661uf0.gif"></a></div>
                  </span>
      <a class="saint"><b>S</b>aints d'<b>A</b>théna
   <span>
<u><b>E</b>ffectif</u> : <i>19</i>

<u><b>D</b>ivinité</u> : <i>1</i>

<u><b>O</b>r</u> : <i>9</i>

<u><b>S</b>ilver</u> : <i>2</i>

<u><b>B</b>ronze</u> : <i>7</i>


<u><b>A</b>lliance</u> : <i>Izanami</i>

<u><b>G</b>uerre</u> : <i>Hadès ; Poséidon</i>
            </span>
         </a>
      <a class="spectre"><b>S</b>pectres d'<b>H</b>adès
   <span>
<u><b>E</b>ffectif</u> : <i>18</i>

<u><b>D</b>ivinité</u> : <i>4</i>

<u><b>J</b>uge</u> : <i>2</i>

<u><b>C</b>éleste</u> : <i>8</i>

<u><b>T</b>errestre</u> : <i>3</i>

<u><b>R</b>enégat</u> : <i>1</i>


<u><b>A</b>lliance</u> : <i>PNA- Poséidon</i>

<u><b>G</b>uerre</u> : <i>Athéna</i>
            </span>
         </a>
      <a class="marina"><b>M</b>arinas de <b>P</b>oséidon
   <span>
<u><b>E</b>ffectif</u> : <i>9</i>

<u><b>D</b>ivinité</u> : <i>1</i>

<u><b>G</b>énéral</u> : <i>2</i>

<u><b>C</b>apitaine</u> : <i>4</i>

<u><b>L</b>ieutenant</u> : <i>2</i>


<u><b>A</b>lliance</u> : <i>PNA - Hadès ; Odin</i>

<u><b>G</b>uerre</u> : <i>Athéna</i>
            </span>
         </a>
      <a class="ase"><b>A</b>ses d'<b>O</b>din
   <span>
<u><b>E</b>ffectif</u> : <i>10</i>

<u><b>D</b>ivinité</u> : <i>2</i>

<u><b>A</b>se</u> : <i>3</i>

<u><b>W</b>alkyrie</u> : <i>4</i>

<u><b>H</b>eimdall</u> : <i>1</i>


<u><b>A</b>lliance</u> : <i>PNA - Poséidon ; Athéna</i>

<u><b>G</b>uerre</u> : <i>Hadès</i>
            </span>
         </a>
      <a class="astre"><b>A</b>stres d'<b>I</b>zanami
   <span>
<u><b>E</b>ffectif</u> : <i>7</i>

<u><b>D</b>ivinité</u> : <i>0</i>

<u><b>P</b>lanète</u> : <i>5</i>

<u><b>P</b>rimaire</u> : <i>0</i>

<u><b>S</b>econdaire</u> : <i>2</i>


<u><b>A</b>lliance</u> : <i>Athéna</i>

<u><b>G</b>uerre</u> : <i>Hadès ; Poséidon</i>
            </span>
         </a>

</div>
   
   
</body>
</html>

Le lien du forum est ici et sert de passerelle pour l'original.
Celui-ci est en PHBB2.

Voici deux captures d'écran vous permettant peut-être de voir un peu plus le noeud du souci :

Code OK sous Firefox :

Ici

Code NOK sous Google Chrome :

Ici

Merci par avance pour vos réponses,

Amicalement, Oyo


Dernière édition par Oyoken le Mar 11 Jan 2011, 09:56, édité 1 fois
MessageSujet: Souci d'affichage Chrome et Firefox   Souci d'affichage Chrome et Firefox EmptyLun 27 Déc 2010, 11:31
Revenir en haut Aller en bas
http://www.creativejuiz.fr/
Riku Asakura
{ Membre }
{ Membre }

Masculin Messages : 69



Souci d'affichage Chrome et Firefox Empty
Bonjour,

Dans un premier temps :
- connais-tu la différence entre un élément inline et un élément block ?
- que représente l'élément span et l'élément div
- connais-tu la différence entre un positionnement absolute, relative, et fixed ?

Simples questions pour pouvoir te répondre efficacement.

Je pense déjà que le problème vient de tes nombreuses div qui se trouvent dans des span.
Le navigateur qui a raison et Chrome pour le coup, Firefox a des bogues Razz

Bonne soirée
MessageSujet: Re: Souci d'affichage Chrome et Firefox   Souci d'affichage Chrome et Firefox EmptyLun 27 Déc 2010, 18:54
Revenir en haut Aller en bas
http://oyoken.forumactif.org/
Oyoken
Oyoken
{ Membre }
{ Membre }

Masculin Messages : 34



Souci d'affichage Chrome et Firefox Empty
Bonjour,

Ayant appris en autodidacte effectivement je réponds par la négative à tes trois questions.

-Pour la première je ne sais pas mais je vais regarder sur le forum.
-Pour la deuxième je n'arrive pas à m'apercevoir de la différence. Travaillant à la pratique j'ai juste remarqué qu'en utilisant la balise span celle-ci me permettait de placer mes éléments côte à côte alors que la balise div me fait sauter une ligne à chaque fois >.<
-Pour la dernière question j'ai beau avoir eut les explications qui expliquent la différence je n'arrive vraiment pas à discerner lequel sert à quoi.

Mince moi qui suis un peu pro-FF je viens de prendre un coup derrière la tête xD
Ce qui peut paraitre bizarre c'est que le seul endroit où j'ai "improviser" le code sans passer par des éléments connus c'est sur l'affichage de l'endroit où se trouve les partenaires et les top-sites... Et effectivement à cet endroit je dispose d'une balise span avec des div à l'intérieur.

Les autres endroits où des span sont utilisés, le sont dans la mesure où j'ai suivi ce tutoriel qui inclut des div dans des span... Arghhh je m'y perds...

Mais bon le commencent déjà peut-être et les trois premières questions ^.^

Merci pour ton implication, Oyo.

Edit : Donc si j'ai bien regardé quelques infos sur la toile je me rends compte que la balise div appartient à l'élément block et que la balise span appartient à l'élement inline... Mouais... Donc c'est quoi concrètement leurs différences, l'une fait apparaitre des petits oiseaux dans le ciel pendant que l'autre fait tomber des éclairs..? xD
Je pense que tous mes problèmes se regroupent mais...
MessageSujet: Re: Souci d'affichage Chrome et Firefox   Souci d'affichage Chrome et Firefox EmptyMar 28 Déc 2010, 03:46
Revenir en haut Aller en bas
http://www.creativejuiz.fr/
Riku Asakura
{ Membre }
{ Membre }

Masculin Messages : 69



Souci d'affichage Chrome et Firefox Empty
Bonsoir,

C'est globalement ça ^^
Div est un élément sémantiquement neutre de type block (h1 par exemple est aussi de type block, mais il n'est pas neutre, il représente un titre de niveau 1).
Dans le même goût, span est un élément sémantiquement neutre de type inline (là où strong est un élément inline de sémantique "texte important").

Un inline permet aux éléments de même type de se placer les uns à côté des autres.
Un block passe à la ligne et prend par défaut toute la largeur disponible. Cet élément peut être redimensionné.

Un block dans un inline n'est pas admis par le W3C et les navigateurs ont des interprétations différentes.

Déjà quand tu fais un truc admis par le W3C tu peux avoir des comportements différents, alors si en plus tu fais des choses non admises, je te laisse imaginer le désastre.

Je te conseille donc d'inverser l'utilisation des div et span.

Après, rien ne t'empêche d'utiliser en CSS un display: inline; sur un élément de type block, et un display: block; sur un élément de type inline.

La solution miracle est le display placé en "inline-block".
Cela te permet de manipuler des éléments les uns à côté des autres tout en offrant la possibilité de les dimensionner.



Concernant le positionnement.
Par défaut tu as du relative.
Le positionnement absolute te permet de sortir du flux un élément (il n'interagit donc plus avec les autres éléments du flux), cet élément se place par rapport au dernier élément positionné. (soit le viewport par défaut).
Le positionnement fixed a un peu le même comportement que l'absolute, sauf qu'il permet de ne pas faire interagir l'élément avec l'action scroll de la page.

C'est pour résumer... on pourrait avoir des kilomètres d'explications comme ça.
Le meilleur c'est l'expérience et l'expérimentation.

La plupart des intégrateurs sont autodidactes, on apprend difficilement ces choses en école.

Bonne continuation Wink

MessageSujet: Re: Souci d'affichage Chrome et Firefox   Souci d'affichage Chrome et Firefox EmptyMar 28 Déc 2010, 13:44
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Souci d'affichage Chrome et Firefox Empty
Bonjour (:
Votre problème est-il toujours d'actualité ? S'il est maintenant résolu, merci de cocher l'icône Souci d'affichage Chrome et Firefox Resolu3 en éditant votre premier message (:


Dernière édition par Psycho le Ven 07 Jan 2011, 16:56, édité 1 fois
MessageSujet: Re: Souci d'affichage Chrome et Firefox   Souci d'affichage Chrome et Firefox EmptyMar 04 Jan 2011, 13:15
Revenir en haut Aller en bas
http://oyoken.forumactif.org/
Oyoken
Oyoken
{ Membre }
{ Membre }

Masculin Messages : 34



Souci d'affichage Chrome et Firefox Empty
Bonjour,

Le problème n'est pas solutionné pour autant mais je vais tenter de suivre les conseils de Riku Asakura.
Merci pour son implication.

Cordialement, Oyo.
MessageSujet: Re: Souci d'affichage Chrome et Firefox   Souci d'affichage Chrome et Firefox EmptyVen 07 Jan 2011, 03:57
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Souci d'affichage Chrome et Firefox Empty
L'icône résolu est cochée, je déplace donc le sujet (:
MessageSujet: Re: Souci d'affichage Chrome et Firefox   Souci d'affichage Chrome et Firefox EmptyMar 11 Jan 2011, 15:15
Revenir en haut Aller en bas
khawla89
Invité




Souci d'affichage Chrome et Firefox Empty
j'ai une Problème au niveau d affichage du ma page web code en php css dont la suivante:avec Firefox le schadow s'affiche bien contrairement au chrome et Torch et IE SVP pouvez vous m'aider?
Merci
MessageSujet: Affichage de Page web avec différents navigateurs   Souci d'affichage Chrome et Firefox EmptyJeu 30 Avr 2015, 09:29
Revenir en haut Aller en bas
Contenu sponsorisé




Souci d'affichage Chrome et Firefox Empty
MessageSujet: Re: Souci d'affichage Chrome et Firefox   Souci d'affichage Chrome et Firefox Empty
Revenir en haut Aller en bas
 

Souci d'affichage Chrome et Firefox

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» [résolu] Un rendu différent entre chrome et firefox
» Gros souci sur ma pa
» Header aléatoire qui bug (différence chrome/firefox) [A archiver]
» Rendu très différents de Chrome à Firefox (titre forums + chat box + scroll)
» Souci avec le header.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forumactif.com