Affichage de font-family dans <option> ne marche pas

**Sports47** · 17/08/2010, 21h52

Le titre en dit beaucoup. J'ai le code php suivant:

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
 <?php
                             $font_option = array('arial', 'arial black', 'comic sans ms', 'courier new', 'gerogia',
                                                  'impact', 'lucida console', 'lucida sans unicode', 'palatino linotype',
                                                  'tahoma', 'times new roman', 'trebuchet ms', 'verdana', 'symbol',
                                                  'webdings', 'wingdings', 'ms sans serif', 'ms serif');
                             for($i=0;$i<count($font_option);$i++){
                             echo "<option value=\"{$font_option[$i]}\" style=\"font-family:{$font_option[$i]};\" ";
                             if(isset($_POST['font'])){
                               if($_POST['font']==$font_option[$i]){
                                 echo "selected='selected'";
                               }
                             }elseif($font_color[$i]=='white'){
                               echo "selected='selected'";
                              }
                             echo ">";
                             echo ucfirst($font_option[$i])."</option>\n";
                             }

Il va généré le HTML suivant:

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
 
                           <option value="arial" style="font-family:arial;" >Arial</option>
<option value="arial black" style="font-family:arial black;" >Arial black</option>
<option value="comic sans ms" style="font-family:comic sans ms;" >Comic sans ms</option>
<option value="courier new" style="font-family:courier new;" >Courier new</option>
<option value="gerogia" style="font-family:gerogia;" >Gerogia</option>
<option value="impact" style="font-family:impact;" selected='selected'>Impact</option>
 
<option value="lucida console" style="font-family:lucida console;" >Lucida console</option>
<option value="lucida sans unicode" style="font-family:lucida sans unicode;" >Lucida sans unicode</option>
<option value="palatino linotype" style="font-family:palatino linotype;" >Palatino linotype</option>
<option value="tahoma" style="font-family:tahoma;" >Tahoma</option>
<option value="times new roman" style="font-family:times new roman;" >Times new roman</option>
<option value="trebuchet ms" style="font-family:trebuchet ms;" >Trebuchet ms</option>
<option value="verdana" style="font-family:verdana;" >Verdana</option>
<option value="symbol" style="font-family:symbol;" >Symbol</option>
<option value="webdings" style="font-family:webdings;" >Webdings</option>
 
<option value="wingdings" style="font-family:wingdings;" >Wingdings</option>
<option value="ms sans serif" style="font-family:ms sans serif;" >Ms sans serif</option>
<option value="ms serif" style="font-family:ms serif;" >Ms serif</option>
 
---

Dans firefox, parfait! lorsque l'utilisateur clique chaque font est différent, mais dans tout les autres browser (IE8-7-6, Safari, Chrome)

Quelqu'un à une idée?

EDIT: Au cas ou quelqu'un voudrait savoir, mon HTML est valider selon HTML Validator et Web Developer, donc ce ne peut pas être une erreur de typo ou quelque chose du genre.

**Vil'Coyote** · 18/08/2010, 10h51

de ce que je vois ie ne gèrerais pas les style différent dans un même select mais uniquement un style global.

**Sports47** · 18/08/2010, 15h49

Il n'y a donc aucun moyen de faire apparaître le bon style?

**Bovino** · 18/08/2010, 22h09

Si, mais avec JavaScript en créant des select personnalisés à base de div que tu affiches ou masques en fonction.

**pc75** · 19/08/2010, 16h02

Bonjour,

Tu peux aussi essayer avec une bidouille de ce genre :

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
 
<HTML>
<HEAD>
 
<style>
#center
{
    BORDER-RIGHT: #c1cdd8 1px solid;
    BORDER-TOP: #c1cdd8 1px solid;
    MARGIN-TOP: 38px;
    FONT-SIZE: 10px;
    MARGIN-LEFT: 146px;
    BORDER-LEFT: #c1cdd8 1px solid;
    MARGIN-RIGHT: 160px;
    BORDER-BOTTOM: #c1cdd8 1px solid
}
 
#div_lastnews
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 4px;
    SCROLLBAR-FACE-COLOR: #dedede;
    Z-INDEX: 1;
    PADDING-BOTTOM: 0px;
    SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
    MARGIN-LEFT: auto;
    OVERFLOW: auto;
    SCROLLBAR-SHADOW-COLOR: #999999;
    SCROLLBAR-3DLIGHT-COLOR: #cdcdcd;
    MARGIN-RIGHT: auto;
    SCROLLBAR-ARROW-COLOR: #454545;
    PADDING-TOP: 0px;
    SCROLLBAR-TRACK-COLOR: #efefef;
    SCROLLBAR-DARKSHADOW-COLOR: #c5def4;
    SCROLLBAR-BASE-COLOR: #efefef;
    HEIGHT: 695px;
    BACKGROUND-COLOR: #f5faff
}
 
#table_list
{
    Z-INDEX: 1;
    WIDTH: 100%
}</style>
</HEAD>
<BODY>
 
<DIV id="center" style="margin-left:20%; margin-right:20%;">
 
	<DIV id="div_lastnews" style="height:50px;">
 
		<TABLE id='table_list' cellpadding=0 cellspacing=0 border=0 >
 
			<TR bgcolor='#F5FAFF'>
				<TD style="font-size:15px; font-family:arial;">
					<A href='#'>
					<DIV width='100%' class=''>
					15/03/2009
					</DIV>
					</A>
				</TD>
				<TD style="font-size:10px; font-family:serif;">
					<A href='#'>
					<DIV width='100%' class=''>
					18/10/2009
					</DIV>
					</A>
				</TD>
				<TD style="font-size:18px; font-family:monospace;">
					<A href='#'>
					<DIV width='100%' class=''>
					Valeur 1
					</DIV>
					</A>
				</TD>
			</TR>
 
			<TR bgcolor='#F5FAFF'>
				<TD style="font-size:15px; font-family:arial;">
					<A href='#'>
					<DIV width='100%' class=''>
					04/02/2010
					</DIV>
					</A>
				</TD>
				<TD style="font-size:10px; font-family:serif;">
					<A href='#'>
					<DIV width='100%' class=''>
					12/03/2010
					</DIV>
					</A>
				</TD>
				<TD style="font-size:18px; font-family:monospace;">
					<A href='#'>
					<DIV width='100%' class=''>
					Valeur 2
					</DIV>
					</A>
				</TD>
			</TR>
 
			<TR bgcolor='#F5FAFF'>
				<TD style="font-size:15px; font-family:arial;">
					<A href='#'>
					<DIV width='100%' class=''>
					04/07/2010
					</DIV>
					</A>
				</TD>
				<TD style="font-size:10px; font-family:serif;">
					<A href='#'>
					<DIV width='100%' class=''>
					19/12/2011
					</DIV>
					</A>
				</TD>
				<TD style="font-size:18px; font-family:monospace;">
					<A href='#'>
					<DIV width='100%' class=''>
					Valeur 3
					</DIV>
					</A>
				</TD>
			</TR>
 
		</TABLE>
	</DIV>
</DIV>
 
</BODY>
</HTML>

Affichage de font-family dans <option> ne marche pas

HTML

Discussions similaires

Partager

Partager