8771 sujets

Développement web côté serveur, CMS

[Résolu] Include et caractère parasite sous IE

Bonjour !!

Voilà mon soucis,
Sous IE (mais pas sous FF), j'ai un espace qui apparait entre deux divs.

J'ai simplifié la page au maximum pour isoler le problème.

Le seul indice que j'ai est un petit caractère rectangulaire apparaissant dans le code source de la page généré par IE. Je pense que c'est sa présence qui génère l'espace. Mais si je tente un copier-coller du code source, le caractère en question n'est pas collé...

Sinon, le code de la page est :

<div id="footer">
<?php include ("footer.php"); ?>
</div>


et le ficher inclus :

<div id="credits"><p>texte...</p></div>
<div id="footerDown"></div>
<div id="lowerspacer"></div>


Et oui, il y a un include(), et c'est précisément ce qui pose problème, car en plaçant directement le code à inclure par copier/coller, le caractère parasite n'est pas généré sous IE...

Une idée de la source du problème ?
Il semblerait que le code CSS ait peut-être une influence..

Donc le voilà au cas où : Il y a quelques répétitions inutiles, mais je cherche l'erreur...

@charset "utf-8";
/* CSS Document */
* {
	margin:0; padding:0;/* hack IE */
	} 
html {
	margin:0;
	padding:0;
	border:0;
	}
body {
	margin:0;
	border:0;
	background-image:url(images/motif-fond.png);
	background-repeat:repeat;
	font: 100% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	}
p {
	margin:0;
	}
#footer {
	margin:0;
	padding:0;
	}
#credits {
	margin:0;
	padding:0;
	border-left:solid;
	border-left-color:#FFFFFF;
	border-left-width:1px;
	border-right:solid;
	border-right-color:#FFFFFF;
	border-right-width:1px;
	background-color:black;
	}
#footerDown {
	background-image:url(images/down-footer.png);
	width:958px;
	height:75px;
	}
#footer p {
	margin: 0;
	padding:0;
	}
#lowerspacer {
	height:60px;
	}

Modifié par yakou32 (22 Jan 2008 - 13:34)
Arf ! Je n'avais pas vu que tu l'avais déjà posté Smiley lol !

On dirait bien que le problème vient du text-align: center; mais je ne sais pas pourquoi Smiley rolleyes ...

Tu pourrais le "corriger" en rajoutant :
#footerDown {
	...
	float:left;
}

#lowerspacer {
	...
	clear:left;
}
mais ça n'expliquerait rien.

Le mieux serait peut-être de poser la question dans le salon CSS (en ne mettant que le code html généré).

A+
Modifié par Heyoan (22 Jan 2008 - 14:37)
Merci Heyoan, mais ça ne semble pas corriger le problème...

Vous pouvez constater la différence entre l'interprétation attendue (Firefox), et l'interprétation bizarre (IE) avec l'apparition de ce fameux petit caractère problématique dans la source sous IE.
Modifié par yakou32 (17 Feb 2008 - 12:45)
Hem... Pourquoi y a-t-il un ? ici :
[b][#blue]?[/#][/b]<div id="credits"><p>texte...</p></div>
utf8 + pb rendu + petit carré ou point d'interrogation = BOM

(double BOM, ici, avant la DTD, puis comme premier caractère de l'include footer)

Prenez les bons réflexes, Nom de Diou Smiley cligne
Modifié par Laurent Denis (22 Jan 2008 - 15:17)
C'est bien la question justement...

Dans le code source exprimé par IE, c'est un petit rectangle...
Chez toi c'est un ?

Et sous FF, il n'existe pas, et c'est normal.
En fait le ? apparaît avec FF Smiley cligne !

En fonction de ton éditeur de code, il faut trouver dans les options (et enlever) l'ajout du BOM.
Merci Laurent, c'est sans doute là le soucis Smiley biggrin

Maintenant, je n'y connais rien en BOM, et je tiens à garder un encodage en utf-8 car je vais sans doute utiliser des caractères non occidentaux dans le site.
Je vais donc potasser la page sur la question, proposée sur le site d'Ishida que tu as indiqué.

J'espère que ce n'est pas trop compliqué Smiley sweatdrop
On reprend (C'est pas dans la FAQ ? zut, il serait temps Smiley cligne ).

La BOM est un caractère normalement non visible (espace de largeur nulle) ajouté par certains outils d'édition lors de l'enregistrement en UTF8 au début d'un fichier texte.

Il est destiné à permettre d'identifier un fichier UTF8, mais son usage est déconseillé pour les documents (X)HTML CSS etc., précisément en raison des problèmes d'implémentation qu'il rencontre en particulier dans les navigateurs.

Donc: utiliser l'option de l'éditeur permettant d'enregistrer sans BOM, ou à défaut un éditeur ne générant pas de BOM, ou dans le pire des cas un éditeur ISO type HTML-KIT permettant de la supprimer à la main.

Sinon, la BOM peut se manifester de toutes sortes de manières : rectangle, point d'interrogation, ou séquence du type  dans un éditeur ne gérant que de l'ISO (très pratique pour détecter le problème, d'ailleurs)
Modifié par Laurent Denis (22 Jan 2008 - 15:27)
OK, merci à tous deux. Problème résolu Smiley murf

Donc concrètement, pour répondre au problème, si d'aventures certains tombent sur ce post, il faut un seul BOM dans la page.
Or, dans le cas d'un include, on peut inclure un second BOM, s'il y en a un dans la page incluse. Donc cette page doit être enregistrée sans BOM.

Pour ceux qui utilisent Dreamweaver, l'option est disponible à deux endroits ; dans la boîte de dialogue d'enregistrement, et dans les propriétés d'encodage de la page. Curieusement, la fonction semble ne pas fonctionner sous DW2004 dans la boîte d'enregistrement, par contre ça fonctionne dans les propriétés de la page.
Et donc il faut décocher la signature BOM des pages incluses...
Modifié par yakou32 (22 Jan 2008 - 15:38)
Sujet clos
Aller à