18073 sujets

Questions générales et questions de débutants

[Résolu]Balise <code></code>, défaut d'affichage sous i.e

Bonjour à tou(te)s.

Je rencontre un défaut d'affichage avec la balise <code></code> sous Internet Explorer.

En effet, pour insérer des morceaux de code dans une page, j'utilise cette balise qui est faite pour ça.

Alors que tout ce déroule bien sous firefox et opéra, pour internet explorer l'affichage "déraille" un peu.

Plutôt que d'expliquer quelque chose d'inexpliquable pour moi, j'ai reproduit la portion de code défaillante dans une page en ligne (code HTML et CSS sur la même page) à cette adresse

En vous remerciant d'avance pour votre aide Smiley smile .

Désolé de ne pas participer plus a la vie du forum, les questions abordables pour moi ont déjà toutes les bonnes réponses.
Modifié par Mickael.D (27 Nov 2005 - 16:32)
Salut
Connais tu la balise <pre></pre> ? peut etre te suffirait t'elle, elle permet d'avoir du texte brut qui garde la mise en forme tel que tu le tape. Smiley cligne
Salut super_baloo8

J'ai vu passer cette balise en faisant des recherches sur mon problème, sans trop m'y attarder.

Cela peut-être une solution, mais j'aimerai comprendre pourquoi cette balise <code></code> réagit comme ça.

En plus des deux "bidouilles" mis dans ma page d'exemple, j'ai également testé en donnant une dimension fictive, sans résultat.

Je continue de creuser.
Si vous me permettez de faire un petit rapide coucou dans la discussion, il faudrais ne pas confondre la balise PRE et la balise CODE.

Leurs utilisations n'implique pas la même logique.

Pour répondre à la question de Mickael.D, sachant que les boite d'I.E. et des autres navigateurs "standard" ne sont pas identique, je m'étonne aussi que tu n'aie pas réinitialisé toutes les marges...


* {
	margin: 0;
	padding: 0;
	border: 0;
}


Enfin pour continuer, si je ne me trompe bien sur (dans ce cas, je m'apprete à me faire fouetter par un Gourou), la balise code ne peut être "seule". Elle est inclue dans une autre balise (définis comme "block" et "inline" tout en tenant compte des exceptions)

De fait, il devrait y avoir dans le code (x)HTML la correction suivante :

<p><code>Mon code source</code]</p>

Et dans le CSS : 

p code {
/* mes arguments */
}


Dans l'espoir de t'avoir aidé...

G.
Merci pour les liens groumphy. A priori j'utilise la bonne balise, c'est déjà ça Smiley smile .

La portion de code que je présente est extrait a l'identique d'un page valide. Par conséquent, il apparait que la balise code se suffit a elle même.

Il me semble que sous I.E 6, la ou mon problème se situe (surement sur les versions antérieur aussi), le modèle de boite et le même que sur les navigateurs "standard" a parti du moment ou il y a une DTD, ce qui est mon cas. Donc ca ne viendrai pas de là.

Les marges et bordures que j'ai definit a ma balise code sont celle que je souhaite voir apparaitre sur la page. Je les ai réinitialisé avec mes dimensions.

Je continue de creuser.
Modifié par Mickael.D (23 Nov 2005 - 15:00)
1 - En ayant une phrase qui fait plus d'une ligne entre mes balises <p></p> avant mes balises <code></code>, l'affichage est correct.

2 - Si j'insére une balise quelconque avec un caractère ou un espace insécable par exmple, sauf <p></p>, avant ou après mes balises <p></p>, l'affichage est correct.
Idem avec les balises <br /> et <hr />, solution préférable.

3 - En désactivant tous les styles defini pour mes balises <p></p>, mes balises <code></code> s'affiche comme je le souhaite?!... C'est comme si I.E mélange ou attribue les marges de mes <p></p> à <code></code> si les conditions "1-" ou "2-" ne sont pas rempli.

Enfin je sais pas si je suis très clair, je m'embrouille moi même a force Smiley biggol .

J'ai beau chercher je ne trouve pas de ressource ou d'autre personne qui ont rencontrer ce problème.
Groumphy a écrit :

<p><code>Mon code source</code></p>

Et dans le CSS : 

p code {
/* mes arguments */
}

Comme je suis en voie de bien comprendre les héritages depuis aujourd'hui - enfin je crois - ne m'en veux pas de reformuler ça par :
Dans la css :
p.lecode { /* attention à ne pas mettre d'espace entre le p et le point ce qui ne signifirait pas la même chose ! Voir les héritages sur Alsacreation */
...
}

Dans l'html :
<p class="lecode">ici le code !</p>


J'ai renommé "code" en "lecode" pour éviter également une confusion Smiley murf
Et pour répondre au problème, voici un exemple corrigé.
Le problème est sur l'enchainement... Pourquoi viser la complication ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
	border: 0;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	font-weight: bold;
	font-variant: small-caps;
	color: #000;
	background-color: #CCC;
	height: 80px;
	width: 100%;	
	border: 1px solid #999;
	text-align: center;
	vertical-align: middle;
	padding: 10px;
}
code {
	font-family: "Courier New", Courier, mono;
	font-size: small;
	color: #999;
}
p {
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	padding-left: 40px;
}
.p_encadre {
	margin: 10px;
	padding: 20px;
	border: 1px solid #666;
}

-->
</style>
</head>

<body>

<h1>Défaut d'affichage avec la balise code sous I.E (Version 6 sur windows XP)</h1>
		<p>
		La le défaut d'affichage sous Internet Explorer (version 6 sous windows XP) :
		</p>

		<p class="p_encadre"><code>
		Ici du code<br />
		Ici du code<br /> 
		ici du code
		</code></p>
	
		<p class="p_encadre"><code>
		h1 {<br />
			margin: 0; padding: 0;<br />
			line-height: 75px;<br />
		}
		</code></p>

		<p class="p_encadre"><code>
		Ici du code<br />
		Ici du code<br />
		Ici du code
		</code></p>
		
		<p>
		La le défaut d'affichage sous Internet Explorer (version 6 sous windows XP) :
		</p>
		
		<p class="p_encadre"><code>
		Ici du code<br />
		Ici du code<br />
		Ici du code
		</code></p>

</body>
</html>


Tu pourras bien entendu rajouter les pseudos classe FIRST-LETTER par après...

J'espère avoir pu t'aider.
Bonjour

Merci groumphy, c'est une autre solution.

Je ne vise pas spécialement la complication, mais j'essaie de comprendre le pourquoi de cette réaction et trouver une solution a ce défaut sans renfort de balises et de class normalement inutile.

Je vais continuer a triturer ce morceaux de code, bien que je ne sache plus vraiment où j'en suis à force de modifier, restaurer, remodifier, .... Smiley biggol .
A défaut de résultat j'utiliserai une des solutions trouvées, celle la plus adéquate à la situation.

"Résolu"

Merci pour votre aide Smiley smile
Bonsoir,

Je n'ai pas eu le temps de regarder en détail pour l'instant, mais le bug de rendu des blocs code me fait beaucoup penser à celui de Border et haslayout, au moins dans le comportement. Piste à vérifier à tout hasard Smiley cligne
Bonsoir Laurent,

Je dirais d'un avis de néophyte que cela y ressemble...
Malheureusement, je n'ai pas su expliquer pourquoi cela se produisait, mais bien uniquement indiquer une piste pour le corriger...

J'ai remarqué que tu utilisais un "sélecteur" pour I.E.6...

<!--[if lte IE 6]>
<style type="text/css">
<!-- 
.haslayout {
zoom: 1;
} 
-->
</style>
<![endif]-->


Qu'outre avoir lié une CSS tu as aussi "codé en dur" dans la page et que tu as "joué" différement sur les "padding" et certaines balises...

Malheureusement plus je ne saurais t'en dire...
Désolé : mes pages de bugs étaient à l'origine destinées uniquement à me servir d'aide mémoire, et ne font pas de très bonnes pages tests publiques : elles ne sont pas très simples Smiley confused

Cela dit, après avoir regardé (ça me démangeait trop Smiley cligne ), il n'y a qu'une similitude apparente due au décalage vers la gauche. Le code minimal pour reproduire le bug que tu as rencontré semble être :
<style type="text/css">
div {
margin-left: 50px;
}
p:first-letter {
color: red;
}
</style>

<body>
<p>Lorem ipsum</p>
<div>Dolor</div>
<p>Lorem ipsum </p>
<div>Dolor</div>
</body>


On voit qu'il faut une marge gauche à l'élément bloc (tes blocs code) et une propriété d'affichage sur le first-letter des paragraphes. On ne retrouve donc pas les mêmes facteurs déclenchants que dans le bug auquel je pensais.

Il s'agit plutôt d'un de ces problèmes liés au "reflow", qui sont fréquents dans IE : celui-ci "perd" fréquemment des propriétés CSS quand un bloc doit être "redessiné" en cours de rendu en raison d'un effet du type :hover ou position:relative. La propriété :first-letter donne apparemment lieu à un "reflow"et le fait que le bug s'annule quand le contenu à dessiner est plus long, avec un retour à ligne, va également dans ce sens : IE ayant plus de chemin à faire, a le temps de "retrouver la mémoire" et la propriété de marge qu'il aurait perdue.

C'est un peu vague et imagé, comme explication, mais le fonctionnement d'un moteur de rendu, surtout celui d'IE Windows, est en partie une "boîte noire" dont il est parfois très difficile de discerner la logique d'erreur Smiley cligne

Intéressant, en tous cas.
Modifié par Laurent Denis (27 Nov 2005 - 18:40)
Merci de ces explications Laurent, ... J'en suis assez perplexe.
Toutefois je me permet de dire que le code que j'ai fournis pour "corriger" le problème global d'affichage se perdra lui aussi dans une problématique similaire si l'utilisateur utilise la pseudo classe :FIRST-LETTER (d'après tes explications et si j'ai tout bien compris)...

Pourtant malgré mes efforts, je n'ai pas encore réussi à le faire "planter" de manière similaire.

Toutefois, si l'utilisateur utilise la pseudo classe sur la balise P, il devra la corriger par après dans la classe .P_ENCADRE avec un attribut color identique à l'initiale remise en forme de la balise P.

C'est le seul inconvéniant que j'ai trouvé...
Smiley confused
Effectivement c'est bien la pseudo classe "first-letter" qui est en cause, désolé de ne pas l'avoir vu avant, persuadé d'un problème d'interpretation de marge.

Merci Laurent pour les explications, sacré IE, si il se met a perdre des propriétés et la mémoire en cours de route... Smiley lol .

a écrit :
Toutefois, si l'utilisateur utilise la pseudo classe sur la balise P, il devra la corriger par après dans la classe .P_ENCADRE avec un attribut color identique à l'initiale remise en forme de la balise P.

C'est le seul inconvéniant que j'ai trouvé...


En effet Groumphy, il faut "remettre a zéro" certain attribut.
Et puis je veux utiliser la balise <code>, et ce n'est pas IE avec ses trous de mémoire qui m'en empechera Smiley biggrin

Je vais donc me tourner vers <br /> ou <hr />.

Encore merci a vous.
Sujet clos
Aller à