Discussion :

[tofito]

Bonjour,

Un dessin valant mieux qu'un long discours, voici mon affichage correct sous Internet Explorer:


Sous Firefox par contre, l'affichage foire:


Pour mettre en évidence le problème, j'ai entouré les cellules de tableaux avec l'extension web developper. On peut voir que la cellule contenant le texte "date of signature" et celle contenant les champs de saisie ont la même largeur que la cellule du dessus (celle contenant le texte "did this client sign the au pair agreement?"). On dirait que j'ai mis sur cette dernière cellule un colspan=2, ce qui n'est pas le cas (d'ailleurs si c'était le cas, on aurait le même décalage sous Internet Explorer...)

Je vous mets mon code ci dessous... Pour que mon application réponde à mes besoins, j'avais besoin que si l'on réponde "no" à la question "did the client sign the au pair agreement?", la ligne suivante soit masquée, tandis que si l'on répond oui, la ligne suivante est affichée.

J'ai donc nommé l'id à afficher ou masquer alternativement "ligne_optionnelle_01" et j'ai défini le <tr> contenant ma ligne à afficher/masquer ainsi: <tr id="ligne_optionnelle_01">
Le problème vient donc de là mais je ne vois pas pourquoi cela me fait ce bug d'affichage et je ne vois pas non plus comment régler le problème.

Tout conseil de votre part est donc bienvenu

Code php :

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
 
	echo '<tr>';
		echo '<td valign="top">';
			if ($ajout_photo_2 == 'erreur')
				echo '<label for="photo_2" class="erreur">'.extrait_texte(LANG, 'photo_2_a').':</label>';
			else
				echo '<label for="photo_2">'.extrait_texte(LANG, 'photo_2_a').':</label>';
		echo '</td>';
		echo '<td align="right">';
			echo '<input type="file" name="photo_2" id="photo_2" size="26" /><br />';
			echo extrait_texte(LANG, 'maximum_photos_a');
		echo '</td>';
	echo '</tr>';
echo '</table>';
echo '<h2>';
	extrait_texte(LANG, 'contrat_au_pair_a', true);
echo '</h2>';
echo '<hr class="margin_bottom_10" />';
echo '<table class="padding_bottom_20" width="600" border="0" cellpadding="0" cellspacing="0">';
	echo '<tr>';
		echo '<td class="padding_bottom_02" width="300">';
			if (empty($contrat_au_pair) && $clic || $erreur_page == 'contrat non signe')
				echo '<span class="erreur">'.extrait_texte(LANG, 'ce_client_a_t_il_signe_le_contrat_au_pair_a').'</span>';
			else
				extrait_texte(LANG, 'ce_client_a_t_il_signe_le_contrat_au_pair_a', true);
		echo '</td>';
		echo '<td class="padding_bottom_02" width="300" align="right">';
			echo '<input type="radio" name="contrat_au_pair" id="contrat_au_pair_oui" value="1"';
			if ($contrat_au_pair == 1)
				echo ' checked="checked"';
			echo ' onclick="javascript: document.getElementById(\'ligne_optionnelle_01\').style.display = \'block\'" /> <label for="contrat_au_pair_oui">'.extrait_texte(LANG, 'oui_b').'</label> &nbsp; ';
			echo '<input type="radio" name="contrat_au_pair" id="contrat_au_pair_non" value="0"';
			if ($contrat_au_pair == 0)
				echo ' checked="checked"';
			echo ' onclick="javascript: document.getElementById(\'ligne_optionnelle_01\').style.display = \'none\'" /> <label for="contrat_au_pair_non">'.extrait_texte(LANG, 'non_b').'</label>';
		echo '</td>';
	echo '</tr>';
	echo '<tr id="ligne_optionnelle_01">';
		echo '<td class="padding_bottom_10">';
			if (((empty($jour_contrat) || empty($mois_contrat) || empty($annee_contrat)) && $clic && $contrat_au_pair == 2) || $erreur_page == 'date du contrat postdatee' || $erreur_page == 'date du contrat non valide')
				echo '<label for="mois_contrat" class="erreur">'.extrait_texte(LANG, 'date_de_signature_modele_entre_parentheses_a').':</label>';
			else
				echo '<label for="mois_contrat">'.extrait_texte(LANG, 'date_de_signature_modele_entre_parentheses_a').':</label>';
		echo '</td>';
		echo '<td class="padding_bottom_10" align="right">';
			echo '<input type="text" name="mois_contrat" id="mois_contrat" size="2" maxlength="2" ';
			if (!empty($mois_contrat))
				echo 'value="'.$mois_contrat.'" ';
			echo '/> / ';
			echo '<input type="text" name="jour_contrat" id="jour_contrat" size="2" maxlength="2" ';
			if (!empty($jour_contrat))
				echo 'value="'.$jour_contrat.'" ';
			echo '/> / ';
			echo '<input type="text" name="annee_contrat" id="annee_contrat" size="4" maxlength="4" ';
			if (!empty($annee_contrat))
				echo 'value="'.$annee_contrat.'" ';
			echo '/>';
		echo '</td>';
	echo '</tr>';
echo '</table>';
echo '<p align="right">';
	echo '<input type="submit" name="ajout_client_au_pair" value="'.extrait_texte(LANG, 'valider_a').'" />';
echo '</p>';

[tofito]

Hello!

J'ai mis le code online pour que vous puissiez le voir...

Le css est basique et visible ici:
http://dladobe.free.fr/ie-ff/design.css

Le html numéro 1 est ici:
http://dladobe.free.fr/ie-ff/tr-normal/test.php

Cette page s'affiche correctement sous firefox, mais par contre que l'on clique sur "oui" ou "non" à la question "Ce client a-t-il signe le contrat?", cela ne change rien: la ligne suivante n'est pas affichée ou masquée...

[Je souhaite en effet demander la date de signature uniquement si le client a signé le contrat, et dans le cas contraire masquer donc la ligne "date de signature:" qui devient inutile...

J'ai donc appliqué le javascript suivant sur le bouton radio oui pour afficher l'id que j'ai appelé "ligne_optionnelle_01":
onclick="javascript: document.getElementById('ligne_optionnelle_01').style.display = 'block'"
et le javascript suivant sur le bouton radio non pour au contraire masquer cet id "ligne_optionnelle_01":
onclick="javascript: document.getElementById('ligne_optionnelle_01').style.display = 'none'"]

Du coup j'ai défini le tr englobant les cellules contenant le texte "Date de signature:" et les champs de saisie de la date comme étant l'id "ligne_optionnelle_01" sur cette page:
http://dladobe.free.fr/ie-ff/tr-modifie/test.php

Le javascript des boutons radio fonctionne désormais, par contre l'affichage sous firefox n'est pas bon, je ne comprends pas pourquoi.

Entre les 2 pages j'ai juste changé ceci:
<tr>
en ceci:
<tr id="ligne_optionnelle_01">

Après cela reste un tableau de 2 lignes et 2 colonnes, sans colspan donc les colonnes devraient rester aligner et pas fusionner comme elles le font sous firefox. Sous Internet explorer par contre l'affichage est correct, il n'y a pas d'impression de fusion entre les cellules.

Quelqu'un serait il capable de m'expliquer la raison de ce bug?

[Macmillenium]

Bonjour,

Par défaut, TR est un élément de rendu table-row grâce au display:table-row appliqué par la feuille de style intégrée au navigateur (presque la même pour les navigateurs alternatifs : Gecko, Webkit, Presto et KHTML).
Dans ton code, l'attribution du display:block modifie le comportement naturel du TR.

La feuille de style de IE7 et versions inférieurs attribue un display:block par défaut aux éléments TABLE, TR, TH et TD ce qui explique l'obtention du rendu souhaité.

Je te conseille de laisser le navigateur gérer le comportement des éléments du tableau en indiquant simplement :

Code :

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

1
2
 
document.getElementById('ligne_optionnelle_01').style.display = ''

au lieu de

Code :

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

1
2
 
document.getElementById('ligne_optionnelle_01').style.display = 'block'

[tofito]

Merci beaucoup pour l'explication et la solution!
Problème résolu