Discussion :

[Mo0oN]

Hello,

J'ai un souci avec Firefox.
J'ai créé un tableau html qui fonctionne parfaitement sous Chrome et IE, mais pas sous Firefox.

C'est un tableau à 3 colonnes et 4 lignes, et la 3e colonne prend toute la hauteur des 4 lignes (d'où l'emploi du rowspan)
Voici le code (oui j'ai mis du CSS dans du HTML c'est moche :O ) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table style="border:none;" width=100%><tbody><tr>
   <td width=13% style="text-align:right; height:68px; vertical-align:bottom;">UNE IMAGE</td>
   <td width=36% style="padding-left:10px; padding-bottom:2px; vertical-align:bottom; font-size:28px; font-weight:bold;">BLABLA</td>
   <td width=50% style="text-align:center;" rowspan="5">UNE MAP GOOGLE (qui prend toute la hauteur du tableau)</td>
</tr><tr>
   <td style="text-align:right; height:50px; vertical-align:bottom;">UNE IMAGE</td>
   <td style="padding-left:10px; padding-bottom:2px; vertical-align:bottom; font-size:28px; font-weight:bold;">BLABLA</td>
</tr><tr>
   <td style="text-align:right; height:60px; vertical-align:bottom;">UNE IMAGE</td>
   <td style="padding-left:10px; padding-bottom:6px; vertical-align:bottom; font-size:22px; font-weight:bold;">BLABLA</td>
</tr><tr>
   <td style="text-align:right; height:40px; vertical-align:bottom;">UNE IMAGE</td>
   <td style="padding-left:10px; padding-bottom:6px; vertical-align:bottom; font-size:22px; font-weight:bold;">BLABLA</td>
</tr></tbody></table>

Comme résultat, sur Chrome et IE, ca fonctionne très bien, càd que ca donne :

UNE IMAGE___BLABLA___xxxxxxxxxxxx
UNE IMAGE___BLABLA___x__MAP___x
UNE IMAGE___BLABLA___x_GOOGLE_x
UNE IMAGE___BLABLA___xxxxxxxxxxxx

Mais sur Firefox ca donne :

_____________________xxxxxxxxxxxx
_____________________x__MAP___x
_____________________x_GOOGLE_x
UNE IMAGE___BLABLA___xxxxxxxxxxxx
UNE IMAGE___BLABLA_____________
UNE IMAGE___BLABLA_____________
UNE IMAGE___BLABLA_____________

Any idea ?
Merci d'avance !

[thelvin]

Chez moi, Firefox 11.0 sous WinXP, ça donne le premier résultat, en mode standard comme en mode quirks.

Il faut sans doute autre chose autour, pour avoir ton problème. C'est pour ça que quand on cherche à résoudre un problème sur un site web, on commence par donner l'URL : comme ça on voit la même chose.

Bon, ceci étant dit, mettre rowspan="5" pour une cellule de hauteur 4, ça ne peut pas porter chance.

[Atomya Rise]

Chez moi, sous firefox, ça fonctionne normalement :



...

[Mo0oN]

merci de vos réponses !
je vais donc trifouiller mon CSS car le problème doit venir de là du coup

le rowspan de 5 n'est pas normal aussi mais quand je mettais 4, la dernière ligne était mal placée ...

bon je vais remettre tout ca à plat, j'ai fait trop de bidouillage sale dernièrement !

[Mo0oN]

le problème vient de la google map en fait.

essayez ce code svp :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table style="border:none;" width=100%><tbody><tr>
   <td width=13% style="text-align:right; height:68px; vertical-align:bottom;">UNE IMAGE</td>
   <td width=36% style="padding-left:10px; padding-bottom:2px; vertical-align:bottom; font-size:28px; font-weight:bold;">BLABLA</td>
   <td width=50% style="text-align:center;" rowspan="5"><iframe width="350" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=fr&amp;geocode=&amp;q=tour+eiffel+paris&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=44.25371,79.013672&amp;t=h&amp;ie=UTF8&amp;hq=tour+eiffel+paris&amp;ll=48.858108,2.294598&amp;spn=0.014118,0.029955&amp;z=14&amp;iwloc=near&amp;output=embed"></iframe></td>
	</tr><tr>
   <td style="text-align:right; height:50px; vertical-align:bottom;">UNE IMAGE</td>
   <td style="padding-left:10px; padding-bottom:2px; vertical-align:bottom; font-size:28px; font-weight:bold;">BLABLA</td>
</tr><tr>
   <td style="text-align:right; height:60px; vertical-align:bottom;">UNE IMAGE</td>
   <td style="padding-left:10px; padding-bottom:6px; vertical-align:bottom; font-size:22px; font-weight:bold;">BLABLA</td>
</tr><tr>
   <td style="text-align:right; height:40px; vertical-align:bottom;">UNE IMAGE</td>
   <td style="padding-left:10px; padding-bottom:6px; vertical-align:bottom; font-size:22px; font-weight:bold;">BLABLA</td>
</tr></tbody></table>

sous firefox 11 ca décale ...
vous auriez une solution ??

[Atomya Rise]

Toujours correct pour ma part