IE tableau background

**_cheval_** · 16/08/2007, 23h08

Bonjour,
suite à de maintes recherche sur google et autre moteur de recherche en tout genre j'en viens à poser une question concernant les fonds d'écran de tableau sous IE dans une cellule.

Je recherche donc désespérément de l'aide avant que je parte faire cramer tout ce qui en rapport de près ou de loin avec

Microsoft et son

IE pourri.

Donc je rencontre un problème pour afficher un fond dans tableau (sous IE vous l'aurez compris).

Je possède trois parties d'un fond qui forme un tableau qui sont le haut, le milieu et le bas, sachant que cette m**de d'IE (inférieur à 7) ne gére pas la transparence, je me suis ennuyer à réaliser 3 jpg pour que Monsieur accepte de me faire un affichage à peu près correct!!!

Mais rien n'y fait.

Je vous joint donc une url ou vous pourrez admirer le résultat sous Firefox, et vomir le résultat d'IE
C'est par ici

Comme on peut le voir, la partie centrale du tableau 1 n'est pas correcte, ainsi que la partie haute et centrale du second.

J'ai remarqué qu'en fait, lorsque j'ai plus d'une colonne, ce #!$$% d'IE me raffiche le fond dans chacune d'entre elle (

).

Avant de commencer à m'injurier en m'indiquant de ne pas positionner le fond dans une balise td ou tr, sachez que j'ai utilisé les balises thead, tbody et tfoot pour les fonds, et dans la balise tbody le fond est de type repeat-y.

Voilà pourquoi j'implore l'aide de quiconque connaitrais un tant soit peu les mécanismes d'IE.

Je vous joint le bout de code des tableaux et le style associé.

Si besoin est, je mettrais à dispo les sources en téléchargement.

Merci d'avance, à qui m'aidera et me permettra d'arriver à la même apparence que sous Firefox. Je reste dispo si de plus amples informations sont nécessaires..... Merci

Ah oui le code:

Html - Tableau1:

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
 
<table class="tab_aff" cellpadding="0" cellspacing="0">
	<thead>
		<th colspan="2">
		<br />
			Tableau 1
		</th>
	</thead>
	<tbody colspan="6">
		<tr>			
			<td>
				Prix Normal	(conjoint  non amicaliste)
			</td>
			<td>
				32,50 €	
			</td>
		</tr>
		<tr>
			<td>
				Prix Amicaliste/Personne
			</td>
			<td>
				12 €	
			</td>
		</tr>
		<tr>
			<td>
				Prix Enfant (Jusqu'à 12 ans)
			</td>
			<td>
				13,50 €	
			</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>				
			<td colspan="2">&nbsp;</td>
		</tr>
	</tfoot>
</table>

Html - Tableau 2

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
<table cellspacing="1" class="tab_aff">	
	<thead>
		<tr>             
			<th width="40%">Titre</th>
			<th width="20%">Date</th>
			<th width="15%">Nb Images</th>
			<th colspan="3" width="25%">Actions</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				Titre 1
			</td>
			<td>
				25/12/2007
			</td>
			<td>
				5
			</td>
			<td>	
				<a href="#"><img src="images/info.png" alt="Informations" title="Informations" />	
				</a>
			</td>
			<td>
				<a href="index.php?pg=admin_MOD_EVT&ID_EVT_ADMIN=<?php echo $id;?>"><img src="images/modifier.png" title="Modifier" alt="Modifier"/></a>
			</td>
			<td>
				<a href="index.php?pg=admin_DEL_EVT&ID_EVT_ADMIN=<?php echo $id;?>"><img src="images/trash.png" title="Supprimer" alt="Supprimer"/></a>
			</td>
		</tr>
		<tr>
			<td>
				Titre 2
			</td>
			<td>
				31/12/2007
			</td>
			<td>
				0
			</td>
			<td>	
				<a href="#"><img src="images/info.png" alt="Informations" title="Informations" />	
				</a>
			</td>
			<td>
				<a href="index.php?pg=admin_MOD_EVT&ID_EVT_ADMIN=<?php echo $id;?>"><img src="images/modifier.png" title="Modifier" alt="Modifier"/></a>
			</td>
			<td>
				<a href="index.php?pg=admin_DEL_EVT&ID_EVT_ADMIN=<?php echo $id;?>"><img src="images/trash.png" title="Supprimer" alt="Supprimer"/></a>
			</td>
		</tr>
		<tr>
			<td>
				Titre 3
			</td>
			<td>
				01/01/1970
			</td>
			<td>
				1
			</td>
			<td>	
				<a href="#"><img src="images/info.png" alt="Informations" title="Informations" />	
				</a>
			</td>
			<td>
				<a href="#"><img src="images/modifier.png" title="Modifier" alt="Modifier"/></a>
			</td>
			<td>
				<a href="#"><img src="images/trash.png" title="Supprimer" alt="Supprimer"/></a>
			</td>
		</tr>
	</tbody>
  <tfoot>
		<tr>				
			<td colspan="6">&nbsp;</td>
		</tr>
	</tfoot>
</table>

Css:

Code CSS :

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
/*************************tab_aff***************************/
.tab_aff
{
	/*border:         	2px solid #566047;*/
	border-spacing:		0px;
	margin-left: auto;
	margin-right: auto;		
	border-collapse:collapse;
	width: 455px;
}
.tab_aff img { 
	border:0px; 
	cursor:pointer; 
}
.tab_aff td {	
	vertical-align:		middle;
	padding:			10px 10px 10px 10px ;
	font-size: 			12px;
	/*border:         	1px solid #FFF;	*/
	text-align: 		center;
}
 
 
.tab_aff th {
	font-size: 			14px;
	font-weight:  		bold; 
	text-align: 		center;
	color:        		#000;
}
.tab_aff thead {
	/*background: url(../images/tab/tab_aff_h.png) center top no-repeat;*/
	width: 455px;
	height: 50px;
	background: url(../images/tab/tab_aff_h.jpg) center top no-repeat;
}
.tab_aff tbody {
	width: 455px;
	background:url(../images/tab/tab_aff_m.jpg) center top repeat-y;
}
.tab_aff tfoot {
	width: 455px;
	height: 50px;		
	background:url(../images/tab/tab_aff_b.jpg) center top no-repeat;
	margin-top:200px;
	margin-bottom:200px;
}

**trotters213** · 17/08/2007, 10h12

Avant de raler, il faut balayer devant sa porte :
- Tu utilises un doctype XHTML 1.0 Strict alors que ton code n'est pas valide XHTML : http://validator.w3.org/check?verbos...st2%2Faaa.html
- Il n'est pas vaide CSS 2 non plus : http://jigsaw.w3.org/css-validator/v...st2%2Faaa.html
- Tes commentaires conditionnels ne sont pas bons.
- Ton affichage est également mauvais sous FF : regarde l'image que je t'ai mis en pièce jointe. Derrières les angles des tableaux, il y a des bouts d'images qui défile si tu fais défiler le site.

Arrange tout ça et après tu pourras vraiment raler contre IE 6 car en effet c'est de la daube

**_cheval_** · 23/08/2007, 08h48

Salut et désolé de ne pas avoir pu te répondre avant, j'ai pas mal de boulot en ce moment.

Alors j'ai résolu l'affaire en jouant avec des div plutôt qu'avec un tableau tant pis. Car j'ai vu la confirmation que IE ne savait pas gérer ce que je lui demandais!!!

Pour ce qui des validations W3C je pense que cela provient du fait que c'est une page que j'ai écrit de l'arrache pour mettre un exemple.

A prioris sur mon site je passe la validation pour le CSS MAIS pas pour les pages html!!
Ce sont mes commentaires conditionnels qui ne passe pas, mais je ne voit pas pour quelle raison, je suis allez sur 2-3 sites qui parlent de ça, et d'après eu ma façon de les implémenter et correcte, mais pas d'après W3C.

Si tu as une info, ou un exemple de code concernant ces ifdef, je suis preneur.

AH oui, je n'ai pas vu les défaut d'affichage que tu me présentes ni sous IE, ni sous Firefox.
Comment l'as tu fait apparaitre? En faisant quel manip?

Merci d'avance.

**trotters213** · 23/08/2007, 09h44

Ton CSS n'est pas valide (tu as encore une erreur) et ton affichage n'est toujours pas bon sous IE.
Tu as mis à jour le lien que tu as donné dans ton premier ou tu as changé d'adresse ?

Pour les bugs, je n'ai pas fait de manip spécial, j'ai juste ouvert la page et scroller mais il semblerait qu'ils n'apparaissent plus.

**_cheval_** · 23/08/2007, 13h28

Effectivement le lien n'est pas à jour.

Ne t'occupe pas de la validation car je ne l'ai pas mis à jour.

Par contre ce que je n'arrive pas à valider c'est le fait d'utiliser la magouille pour afficher les png transparent pour IE avec

Code :

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

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/M_General.png', sizingMethod='scale')	;

pour le CSS.

Et j'ai aussi le problème avec les balises conditionnelles qui elles ne se valident pas.

Si tu peux m'apporter une réponse pour ces deux soucis ca serait super. Tu me ferais gagner pas mal de temps...

Encore merci

**trotters213** · 23/08/2007, 13h53

Envoyé par _cheval_

Par contre ce que je n'arrive pas à valider c'est le fait d'utiliser la magouille pour afficher les png transparent pour IE avec

Code :

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

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/M_General.png', sizingMethod='scale')	;

pour le CSS.

Comme tu le dis c'est une magouille à la mords moi le noeud donc tu ne passeras pas la validation tant que tu utiliseras ceci

**_cheval_** · 23/08/2007, 14h53

Donc tant pis pour la validation de ma feuille de style IE.

Par contre qu'en est il pour les commentaires conditionnels???

Je ne comprend pas pourquoi

Code :

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

1
2
3
4
5
6
7
#  <!--[if lt IE 7]>
# <link rel="stylesheet" type="text/css" href="style/IE.css">
# <![endif]-->
# <!--[if IE 7]>
# <link rel="stylesheet" type="text/css" href="style/Fire.css">
# <![endif]-->
# <![if !IE]><link rel="stylesheet" type="text/css" href="style/Fire.css"> <![endif]>

n'est pas considéré comme valide???

IE tableau background

Tableau en CSS

Discussions similaires

Partager

Partager