Affichage d'images différent selon le navigateur

Version imprimable

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:

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.

23/01/2014, 02h01
Muchos

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.
23/01/2014, 09h04
Bisûnûrs

Citation:

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é.

Citation:

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.
23/01/2014, 10h01
Bovino

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 ?

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:

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>

23/01/2014, 14h29
Bovino

Citation:

le problème intervient avec IE9

En copiant/collant ton code dans IE9, je n'ai pas le problème décrit...

Citation:

aucune balise tordue n'apparait

Tu veux dire à part les balises et attributs obsolètes ? :mrgreen:
23/01/2014, 16h59
xev74

Citation:

En copiant/collant ton code dans IE9, je n'ai pas le problème décrit...

Comme il s'agit d'une newsletter, j'ai le problème en ouvrant l'email sous Hotmail et Yahoo.

Citation:

Tu veux dire à part les balises et attributs obsolètes ?

Il y a des balises à ne pas utiliser dans mon code ?

Merci pour le soutien camarade !