Attribut font-size non pris en compte dans un tableau

**malta** · 16/09/2008, 19h45

Bonjour,

J'ai un fichier index.htm dans lequel un tableau à été automatiquement généré par un logiciel de découpe d'interfaces web.

Toutes les cellules sont de ce type là :

Code :

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

<td rowspan=3 background="images/r3_c7.jpg" width=19 height=100 border=0></td>

Je commence mon fichier CSS par les attributs du body en mettant :

Code :

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

1
2
3
4
body {
	color: white;
	background-color: #18233E;
}

Je constate que la couleur de fond est bien prise en compte, ainsi que le texte que j'ai inséré un peu partout dans les cellules, qui s'affiche bien en blanc.

J'ajoute ensuite l'attribut font-size de la manière suivante :

Code :

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

1
2
3
4
5
body {
	color: white;
	font-size:6px;
	background-color: #18233E;
}

Mais là, rien à faire, la taille de police ne change pas.
j'ai essayer en px, en pt, en XX-small etc..., rien à faire, la taille de police reste toujours la même, la taille standard.

Je me dis que ça doit sûrement être un détail de #M!@#!!@ que je ne connais pas...
Quelqu'un aurait une idée ?

**pop_up** · 17/09/2008, 09h57

est ce que si tu mets ceci, ça fonctionne :

Code :

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

1
2
 
font-size:6px !important;

Si ça fonctionne, il doit y avoir d'autres déclarations de styles qui viennent en conflit.

Au pire mets tout ton code pour qu'on puisse t'aider.

**malta** · 18/09/2008, 17h54

Alors pour le "!important", ça ne marche pas...

Sinon, voici le code complet.
A titre d'info :
- la page index est quasi-vide, il n'y a qu'un tableau d'images.
- Les cellules "TDspacer" contiennent le fameux pixel transparent (1x1) nécessaire dans la découpe d'interface web.
- La balise span que je viens de rajouter pour le titre n'a aucun effet non plus...

La page index.htm

Code :

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
 
<html>
<head>
<title>index.jpg</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
 
<body>
 
<table border=0 cellpadding=0 cellspacing=0 width=1400>
 
  <tr>
   <td class=TDspacer					width=177	height=1></td>
   <td class=TDspacer					width=129	height=1></td>
   <td class=TDspacer					width=140	height=1></td>
   <td class=TDspacer					width=23	height=1></td>
   <td class=TDspacer					width=13	height=1></td>
   <td class=TDspacer					width=367	height=1></td>
   <td class=TDspacer					width=19	height=1></td>
   <td class=TDspacer					width=81	height=1></td>
   <td class=TDspacer					width=164	height=1></td>
   <td class=TDspacer					width=287	height=1></td>
   <td class=TDspacer					width=1		height=1></td>
  </tr>
 
  <tr>
   <td class=TDspacer	rowspan=13			width=177	height=800></td>
   <td 					colspan=3	width=292	height=54	background="images/r1_c2.jpg"></td>
   <td 					colspan=2	width=380	height=54	background="images/r1_c5.jpg"></td>
   <td 			rowspan=2	colspan=3	width=264	height=126	background="images/r1_c7.jpg"></td>
   <td class=TDspacer	rowspan=13			width=287	height=800></td>
   <td class=TDspacer					width=1		height=54></td>
  </tr>
 
  <tr>
   <td 			rowspan=3	colspan=3	width=292	height=119	background="images/r2_c2.jpg"></td>
   <td			rowspan=2	colspan=2	width=380	height=108>
 
	<a href="./"><img src="images/r2_c5.jpg" border=0></a>
 
   </td>
   <td							width=1		height=72	background="images/spacer.gif"></td>
  </tr>
 
  <tr>
   <td			rowspan=3			width=19	height=100	background="images/r3_c7.jpg"></td>
   <td			rowspan=3	colspan=2	width=245	height=100	background="images/r3_c8.jpg"	valign="top">
 
	Mon compte<br>Mon groupe<br>Info perso
 
   </td>
   <td							width=1		height=36	background="images/spacer.gif"></td>
  </tr>
 
  <tr>
   <td					colspan=2	width=380	height=11	background="images/r4_c5.jpg"></td>
   <td class=TDspacer					width=1		height=11></td>
  </tr>
 
  <tr>
   <td					colspan=3	width=292	height=53	background="images/r5_c2.jpg"></td>
   <td							width=13	height=53	background="images/r5_c5.jpg"></td>
   <td							width=367	height=53	background="images/r5_c6.jpg"	valign="top">
 
	<span class="title">ICI LE TITRE</span>
 
   </td>
   <td class=TDspacer					width=1		height=53></td>
  </tr>
 
  <tr>
   <td			rowspan=2			width=129	height=11	background="images/r6_c2.jpg"></td>
   <td			rowspan=2			width=140	height=11	background="images/r6_c3.jpg"	valign="top">
 
	Menu 1<br>Menu 2
 
   </td>
   <td			rowspan=2			width=23	height=11	background="images/r6_c4.jpg"></td>
   <td			rowspan=2			width=13	height=11	background="images/r6_c5.jpg"></td>
   <td			rowspan=5	colspan=3	width=467	height=11	background="images/r6_c6.jpg"	valign="top">
 
	Contenu : bla bla bla bla bla bla bla bla bla bla bla bla<br>bla bla bla bla bla bla bla bla bla bla bla bla<br>
	test<br>
 
   </td>
   <td			rowspan=5			width=164	height=11	background="images/r6_c9.jpg"></td>
   <td class=TDspacer					width=1		height=11></td>
  </tr>
 
  <tr>
   <td class=TDspacer					width=1		height=172></td>
  </tr>
 
  <tr>
   <td							width=129	height=23	background="images/r8_c2.jpg"></td>
   <td							width=140 	height=23	background="images/r8_c3.jpg"></td>
   <td							width=23	height=23	background="images/r8_c4.jpg"></td>
   <td							width=13	height=23	background="images/r8_c5.jpg"></td>
   <td class=TDspacer					width=1		height=23></td>
  </tr>
 
  <tr>
   <td			rowspan=2	colspan=4	width=305	height=6	background="images/r9_c2.jpg"></td>
   <td class=TDspacer					width=1		height=6></td>
  </tr>
 
  <tr>
   <td class=TDspacer					width=1		height=59></td>
  </tr>
 
  <tr>
   <td rowspan=2	colspan=4			width=305	height=245	background="images/r11_c2.jpg"></td>
   <td			colspan=3			width=467	height=194	background="images/r11_c6.jpg"></td>
   <td							width=164	height=194	background="images/r11_c9.jpg"></td>
   <td class=TDspacer					width=1		height=194></td>
  </tr>
 
  <tr>
   <td			colspan=3			width=467	height=51	background="images/r12_c6.jpg"	valign="top"	align="center">
 
	Designed & Created by Malta © in 2008
 
   </td>
   <td							width=164	height=51	background="images/r12_c9.jpg"></td>
   <td class=TDspacer					width=1		height=51></td>
  </tr>
 
  <tr>
   <td class=TDspacer	colspan=8			width=936	height=58></td>
   <td class=TDspacer					width=1		height=58></td>
  </tr>
 
</table>
</body>
</html>

Le fichier css :

Code :

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
body
	{
	color: white;
	font-size:6px;
	background-color: #18233E;
	}
 
TDspacer
	{
	background-image:url(images/spacer.gif);
	}
 
title
	{
	font-size:14px;
	font-weight:bold;
	}
 
a:link {
text-decoration:none; 
color:white; 
} 
 
a:visited {
text-decoration:none; 
color:white; 
} 
 
a:hover , a:active {
text-decoration:none; 
color:white;
}

Voilà, je rappelle le problème :
- Tout ce qui concerne le Font ne s'affiche pas, sauf la couleur...

EDIT : je viens de voir que si je tape quelque chose en dehors du tableau, cela apparait bien en tout petit ! C'est donc bien le tableau qui entre en conflit avec les instructions du CSS. Mais je n'arrive pas à trouver pourquoi...

**malta** · 18/09/2008, 18h51

C'est bon, j'ai trouvé...

Pas de doctype --->

Merci quand même

**Candygirl** · 18/09/2008, 18h53

Envoyé par malta

EDIT : je viens de voir que si je tape quelque chose en dehors du tableau, cela apparait bien en tout petit ! C'est donc bien le tableau qui entre en conflit avec les instructions du CSS. Mais je n'arrive pas à trouver pourquoi...

En l'absence d'un doctype, les navigateurs sont en mode quirks et interprètent donc ta page "à l'ancienne", comme du vieux html. Cela a un impacte particulier sur les styles css qui ne sont pas hérités normalement dans le cadre d'un tableau.

Ajouter un doctype complet au haut de ton document devrait règler ce problème.

Edit: grillée mais moins rôtie que certains autres

**Erwan31** · 18/09/2008, 18h55

Bonjour,
cela vient du mode quirks qui est un mode de rendu déclenché en l'absence de Doctype.

Pour éviter que le navigateur bascule en mode quirks (non standard > déconseillé dans la grande majorité des cas), toujours mettre un doctype valide et complet en haut de tes document.

Explication: en mode quirks, les propriétés de font ne sont pas héritées de l’élément body pour les éléments inclus dans les tableaux.

Dans ton cas, ajouter donc

Code :

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

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

au dessu de <html>

Au passage, ce type d'outils d'exportation complètement dépassé (ceux de Photoshop/Image ready par exemple) génèrent un code à l'ancienne très mauvais (la preuve).
Si tu dois dans le futur créer de nouveaux document HTML voire un site complet il faudra que tu essayes d'oublier les table et te diriger vers de l'intégration à base de DIV/CSS

EDIT Grillé!

**malta** · 18/09/2008, 20h46

Merci beaucoup à vous.

Je suis déjà au courant pour les tableaux, vraiment à éviter.
Mais juste une question : si je veux passer mon tableau en DIV, étant donné que toutes les cellules ont des tailles différentes, je suis obligé de définir dans le css autant de class que de cellules ??

Ex :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
cell1 {
width: 128px;
height:36px;
}
 
cell2 {
width:86px;
height:64px;
}
 
etc... ?

**Erwan31** · 18/09/2008, 21h02

Non autant conserver un tableau qui au vu de la complexité du tableau sera moins casse-gueule qu'un ensemble de div flottant.
Mais le mieux si tu veux éviter les table serait de nous fournir un print screen ou une maquette de ce que tu souhaites obtenir pour qu'on puisse te conseiller en fonction des contenus et de leur type (informatif, décoratifs...)
Je doute que le découpage d'image soit vraiment nécessaire

**malta** · 18/09/2008, 22h26

Bon, alors voilà une mise en ligne temporaire.

Il me semble que les découpes soient nécessaires, car mon cadre de menu s'agrandit automatiquement en fonction du nombre d'item dans le menu, et de même pour la cellule de contenu principal.

Bon, pour les nanas dévêtues, ben c'est aussi pour ça qu'il y a des découpes. Chaque utilisateur aura un skin différent en fonction de son groupe. Les amis, la famille, les invités, les potes informaticiens, les collègues de boulot, les potes de beuverie...

Du coup, ce n'est pas tout le skin qui changera, mais une image différente viendra remplacer l'image que vous voyez, ou alors cette dernière disparaitra et de nouvelles images apparaitront ailleurs...

Voici une adresse temporaire, juste le temps que vous me donniez votre avis :

Mon futur portail

**Erwan31** · 20/09/2008, 12h51

Aucunes des raisons que tu donnes ne justifient l'utilisation d'un tableau.
Apprend à intégrer avec le couple div/css et dis toi bien que les tableaux pour
faire de la mise en page c'est dépassé depuis quelques années

**malta** · 20/09/2008, 13h58

Oki mais, toi tu m'en as donné une ^^

Non autant conserver un tableau qui au vu de la complexité du tableau sera moins casse-gueule qu'un ensemble de div flottant.

Mais c'est très bien, allons y pour l'entrainement poussée aux DIV via CSS...

(Et : oui, j'ai appris à faire des sites il y a presque une dizaines d'années, alors même si je me suis adapté/perfectionné sur certains points, il reste de vieux réflexes...

)

Merci beaucoup, je met le sujet en "Résolu".

Attribut font-size non pris en compte dans un tableau

Tableau en CSS

Discussions similaires

Partager

Partager