:: DEV .:. IE et Sauts de ligne / Retour chariot
Cela fait maintenant un bail que je me bats tous les jours avec IE. C’est bien sur le lot de tous les intégrateurs, développeurs, bidouilleurs du web. Sauf que là putain de putain, ça commence à me gaver sévère à certains niveaux.
Je viens de découvrir la source d’un des problèmes que je cherchais depuis quelques temps complètement par hasard… vous savez, le fameux espacement entre deux items qui apparait uniquement sur IE. Pour prendre un exemple assez simple, imaginons une image et un div l’un au dessus de l’autre. On aurait un truc du genre :
<img src="/monimage.jpg" alt="iedemerde" /> <div>du poulet.</div>
Pour bien isoler ce div, on va l’entourer pour vérifier que cela colle bien. Résultat sur firefox : l’image et le div sont accolés, IE, un espace de 4 pixel est visible. Je cherche plusieurs solutions, celle que l’on utilise habituellement pour IE : passer une position relative, passer un zoom à 1… Rien n’y fait. Et par hasard, je fais ça :
<img src="/monimage.jpg" alt="iedemerde" /><div>du poulet.</div>
Miracle, plus d’espace sur IE. Le pire dans l’histoire, c’est que je n’ai pas le problème deux fois de suite… en gros, ma structure ressemble à ça :
<img src="/monimage.jpg" alt="iedemerde" /> <div>du poulet.</div> <img src="/monimage2.jpg" alt="iedemerdebis" /> <div>du boeuf</div>
Première partie, accolée sous IE et Firefox (safari et tout), deuxième accolée sous tous les navigateurs sauf IE ; je suis obligé de ne pas faire de retour.
Donc ma question est : est-ce que quelqu’un a trouvé une origine à ce problème ? Ou est-ce tout simplement un putain de truc “kifofaireavec” ?
Evidemment que ie c’est un truc kifofaireavec.
Ah c’était pas la question ? Merde.
Oui ca m’a pris la tête aussi y’a quelques années. C’était surtout visible avec du code du genre :
<td>
<img …>
</td>
Qui produisait un petit espacement autour de l’image sur IE.
Si ce n’est pas encore fait utilises toujours un Reset CSS en entête de ton fichier CSS (et dès le début de ton développement). Ca résout 95% des problèmes.
C’est con __MaX__ j’ai eu le même problème sur 0defaut. J’ai cherché pendant un bon moment jusqu’à trouver que c’était effectivement ce retour à la ligne qui faisait cet espacement à la con.
L’Amérique avait bush, la France a sarko, les devs web ont IE.
Vive IE, le pire c’est que comme tu dis le problème est assez aléatoire. Un jour ça va pas marcher impossible de savoir pourquoi.
Mais bon des trucs comme ça avec IE j’en ai à la pelle.
Exemple avec le HR: Sous IE, la couleur du HR est considéré comme un texte donc il faut utiliser la propriété color. erf !
hr {
border:0px;
border-top:1px dashed #A5A5A5;
background:#FFF;
color:#FFF;
}
Je plussoie (quel néologisme de merde) Mathieu pour l’utilisation d’un reset, mais propose plutôt Eric Meyer’s Reset Reloaded qui est bien efficace je trouve.
me semble que le retour chariot est interpreté en xhtml ou une histoire comme ça.
Ca ma bien pris la tête à une époque, je me fais plus baiser maintenant
"L’Amérique avait bush, la France a sarko, les devs web ont IE."
Je dirai même plus: les blogs de nofrag ont Eryx.
il suffit de mettre :
img {
vertical-align:bottom;
}
dans la css pour corriger ce problème.
J’avais jamais approfondit les histoires de reset. Je vais me pencher dessus.
Adeh3r, ça serait le comble que les sauts de ligne soient interprétés, même en xhtml… comment tu indentes le code ? le seul retour interprété que je connaisse, c’est celui en php : \n ou \r (je crois que c’est r, plus sur).
Mais théoriquement, le retour chariot c’est nada en html.
il suffit de mettre :
img {
vertical-align:bottom;
}
dans la css pour corriger ce problème.
le vertical-align sur une image ne marche que dans le contexte d’une image insérée dans ligne ou d’un bloc au fait. Pas dans ce cas de figure.
Evidemment que les retour chariot ne sont pas interprétés en XHTML.
__MaX__ a écrit :
le seul retour interprété que je connaisse, c’est celui en php : \n ou \r (je crois que c’est r, plus sur).
Cette phrase ne veut strictement RIEN dire.
Je dirai même plus: les blogs de nofrag ont Eryx.
C’est me faire trop d’honneurs.
En quoi elle ne veut rien dire ?
Je viens de tester plusieurs trucs (changer l’encodage de la page, le format du fichier en unix), rien n’y fait : au moindre espacement, tabulation, ou saut de page (qu’il soit en LF ou CR-LF), il y a un décalage de 3px.
le seul moyen d’avoir un affichage identique est donc de surcharger le style pour IE, avec un hack du type:
<div style="margin-top:0px !important;margin-top:-3px;">du poulet.</div>
J’avais supprimé mon commentaire pour faire des tests avant d’être sur, du coup tu as supprimé le tien aussi.
Je viens de tester et ma solution du "vertical-align:bottom" sur les images marche parfaitement chez moi sur ie6.
Je veux bien pyerogourmand, mais vertical align par rapport à quoi ? Avec ça :
[code]
<div>
<img src="/monimage.jpg" alt="iedemerde" />
<div>du poulet.</div>
<img src="/monimage2.jpg" alt="iedemerdebis" />
<div>du boeuf</div>
</div>
[/code]
Un div global plus le reste, vertical align bottom par rapport à quoi ?
Conradson, yeap, c’est ce que je voulais faire, mais pourquoi surcharger un style pour un putain de retour chariot quoi… ça fait vraiment chier :/
Moi avec le simple code suivant :
<html>
<head>
<title>Test</title>
</head>
<body style="padding:0px;margin:0px">
<img src="/monimage.jpg" alt="iedemerde" style="vertical-align:bottom;" />
<div>du poulet.</div>
<img src="/monimage2.jpg" alt="iedemerde" style="vertical-align:bottom;" />
<div>du boeuf</div>
</body>
</html>
J’ai une différence entre IE6 et Firefox de 1px trop haut pour IE6.
Mais bon, à choisir entre les deux solutions, je préfère la tienne car elle évite de jouer avec les marges et d’avoir un "hack" css (même si là c’est pas vraiment un hack, vu que c’est une variable de css et que ça passe en W3C).
ou alors :
img {vertical-align:bottom;}
dans la css.
vous pouvez voir ici ce que ça donne (pas d’espacements entre les div et img):
http://browsershots.org/http://pyerogourmand.free.fr/test/test.html
Ouaip Conradson, d’où l’exemple bateau qui arrive quand même à merder :x
pyerogourmand, on t’a lu eing. Je t’ai même répondu. Hors, le vertical-align marche que dans certains cas. Là mon but c’est de trouver une solution qui s’applique dans tous les cas (ou dans la majorité des cas au moins) :)
img {
display: block;
}
J’avais chier avec ce soucis également
Je me rapelles que pour résoudre ce problème il fallait ruser avec un style="position:absolute"… ou quelque chose du genre