ligne-height ne fonctionne pas avec firefox?

**12monkeys** · 25/11/2006, 17h38

Bonsoir,

J'ai crée un tableau contenant une ligne avec plusieurs cellules les unes derrière les autres... Dans ces cellules il y a du texte, dans certains cas le texte est sur deux lignes...

Le problème vient du fait que avec firefox ces deux lignes sont trop espacées verticalement l'une de l'autre, ce qui fait que les cellules sont trop grandes verticalement. J'ai essayé de mettre un line-height pour réduire cet espace, dans le fichier css et par style, sans résultat dans firefox...

Ce qui est bizarre c'est que en enlevant les 2 phrases :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<LINK href="style.css" rel="stylesheet" type="text/css">

et que je met un style="line-height:" ça marche dans firefox...

Je suis perdu !! Merci de votre aide...

**Dan_A** · 25/11/2006, 19h32

Ce n'est pas très clair, mais en tout cas le doctype ne convient pas. Il faut un doctype complet pour éviter d'utiliser le mode quirks qui laisse le navigateur décider à ta place.
Un lien vers la page permettrait d'éviter de jouer aux devinettes.

**12monkeys** · 25/11/2006, 21h25

Ben pour le DOCTYPE j'ai suivi les exemples des "recommandations du W3C en français" dont un lien se trouve juste au dessus : ici.

Pour mon problème voici une image en pièce jointe :

L'espace entre la ligne 1 et 2 du texte est trop importante ce qui fait que l'image background s'affiche 2 fois... Ce qui ne se produit pas avec IE

**Dan_A** · 25/11/2006, 22h18

Je suis nouveau sur les forums en français et je suis souvent surpris.

IE interprète mal les recommandations du W3C (height et line-height par exemple) y compris dans le mode Standard Compliance. Il faut donc un doctype complet en premier lieu pour n'avoir à considérer que les particularités d'IE.

**12monkeys** · 25/11/2006, 23h13

Merci de ton aide,

Le site w3.org propose bon nombre de doctype, il me semble que ce ne sont que ces trois qui correspondent :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

Mais lequel est le bon ????

Je ne peux pas renvoyer vers un lien, vu que mes pages ne sont pas encore en ligne... Par contre tu me parles d'IE mais IE marche très bien... d'abord je n'ai pas de souci avec IE, et ensuite avec IE "lien-height" fonctionne. C'est avec Firefox que j'ai eu le problème...

J'ai donc refait la manipulation : avant d'avoir le DOCTYPE et le LINK vers mon css, j'utilisait les balises html tout à fait ordinaires : TABLE, TR, TD... j'ai juste rajouté une balise FONT style="font-size: 11px".
Dans les deux navigateurs le texte sur deux lignes était collé l'un à l'autre au point de vue vertical, exemple :

aaaaaa
bbbbbb

Je rajoute le doctype (maintenant le nouveau que tu m'as montré...) et le link... et voilà : IE ne bouge pas et dans firefox mes deux mots s'éloignent verticalement, exemple :

aaaaaaa

bbbbbbb

C'est après que j'ai essayé de rajouter le line-height mais cela n'a rien fait.

Veux tu que je te mette mon code html ??

**Dan_A** · 26/11/2006, 10h34

Je préfère

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Le code ça serait pas mal.

d'abord je n'ai pas de souci avec IE

Il ne faut pas se fier à internet explorer (quelle version ne pose pas problème ?)

**trotters213** · 26/11/2006, 11h35

Le HTML est en train de disparaitre au détrimlent du XHTML qui est bien plus stric et propre, je te conseillerais plutôt, du coup, d'utiliser ce doctype :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

**12monkeys** · 26/11/2006, 12h32

J'ai pas tout mis, j'ai enlevé le superflu :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Page 1</TITLE>
<LINK href="style.css" rel="stylesheet" type="text/css">
</HEAD>
 
<BODY text="white" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginheight="0" marginwidth="0" bgcolor="black">
 
<DIV id="centrer">
 
<TABLE border="0" width="1000" cellspacing="0" cellpadding="0"><! maximum possible 1003>
  <TR height="43">
    <TD width="43" background="im/bord/a1.jpg">
    </TD>
    <TD width="914" background="im/bord/a2.jpg">
    </TD>
    <TD width="43" background="im/bord/a3.jpg">
    </TD>
  </TR>
  <TR height="509">
    <TD width="43" background="im/bord/b1.jpg">
    </TD>
    <TD width="914" bgcolor="black">
 
	<TABLE border="0" width="914" height="100%" cellspacing="0" cellpadding="0">
	  <TR>
	    <TD valign="top">
 
		<TABLE border="0" width="914" cellspacing="0" cellpadding="0">
		  <TR>
		    <TD align="center" colspan="2">
[......]
		    </TD>
		  </TR>
		  <TR>
		    <TD width="305">
		      <IMG src="im/pages1/image.jpg" width="300">
		    </TD>
		    <TD width="609" valign="top">
<FONT face="Andy, Times New Roman, Arial" size="8">
<CENTER>
Numero1
</CENTER>
</FONT>
<BR>
texte divers
		    </TD>
		  </TR>
		</TABLE>
 
	    </TD>
	  </TR>
	  <TR>
	    <TD height="8">
	    </TD>
	  </TR>
	  <TR>
	    <TD>
 
		<TABLE border="0" width="914" cellspacing="0" cellpadding="0">
		  <TR>
		    <TD width="91">
		    </TD>
		    <TD width="97" height="31" background="im/menus/4/ongl1s.bmp">
 
			<TABLE border="0" cellspacing="0" cellpadding="0">
			  <TR>
			    <TD width="6">
			    </TD>
			    <TD align="center">
			      <FONT style="font-size: 11px">
<B>
Bio et Filmographie
			      </FONT></B>
			    </TD>
			  </TR>
			</TABLE>
 
		    </TD>
		    <TD width="1"></TD>
		    <TD width="59" background="im/menus/4/ongl2.gif">
 
			<TABLE border="0" cellspacing="0" cellpadding="0">
			  <TR>
			    <TD align="center">
			      <FONT color="black" style="font-size: 11px">
<B>
<A href="page2-1.htm">
aaaaaa bbbbbbbb
</A>
			      </FONT>
</B>
			    </TD>
			  </TR>
			</TABLE>
 
		    </TD>
		    <TD width="1"></TD>
		    <TD width="48" background="im/menus/4/ongl3.gif">
 
			<TABLE border="0" cellspacing="0" cellpadding="0">
			  <TR>
			    <TD align="center">
			      <FONT color="black" style="font-size: 11px">
<B>
<A href="page2-2.htm">
aaaaaa dddd
</A>
			      </FONT>
</B>
			    </TD>
			  </TR>
			</TABLE>
 
		    </TD>
		    <TD width="1"></TD>
		    <TD width="50" background="im/menus/4/ongl4.gif">
 
			<TABLE border="0" width="50" cellspacing="0" cellpadding="0">
			  <TR>
			    <TD align="center">
			      <FONT color="black" style="font-size: 12px">
<B>
<A href="page2-3.htm">
zzzzz
</A>
			      </FONT>
</B>
			    </TD>
			  </TR>
			</TABLE>
 
		    </TD>
		    <TD width="1"></TD>
		    <TD width="52" background="im/menus/4/ongl5.gif">
 
			<TABLE border="0" width="52" cellspacing="0" cellpadding="0">
			  <TR>
			    <TD align="center">
			      <FONT color="black" style="font-size: 12px">
<B>
<A href="page2-4.htm">
ffffff
</A>
			      </FONT>
</B>
			    </TD>
			  </TR>
			</TABLE>
 
		    </TD>
		    <TD width="513"></TD>
		  </TR>
		  <TR>
		    <TD background="im/menus/3/ligntpgs1.bmp" colspan="11" height="4"><!#da9914>
		    </TD>
		  </TR>
		  <TR>
		    <TD width="914" height="100" colspan="11" background="im/singefond.gif">
 
			<TABLE border="0" width="914" cellspacing="0" cellpadding="0">
			  <TR>
			    <TD width="4" background="im/menus/3/ligntpgsv.bmp">
			    </TD>
			    <TD width="906">
 
				<TABLE border="0" width="906" cellspacing="0" cellpadding="5">
				  <TR>
				    <TD>
<BR><BR>
				    </TD>
				  </TR>
				</TABLE>
 
			    </TD>
			    <TD width="4" background="im/menus/3/ligntpgsv2.bmp">
			    </TD>
			  </TR>
			</TABLE>
 
		    </TD>
		  </TR>
		  <TR>
		    <TD height="4" colspan="17" background="im/menus/3/ligntpgsbas.bmp">
		    </TD>
		  </TR>
		</TABLE>
 
	    </TD>
	  </TR>
	</TABLE>
 
    </TD>
    <TD width="43" background="im/bord/b2.jpg">
    </TD>
  </TR>
  <TR height="43">
    <TD width="43" background="im/bord/c1.jpg">
    </TD>
    <TD width="914" background="im/bord/c2.jpg">
    </TD>
    <TD width="43" background="im/bord/c3.jpg">
    </TD>
  </TR>
</TABLE>
 
</DIV>
 
</BODY>
</HTML>

Je n'ai aucun souci avec IE (j'ai IE 6 sp2) c'est mozilla firefox version 2.0

**Dan_A** · 26/11/2006, 13h58

On ne peut pas choisir un doctype ainsi :
avec strict la page comporte 37 erreurs html graves
avec transitional 22 erreurs html graves.
Il faut valider son code ( http://validator.w3.org/ ) ensuite seulement on peut essayer de comprendre pourquoi l'affichage diffère (avec Opera tout l'affichage est modifié !)
Qu'en est-il du fichier css (style.css) ? Existe-t-il ?

**12monkeys** · 27/11/2006, 13h18

J'ai fait le test moi même, et je ne comprends pas 98 % des erreurs !!!!

la plupart des erreurs sont des gillemets -"- en rouge, pourquoi ????
autre erreur dans une balise IMG je n'ai pas mis alt, faut il obligatoirement en mettre ??? Si je n'en ai pas mis c'est que je ne voulais mas en mettre...

Ensuite j'ai lu tous tes liens concernant le doctype, mais aucun (sauf erreur de ma part) explique à quoi ça sert, lequel choisir : strict ?? transitionnal ?? frameset(quand on utilise des frames??) celui du XHTML (je ne sais même pas ce que c'est du xhtml...) ?

Je suis plutôt débutant, et là je suis perdu...

**Bisûnûrs** · 27/11/2006, 13h42

Envoyé par 12monkeys

la plupart des erreurs sont des gillemets -"- en rouge, pourquoi ????

On peut voir l'erreur décrite par le validateur ?

Envoyé par 12monkeys

autre erreur dans une balise IMG je n'ai pas mis alt, faut il obligatoirement en mettre ??? Si je n'en ai pas mis c'est que je ne voulais mas en mettre...

Oui, tu es obligé d'en mettre un, et si tu ne veux pas en mettre tu fais alt="".

**trotters213** · 27/11/2006, 14h50

Envoyé par 12monkeys

Ensuite j'ai lu tous tes liens concernant le doctype, mais aucun (sauf erreur de ma part) explique à quoi ça sert, lequel choisir : strict ?? transitionnal ?? frameset(quand on utilise des frames??)

Le doctype permet d'indiquer à ton navigateur quel va être le type de document qu'il va lire et donc d'interpréter les balises correctement (ou du moins le plus correctement possible). La définition du doctype est obligatoire avant chaque document.

Envoyé par 12monkeys

celui du XHTML (je ne sais même pas ce que c'est du xhtml...) ?

Le XHTML est, en gros, du HTML auquel on a ajouté toutes les caractéristiques interessantes du XML (fermeture de toutes les balises, écriture en minuscules des balises et de leurs attributs, ...). C'est bien moins permissif que le HTML et du coup c'est bien plus structuré. Tu fais du XHTML sans le savoir lorsque tu crée un fichier HTML et que tu fermes tes br (<br />) tes balises img (<img />)...

Envoyé par Dan_A

On ne peut pas choisir un doctype ainsi :
avec strict la page comporte 37 erreurs html graves
avec transitional 22 erreurs html graves.

En effet mais pour quelqu'un qui faisait jusqu'à présent du HTML sans savoir ce qu'est un DOCTYPE, le passage "HTML à l'arrache" -> XHTML Strict risque d'être assez tendu.

**12monkeys** · 27/11/2006, 18h24

Bon je vais tenter de tous vous répondre.

Error Line 11 column 11: there is no attribute "TEXT".
<BODY text= " white" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Error Line 11 column 29: there is no attribute "TOPMARGIN".
<BODY text="white" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"

Autre exemple :

Error Line 15 column 63: character data is not allowed here.
...rder="0" width="1000" cellspacing="0" cellpadding="0"><! maximum possible 1003>
You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include putting text directly in the body of the document without wrapping it in a container element (such as a <p>aragraph</p>) or forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes).

Merci trotters213 pour ton lien, je crois que je l'avais déjà lu, mais cela ne répond pas à ma question : quelle est la différence entre strict, transitionnal et frameset (surtout les 2 premiers), lequel utiliser ??

Et je vais vous faire hurler, mais j'ai crée un site dans lequel je n'ai mis aucun doctype, et le site s'affiche correctement à priori... En même temps il n'est pas destiné à être vu par beaucoup de gens (une 50aine au plus) ayant tous IE 6...

**Dan_A** · 27/11/2006, 19h50

Dans un premier temps, le problème n'est pas css mais html (le code ne fait pas apparaître de css).

<BODY text= "white"

et

topmargin="0"

voir ici :
http://www.w3schools.com/tags/tag_body.asp
text est utilisable en transitional et frameset mais pas en strict.
topmargin n'existe pas.
Il faut utiliser style="color:white;margin-top:0;" et ainsi de suite.

<! maximum possible 1003>

On choisit le doctype en fonction des instructions qu'on utilise. Transitional était destiné à la compatibilité avec les versions précédentes d'html, même chose pour frameset (l'utilisation de frames étant déconseillée). Strict est un pas vers une syntaxe qui distingue contenu et présentation.

**trotters213** · 28/11/2006, 09h01

Pour ton erreur, mets déjà toutes tes balises en minuscules et sépare le contenu de la mise en forme (autrement dit, mets tous les attributs du genre text= " white" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" dans une feuille de style et tu n'auras plus de problème.

Dan_A t'as fait un bon petit résumé de la différence Strict/Transitional

ligne-height ne fonctionne pas avec firefox?

CSS

Discussions similaires

Partager

Partager