Texte en dessous d'image sur google chrome

[Oz-Chan]

Bonsoir,
me voilà avec un autre problème en ce qui concerne chrome. Sur firefox, mon texte marche parfaitement comme vous pouvez le voir sur cette image:
Alors que sur google chrome, la première ligne passe en dessous de l'image et soudainement par dessus quand l'image est pleinement apparue comme cela :
Il doit surement y avoir un problème de webkit...
Voici mon CSS:

Code:

/* --- DESCRIPTIONS DES FORUMS --- */

.phalink {
  padding: 0px 5px 1px 5px;
  border: 1px solid #870000;
  background-color: #870000;
  border-radius: 5px;
  margin-bottom:50px;
  border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  letter-spacing: 0px;
  -moz-transition: all 1s;
    -webkit-transition: all 1s;
}

a.phalink {
  color: #FFDF40;
}

a.phalink:hover {
  color: #FF733B;
  letter-spacing: 0.5px;
}

.desc {
  height: 46px;
  margin-top: 9px;
  margin-bottom: -1px;
  padding: 5px;
  overflow: hidden;
  padding-right: 0px;
  text-align: justify;
  border: 2px solid #870000;
  border-top: 6px solid #870000;
  border-radius: 20px 0px 0px 0px;
  -webkit-border-radius: 20px 0px 0px 0px;
  background-image: url("http://i42.servimg.com/u/f42/13/82/15/09/kyu112.jpg");
  box-shadow: 0px 0px 2px #c16a6a;
  -moz-box-shadow: 0px 0px 2px #c16a6a;
  -webkit-box-shadow: 0px 0px 2px #c16a6a;
}

.txtdesc {
margin-top: -7px;
  height: 85px;
}
  .pix {
          margin-top: -7px;
          margin-right: 3px;
            margin-left: 4px;
          opacity: 0.5;
          -webkit-transition: opacity 1s;
          -moz-transition: opacity 1s;
          -o-transition: opacity 1s;
          -ms-transition: opacity 1s;
          transition: opacity 1s;
        }

.pix:hover {
  margin-top: -7px;
          margin-right: 3px;
            margin-left: 4px;
  opacity: 1;
  -webkit-transition: opacity 1s;
          -moz-transition: opacity 1s;
          -o-transition: opacity 1s;
          -ms-transition: opacity 1s;
          transition: opacity 1s;
}

et mon HTML

Code:

<table class="desc" border="0">
<tr>
<td><div style="float: right;">
<img class="pix" src="http://i62.servimg.com/u/f62/13/82/15/09/vessal10.jpg"/>
</div><div class="txtdesc"> Résidence principale des Bezarius. Excentré, loin de la foule qui grouille en pleine journée dans les rues de la capitale, le Manoir dégage un air familier lorsque l'on s'en approche. Étrangement, ses visiteurs s'y sentent chez eux. Serait-ce le cadre idyllique qui l'entoure, les quelques arbres que l'on peut apercevoir depuis les fenêtres, ou alors les papiers peints qui rappellent les nombreuses années déjà écoulées ? Welcome.~</div></td></tr></table>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f35-le-hall-les-couloirs">Hall & Couloirs</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f133-les-chambres">Chambres</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f36-les-autres-salles">Autres Salles</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f34-la-chapelle">Salle de réception</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f134-l-exterieur">Extérieur</a>

Je vous remercie pour votre future aide et vous souhaite une bonne soirée !

[Oz-Chan]

Up !

[Oz-Chan]

UP

[Oz-Chan]

Up !

[Ea]

Bonjour,


Où en est votre problème ?

Cordialement.

[Oz-Chan]

Bonsoir,
Il est toujours en cours. ;;

[Invité]

Salut Oz-Chan,
change ton code HTML par celui-ci:

Code:


<table class="desc" border="0">
<tr>
<td  class="txtdesc">
Résidence principale des Bezarius. Excentré, loin de la foule qui grouille en pleine journée dans les rues de la capitale, le Manoir dégage un air familier lorsque l'on s'en approche. Étrangement, ses visiteurs s'y sentent chez eux. Serait-ce le cadre idyllique qui l'entoure, les quelques arbres que l'on peut apercevoir depuis les fenêtres, ou alors les papiers peints qui rappellent les nombreuses années déjà écoulées ? Welcome.~</td>
<td class="pix"><img src="http://i62.servimg.com/u/f62/13/82/15/09/vessal10.jpg"/>
</td></tr></table>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f35-le-hall-les-couloirs">Hall & Couloirs</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f133-les-chambres">Chambres</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f36-les-autres-salles">Autres Salles</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f34-la-chapelle">Salle de réception</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f134-l-exterieur">Extérieur</a>


J'ai juste supprimé les balises div et attribué des td à la place en respectant les class respectives .

a++

[Ea]

Autrement, j'imagine que c'est vos margin-top qui foirent.

Vous avez 2 <div>, le deuxième ( avec class="txtdesc" ) se trouve 7 pixels plus haut grâce à margin-top: -7px

Ensuite dans le premier, vous avez une image ( avec class="pix" ) qui est remontée de 7 pixels, mais le bloc qui l'entoure ( et empêche la présence du texte ) reste tout de même 7 pixels plus bas.

Ainsi sur chrome apparemment les 7 pixels de différence de hauteur permette d'avoir une ligne complète en haut, et sur un autre navigateur pas.

Donc il faut arranger ça différemment si vous ne voulez pas ce problème, par exemple mettre le margin-top: -7px sur le div qui entour le <img class="pix" /> plutôt que le <img class="pix" /> lui-même.


Cordialement.

[Oz-Chan]

Bonjour,
Je vous remercie de votre aide !
Pour Milouze, ton code fait que mon texte ne reste que à gauche et ne passe même plus en dessous de mon image avec une marge beaucoup trop grande. Ce n'est pas ce que je cherche mais merci quand même. >.<
Ea-> J'ai essayé de mettre un margin-top:7px; mais cela ne fonctionne pas... Est-ce le bon endroit : <td><div style="float: right;maring-top:7px;">. Si non, pourriez-vous me le montrer?
je vous remercie encore tous les deux pour votre précieuse aide !

[Ea]

Oui, sauf que c'est "margin" et pas "maring" et -7px plutôt que 7px.

Et après il faudrait enlever celui qui est mis à .pix dans le css car l'image serait alors 7 pixels trop haut.


Cordialement.

[Oz-Chan]

Re,
J'ai bien fait ce que vous m'avez demandé mais le résultat se trouve être toujours le même sur google chrome...

[Ea]

awip moi aussi

il faudrait plutôt retirer le margin-top à txt-desc, et si vous voulez remonter la description et l'image, ajouter :

Code:

.desc { padding-top: 0px; }

( là comme valeur vous avez 5px, donc en réduisant à 0 ça remonterait les éléments contenu de 5 pixels )

Cordialement.

[Oz-Chan]

Re,
Alors, je ne peux pas modifier cette partie car sinon, j'ai tout le cadre autour qui change de forme et qui n'est plus alignée avec celui de droite.
Voilà le rendu :
firefox

Chrome


Je vous remercie toujours de votre aide.

[Ea]

Chez moi c'est le contraire, sans le padding top le cadre à gauche est 5 pixels trop haut : https://i.imgur.com/yW5wQ.png

Avec il est à la même hauteur : https://i.imgur.com/9HIbD.png


Cordialement.

[Oz-Chan]

Effectivement mais il reste trop grand comparé à celui de droite.
Il y a un espace en haut de la description qui ne devrait pas être là et ne veut pas disparaitre.. Comment puis-je faire pour que mes deux lignes soient égales?

[Ea]

Pour que le haut et le bas des 2 cadres soient au même pixel ?

Je ne vois qu’agrandir la taille de celui de droite, ou diminuer la taille de celui de gauche.


Cordialement.

[Oz-Chan]

Ce que j'aimerais, c'est que le texte redevienne comme avant. Il y a un espace ici que j'aimerais enlever car ce n'est pas beau.

Et que ça redevienne comme ceci

Merci encore de votre aide !

[Ea]

Et bien comme mis au dessus :

Code:

.desc { padding-top: 0px; }

Moi je ne vois pas ce que ça ajoute comme problème.

Vous avez :

Code:

.desc { padding: 5px; }

dans le CSS et c'est de là que vient l'espacement en haut. En mettant le padding-top à 0 ça devrait retirer cette espacement comme voulu.

[Oz-Chan]

C'est presque bon !
J'ai juste encore une petite question. Est-ce possible de faire des espaces entres les lignes des descriptions? Car sur chrome, elles sont toutes collées et sur firefox bien espacées.
merci !

[Ea]

À ma connaissance l'espacement entre ligne ne devrait dépendre que de font-size, line-height et font-family.

Donc par exemple en mettant :

Code:

.txtdesc { line-height: 20px; font-size: 11px; font-family: verdana, tahoma, serif; }

cela devrait donner le même interligne pour tout les navigateurs.

( à part si on a activé des options de navigateur du style "ne pas personnaliser les polices d'écriture" )

Cordialement.

[Oz-Chan]

Merci ! je ne connaissais pas le premier.
Cette fois-ci, tout est bon. Je vous remercie pour votre aide !