Affichage d'images différent selon le navigateur

**xev74** · 22/01/2014, 14h26

Bonjour à tous,

Je réalise une newsletter et j'ai un problème d'affichage pour 4 images.
Je veux qu'elles soient en ligne mais suivant les navigateurs, elles s'affichent:
- horizontalement (ce que je veux) sous Mozilla Firefox
- verticalement sous IE

Voici le code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<a href="monlien.html" style="text-decoration:none;">
<img src="http://image.exct.net/lib/fec71578746d007c/m/3/iconf.png" />
</a>
<a href="monlien.html" style="text-decoration:none;">
<img src="http://image.exct.net/lib/fec71578746d007c/m/3/iconi.png" />
</a>
<a href="monlien.html" style="text-decoration:none;>
<img src="http://image.exct.net/lib/fec71578746d007c/m/3/icont.png" />
</a>
<a href="monlien.html" style="text-decoration:none;>
<img src="http://image.exct.net/lib/fec71578746d007c/m/3/icony.png" />
</a>

Je ne vois pas comment faire plus simple au niveau du code !

Merci de votre aide.

**Muchos** · 23/01/2014, 02h01

Le code posté là ne suffit pas pour comprendre le comportement sous IE. D'ailleurs, quelle version de IE?

~~A priori, je pense que display:inline-block; est utilisé à un moment donné (et n'est pas supporté par votre version d'IE).~~
EDIT: Aucun rapport. En effet, avec le code en question, les éléments inline-block serait alors simplement considérés comme inline. Voir ci-dessous.

**Bisûnûrs** · 23/01/2014, 09h04

Envoyé par Muchos

Le code posté là ne suffit pas pour comprendre le comportement sous IE. D'ailleurs, quelle version de IE?

On est d'accord sur la première phrase, sauf que quelle que soit la version de IE, le comportement ne devrait pas être comme présenté.

Envoyé par Muchos

A priori, je pense que display:inline-block; est utilisé à un moment donné (et n'est pas supporté par votre version d'IE).

Si la version de IE utilisée ne comprend pas inline-block, elle va simplement ignorer la déclaration et rester sur du inline, la valeur par défaut des liens ou du inline remplacé (émulation inline-block pour IE7<) pour les images.

**Bovino** · 23/01/2014, 10h01

Bisûnûrs, inline-block est supporté par IE6 pour les éléments nativement inline. C'est uniquement pour les éléments de type bloc que ça ne passe pas.

Bref, il faudrait avant tout voir le code...

D'ailleurs, si c'est pour une newsletter, peut-être s'agit-il d'un mail ?

**xev74** · 23/01/2014, 14h22

Vous avez tout à fait raison.
Il s'agit d'un Newsletter et le problème intervient avec IE9.

Voici la totalité du code et aucune balise tordue n'apparait

Quelle frustration !

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
132
133
134
135
136
137
 
<body align = "top">
<table width = "100%" border ="0">
	<tr>
		<td align ="middle">
			<table width="550" bgcolor = "#ffffff" border="0" cellpadding="0" cellspacing="0" cellmargin="0" style="border-collapse:collapse;">
				<!-- header -->
				<tr>
					<td colspan = "3" align = "middle">
						<p  align = "middle" >
						<font face="verdana" size="1" color="#000000" align = "middle">
							To view this email as a web page, go <a href="%%view_email_url%%" style = "text-decoration: none; color: #e3051a;">here.</a>
						</font>
					</td>
				</tr>
				<!-- /header -->
				<!-- logo -->
				<tr>
					<td colspan = "3">
						<a href="monlien.html" style ="text-decoration:none;">
						<img src="minImage.png" style="border:0px; vertical-align: middle;" />
						</a>
					</td>
				</tr>
				<!-- /logo -->
 
				<!-- espace entre logo et trait rouge -->
				<tr bgcolor="#cccccc">
					<td width="15"></td>
					<td width="120"><br /></td>					
					<td></td>
					<!--<td></td>
					<td></td>-->
				</tr>
				<!-- /espace entre logo et trait rouge -->
 
				<!-- trait rouge -->
				<tr bgcolor="#cccccc">
					<td></td>
					<td height="4"> </td>
					<td><img src="http://image.exct.net/lib/fec71578746d007c/m/3/trait-rouge.PNG" /></td>
 
					<!--<td></td>
					<td></td>-->
				</tr>
				<!-- /trait rouge -->
 
				<!-- espace entre trait rouge et contenu -->
				<tr bgcolor="#cccccc">
					<td height="15"></td>
					<td></td>
					<td></td>
					<!--<td></td>
					<td></td>-->
				</tr>
				<!-- /espace entre trait rouge et contenu -->
 
				<!-- contenu -->
				<tr bgcolor="#cccccc">
					<td></td>
					<td></td>
					<td colspan="2" align= "left">
						<font color="#000000" align = "left">
							CONTENU
						</font>
					</td>
				</tr>
				<!-- /contenu -->
 
				<!-- espace contenu et register -->
				<tr bgcolor="#cccccc">
					<td height="15"></td>
					<td></td>					
					<td></td>
					<!--<td></td>
					<td></td>-->
				</tr>
				<!-- espace contenu et register -->
 
				<!-- register -->
				<tr bgcolor="#cccccc">
					<td height="15"></td>					
					<td></td>
					<td align= "left">
						<img src="http://image.exct.net/lib/fec71578746d007c/m/3/register.png" /></font>
					</td>
					<!--<td></td>
					<td></td>-->
				</tr>
				<!-- /register -->
 
				<!-- espace register et footer -->
				<tr bgcolor="#cccccc">
					<td height="50"></td>
					<td></td>
					<td></td>
					<!--<td></td>
					<td></td>-->
				</tr>
				<!-- espace register et footer -->
 
				<!-- medias sociaux + adresse -->
				<tr>
					<td height="8" colspan="3"></td>
				</tr>
				<tr>
					<td><img src="http://image.exct.net/lib/fec71578746d007c/m/1/blank.png" /></td>
					<!--<td bgcolor="#ffffff" width="100">-->
					<td bgcolor="#ffffff">
<a href="monlien.html" style="text-decoration:none;"><img src="http://image.exct.net/lib/fec71578746d007c/m/3/iconf.png" /></a>
<a href="monlien.html" style="text-decoration:none;"><img src="http://image.exct.net/lib/fec71578746d007c/m/3/iconi.png" /></a>
<a href="monlien.html" style="text-decoration:none;"><img src="http://image.exct.net/lib/fec71578746d007c/m/3/icont.png" /></a>
<a href="monlien.html" style="text-decoration:none;"><img src="http://image.exct.net/lib/fec71578746d007c/m/3/icony.png" /></a>
					</td>
					<td>
						<font color="#ed1c2a" size="1"><b>Adresse</b></font>
					</td>
				</tr>
				<!-- /medias sociaux + adresse -->
 
				<!-- footer -->
				<tr>
					<td colspan="3" align = "middle" style = "font-family: Verdana; font-weight: normal; font-size: 9px; color: #000000; padding: 2px">
						<p  align = "middle">
							<br />This email was sent to <font color="#000000">%%emailaddr%%</font>.<br />
							To ensure that you continue receiving our emails, please add us to your address book or safe list.<br />
											If you do not want to receive this newsletter, <a href="monlien.html" style = "text-decoration: none; color: #cc0000;">click here</a>.<br />
						</p>
					</td>
				</tr>
				<!-- /footer -->
			</table>
		</td>
	</tr>
 
</table>
</body>