Problème de qualité d'images

[Cali93110]

Bonjour à tous, alors voilà, je suis actuellement en train de créer un code pour un formulaire de présentation, et je viens de me rendre compte que, soudainement, la qualité de l'ensemble des images était hyper mauvaise, ce n'était pas le cas y'a encore une heure.
Je parle principalement des émoticones. Il y a aussi l'image incorporée dans mon formulaire de présentation qui est pixelisée. J'ai essayé d'enlever le code, et que cliquer sur "Prévisualiser", ça n'a rien changé, ce n'est donc pas un soucis de codage ou de balises non fermées. Une aide s'il vous plait?

merci.

[Gorgorbey]

Bonjour,

Avez-vous essayer de vider votre cache et vos cookies du navigateur ?
Essayez également en changeant de navigateur et regardez si le problème est le même.

Si cela ne change rien il faudra la code du formulaire ainsi que votre CSS perso.

Cordialement.

[Cali93110]

J'ai vidé mes caches et cookies rien ne change. Sous IE, il n'y a aucun soucis, c'est bien sous Mozilla le problème.
Je n'ai pas terminé le code, mais le voici:

Code:


<table width="525px" align="center" style="-moz-border-radius:10px; -webkit-border-radius:10px; border:3px solid #702626; background-color: #C7CE95; color: #7D6F42;">
  <tr><td>
<center>[img]http://i39.tinypic.com/2na4kdw.jpg[/img]</center><div style="margin: auto; text-align: center; width: 100%; font-variant: small-caps;"><div style="letter-spacing: -1px; text-shadow: 1px 1px 1px rgb(0, 0, 0);"><font face="Georgia"><font size="10"><font color="#473e3b">Prénom du Personnage</font></font></font></div></div>

<hr>

<div style="font-variant: small-caps;">[size=15][b]»[/b] [u]Identité[/u][/size]</div>

<div style="font-variant: small-caps;">• [b]Prénoms[/b]:</div>
<div style="font-variant: small-caps;">• [b]Surnom(s)[/b]:</div>
<div style="font-variant: small-caps;">• [b]Âge[/b]:</div>
<div style="font-variant: small-caps;">• [b]Clan[/b]:</div>
<div style="font-variant: small-caps;">• [b]Rang[/b]:</div>
</td></tr></table>

Pour le CSS, je n'ai stricitement rien touché, c'est le CSS allant avec le thème que j'ai trouvé sur Hitskin. Le voilà:

Code:

tr.post span.gensmall { display: none; } /* Suppression Dernière édition par... */
.bodyline { background-image: url("http://img717.imageshack.us/img717/57/tables2.png"); }

/* Liens */

a:hover {
text-decoration: none !important;
}

a {
font-variant: small-caps;
}

/* Fin liens */

.postbody {
padding-left: 00px;
padding-right: 00px;
text-align:justify;
}

.code {
border: 1px #53A132 dashed;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin: 10px;
padding: 5px;
max-height: 200px;
overflow: auto;
}

.quote {
border: 1px #53A132 dashed;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin: 10px;
padding: 5px;
max-height: 200px;
overflow: auto;
}

.spoiler_closed {
border: 1px #53A132 dashed;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin: 10px;
}

.spoiler_content {
border: 1px #53A132 dashed;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin: 10px;
padding: 5px;
max-height: 200px;
overflow: auto;
}

body {
margin : 0px;
}

.bodyline {
border-left: 10px solid #57453E;
border-right: 10px solid #57453E;
padding: 0px;
}

/* Catégories */

.titre_categorie {
background: #BEBA69;

margin-top: 10px; /*ne pas modifier*/
margin-bottom: -10px; /*a modifier selon vos goûts*/
text-align: center;
height: auto;
width: 100%;
padding-top: 2px;
padding-bottom: 2px;
}

.sujets_messages
{margin-top: 3px;
padding: 3px;
border: 1px dotted #BEBA69;
background-color: #FFFFFF;
width: 200px;
color: #000000;
}


.derniers_sujets
{margin-top: 3px;
padding: 3px;
border: 1px dashed #BEBA69;
background-color: #FFFFFF;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
width: 200px;
color: #000000;
}

/* Fin catégories */

textarea, .textarea.post, input.post {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding: 2px;
}

.forumline{
background-color: #EDE9C7;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border: 3px #BEBA69 solid;
}

a.forumlink:link, a.forumlink:visited {
font-family: georgia;
text-transform : uppercase;
text-align: center;
font-size: 100%;
border: 5px double #BEBA69;
color: #couleur;
letter-spacing: 1px;
display: block;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

a.forumlink:hover, a.forumlink:hover:visited {
text-align: center;
display: block;
border: 5px double #57453E;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.description {
text-align: justify;
height: 100px;
border-left: 3px #BEBA69 solid;
border-right: 1px #BEBA69 solid;
border-top: 1px #BEBA69 solid;
border-bottom: 1px #BEBA69 solid;
border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
-webkit-border-radius: 0px 10px 10px 0px;
margin-left: 5px;
margin-top: 2px;
background-color: #FFFFFF;
padding: 5px;
overflow: auto;
}

.opacity img {
filter:alpha(opacity=50);
-moz-opacity:0.5;opacity: 0.5;
}

.opacity img:hover {
filter:alpha(opacity=100);
-moz-opacity:1;opacity: 1;
}

.boitepresentation {
background-color: #927367;
-moz-border-radius: 0px 10px 10px 0px ;
-webkit-border-radius: 0px 10px 10px 0px;
border-radius: 0px 10px 10px 0px;
padding: 10px;
  border-left: 3px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

.vava {
background-color: #FFFFFF;
width: 200px;
height: 320px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px
}

.identite {
font-size: 110%;
font-variant: small-caps;
text-align: right;
padding-right: 5px;
letter-spacing: 3px;
border-bottom: 3px double #ECE1C1;
}

.bordures {
border-right: #927367 solid 5px;
border-left: #927367 solid 5px;
margin-right: 5px;
margin-left: 5px;
}

.boitedefilante {
width: 300px;
height: 320px;
overflow: auto;
padding: 10px;
text-align: justify;
}

.decoration {
-moz-border-radius: 10px ;
-webkit-border-radius: 10px;
border-radius: 10px;
background-image: URL('http://img201.imageshack.us/img201/6849/relations.png');
border-bottom: #FFFFFF solid 5px;
border-right: #FFFFFF solid 5px;
border-left: #FFFFFF solid 1px;
border-top: #FFFFFF solid 1px;
margin: 10px;
padding: 5px;
}

div.decoration u {
text-decoration: none;
border-bottom: 2px #FFFFFF solid;
}

div.decoration c {
color: #4EA3CE;
font-weight: bold;
font-variant: small-caps;
}

.relations {
-moz-border-radius: 10px ;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #FFFFFF;
border: #000000 solid 1px;
margin: 10px;
padding: 10px;
width: 340px;
height: 150px;
overflow: auto;
text-align: justify;
color: #000000;
}

.profil {
border: 3px #BEBA69 solid;
-moz-border-radius: 10px ;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #FFFFFF;
padding: 2px;
}

/* Accueil */

#menu, #menu ul /* Liste */   
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}

#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #000; /* couleur de fond */       
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 120px; /* largeur */
}

#menu li /* Éléments des listes */     
{
        float : left;
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{
        position: absolute; /* Position absolue */
        width: 120px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#menu li ul li /* Eléments de sous-listes */
{
        /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li               
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */   
{
        color: #000; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}


div.infobulle2 {
  position: relative;
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.infobulle2 div{
  display: none; /* ceci masque l'infobulle */
}
div.infobulle2:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle2:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;

  white-space: wrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 60px; /* on positionne notre infobulle */
  left: 35px;

  text-align: center;

  background: #ebebeb; /* arrière-plan de l'infobulle */

  color: black; /* texte dans l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
                border-radius: 15px;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border: 1px #a13244 dashed;
  width: 175px;
}

div.infobulle {
  position: relative;
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.infobulle div{
  display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;

  white-space: wrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 80px; /* on positionne notre infobulle */
  left: 47px;
  text-align: center;

  background: #ebebeb; /* arrière-plan de l'infobulle */

  color: black; /* texte dans l'infobulle */
  padding: 3px;

  /* bordures de votre infobulle*/
                border-radius: 15px;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border: 1px #a13244 dashed;
  width: 175px;
}

.titrepa {
border-bottom: 3px #000000 dashed;
font-family: georgia, serif;
font-size: 24px;
}

.pageaccueil{
padding: 0px;
background-image: url("http://img717.imageshack.us/img717/57/tables2.png");
}

/* Fin accueil */

[Gorgorbey]

Chez moi avec Mozilla cela donne :


Pouvez-vous faire une capture écran de ce que vous avez et dire à quel endroit vous avez mis le code ?

[Cali93110]

Ben moi déjà ça me donne pas ça du tout! J'ai des sauts de lignes entre "prénoms", "surnoms" et ainsi de suite. Que je voulais d'ailleurs pas....
Mon code, je l'ai posté dans un nouveau message dans le sous forum "Postes-Vacants" de mon forum. Voici quelques captures...

Spoiler:

Spoiler:

Malheureusement on ne voit pas assez bien le soucis de qualité sur les captures...

[Gorgorbey]

Code:

<table width="525px" align="center" style="-moz-border-radius:10px; -webkit-border-radius:10px; border:3px solid #702626; background-color: #C7CE95; color: #7D6F42;">
  <tr><td>
<center><img src="http://i39.tinypic.com/2na4kdw.jpg" border="0" alt="" /></center><div style="margin: auto; text-align: center; width: 100%; font-variant: small-caps;"><div style="letter-spacing: -1px; text-shadow: 1px 1px 1px rgb(0, 0, 0);"><font face="Georgia"><font size="10"><font color="#473e3b">Prénom du Personnage</font></font></font></div></div>
 
<hr>
 <div style="font-variant: small-caps;"><span style="font-size: 15px; line-height: normal"><strong>»</strong> <u>Identité</u></span></div>
 
• <b>Prénoms</b>:<br/>
• <b>Surnom(s)</b>:<br/>
• <b>Âge</b>:<br/>
• <b>Clan</b>:<br/>
• <b>Rang</b>:<br/>
</td></tr></table>

Essayez ceci pour voir s'il y a du mieux.

Pour les émoticônes la qualité est médiocre pour tous les messages du forum ?

[Cali93110]

Non ça ne change strictement rien. :S

Oui dans tout les nouveaux postes et messages. Et même l'image du formulaire, sur le fow, est pixelisée au niveau du texte.

EDITE: Ce n'était en faite rien de grave... j'ai du faire alt+ "+" sans m'en rendre compte et donc zoomer mon écran de navigateur. Mille excuse pour ce petit drame inutile. T_T Un grand merci pour votre patience en tout cas!