Discussion :

[shadokk]

Bonjour,

En fait je souhaite effectuer une mise en page particulière dans un site, une mini-gallerie de 4 images cliquables qui ouvre chacune la même image dans un format plus grand. A ce niveau, aucun problème. Le problème se situe dans le rendu chez IE.

J'ai un code de ce type sur ma page :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
				<table>
				<tr>
					<td> <img src="moz1.jpg" onclick="window.open('mozart1.jpg','MaPopupImg1','width=600,height=450');" /> </td>
					<td> <img src="moz2.jpg" onclick="window.open('mozart2.jpg','MaPopupImg2','width=600,height=450');" /> </td>
				</tr>
				<tr>
					<td> <img src="moz3.jpg" onclick="window.open('mozart3.jpg','MaPopupImg3','width=600,height=450');" /> </td>
					<td> <img src="moz4.jpg" onclick="window.open('mozart4.jpg','MaPopupImg4','width=600,height=450');" /> </td>
				</tr>
				</table>

Le rendu sur IE est merdique, en bas de chaque image de chacune cellule <td> il y a un espace (padding-bottom?) qui est inséré inutilement à chaque fois, alors que ça ne le fait pas sur les autres navigateurs.

Quelque soit les paramètres que j'ajoute en CSS cela n'arrange rien.

Est ce qu'il y aurait moyen de coutourner ce bug de IE, est-ce bien un bug ou une mauvaise mise en forme de ma page ?

Mon code css associé est le suivant :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
table {
	border : 1px #5F5F09 solid ;
	width : 135px ;
	height : 140px ;
	padding : 1px ;
	background-color : #EAEDC5 ;
	border-collapse : collapse ;
}
td {
	border : 1px #5F5F09 solid ;
	background-color : #EAEDC5 ;
}

Merci !

[MasterOfChakhaL]

Salut,

Les images sont des éléments en-ligne, elles s'alignent donc sur la ligne de base comme pour le texte. L'espace qui apparait est réservé pour pouvoir afficher la queue des lettres comme p, y q, g et j.

Vu que tu n'as pas de texte dans tes cellules, le plus simple c'est d'afficher l'image comme un élément bloc.

Code :

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

1
2
3
4
 
td img {
  display: block;
}

[shadokk]

slt !

Merci de m'avoir répondu.

Oui ça doit être une sacré lacune de ma part d'avoir zappé cette subtilité des type in-line et block.

Jvais tester ça pour voir.

bye

[shadokk]

waaaa c'est bon !!

Merci beaucoup, et moi qui a failli rejeter toute la faute sur ce pauvre IE (en même temps je n'ai pas eu du tout ce problème avec les différentes variantes de gecko ^^)