Pb avec Firefox

**idfast** · 05/05/2008, 10h02

Bonjour,
J'ai un pb d'affichage avec Firefox j'ai 2 espaces qui se crée sur ma page à droite et je ne trouve pas où est le pb pouvez-vous m'aider :

voir la page
Merci.
ID

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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK> 
<link href="js/opt_global.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="js/full.js"> </script>
<style type="text/css">
<!--
.Style1 {font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.Style2 {color: #737373}
.Style14 {font-size: 10px}
.Style21 {font-size: 12px}
.Style22 {font-size: 10px; color: #737373; }
.Style26 {font-size: 7.5px}
.Style30 {font-size: 12px; color: #737373; }
.Style40 {color: #0862B1}
.Style42 {font-size: 10px; font-weight: bold; }
.Style43 {color: #0862B1; font-family: Verdana, Arial, Helvetica, sans-serif; }
a:link {
	color: #0862B1;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #003399;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: underline;
}
.Style47 {
	color: #999999;
	font-size: 10px;
	line-height: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-weight: normal;
}
.Style52 {
	color: #737373;
	font-weight: bold;
	font-size: 12px;
}
-->
</style>
</head>
 
<body onLoad="MM_preloadImages('img/but-acc/01_over.gif','img/but-acc/02_over.gif','img/but-acc/03_over.gif','img/but-acc/04_over.gif','img/but-acc/05_over.gif','img/but-acc/06_over.gif')">
<table width="101%" height="534"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="33%" class="bgdLeft">&nbsp;</td>
    <td width="34%" align="center" valign="top"><table width="1%" height="889"  border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="19" valign="top"><div align="center"><img src="img/acc_top.jpg" width="656" height="38" border="0"></div></td>
      </tr>
      <tr>
        <td valign="top"><img src="img/acc_01.jpg" width="656" height="237"></td>
      </tr>
      <tr>
        <td valign="top"><table width="1"  border="0" cellspacing="0" cellpadding="0">
            <tr valign="top">
              <td width="7%" height="182"><img src="img/acc_02a.jpg" width="45" height="182"></td>
              <td width="27%"><img src="img/acc_02b.jpg" width="182" height="182"></td>
              <td width="2%" bgcolor="#FFFFFF"><img src="img/spacer.gif" width="10" height="10"></td>
              <td width="27%" bgcolor="#0862B1"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td valign="top"><img src="img/spacer.gif" width="10" height="30"></td>
                  </tr>
                  <tr>
                    <td valign="top"><a href="http://www.optique-prost-tournier.com/presentation.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but01','','img/but-acc/01_over.gif',1)"><img src="img/but-acc/01_on.gif" name="but01" width="182" height="21" border="0"></a></td>
                  </tr>
                  <tr>
                    <td height="3" valign="top"><img src="img/strip-dot-menu-acc.gif" width="182" height="3"></td>
                  </tr>
                  <tr>
                    <td valign="top"><a href="http://www.optique-prost-tournier.com/offres.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but02','','img/but-acc/02_over.gif',1)"><img src="img/but-acc/02_on.gif" name="but02" width="182" height="21" border="0"></a></td>
                  </tr>
                  <tr>
                    <td valign="top"><img src="img/strip-dot-menu-acc.gif" width="182" height="3"></td>
                  </tr>
                  <tr>
                    <td valign="top"><a href="espace-conseil.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but03','','img/but-acc/03_over.gif',1)"><img src="img/but-acc/03_on.gif" name="but03" width="182" height="21" border="0"></a></td>
                  </tr>
                  <tr>
                    <td valign="top"><img src="img/strip-dot-menu-acc.gif" width="182" height="3"></td>
                  </tr>
                  <tr>
                    <td valign="top"><a href="http://www.optique-prost-tournier.com/actualites.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but04','','img/but-acc/04_over.gif',1)"><img src="img/but-acc/04_on.gif" name="but04" width="182" height="21" border="0"></a></td>
                  </tr>
                  <tr>
                    <td height="3" valign="top"><img src="img/strip-dot-menu-acc.gif" width="182" height="3"></td>
                  </tr>
                  <tr>
                    <td valign="top"><a href="http://www.optique-prost-tournier.com/collections.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but05','','img/but-acc/05_over.gif',1)"><img src="img/but-acc/05_on.gif" name="but05" width="182" height="21" border="0"></a></td>
                  </tr>
                  <tr>
                    <td valign="top"><img src="img/strip-dot-menu-acc.gif" width="182" height="3"></td>
                  </tr>
                  <tr>
                    <td height="21" valign="top"><a href="http://www.optique-prost-tournier.com/instruments.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but06','','img/but-acc/06_over.gif',1)"><img src="img/but-acc/06_on.gif" name="but06" width="182" height="21" border="0"></a></td>
                  </tr>
              </table></td>
              <td width="2%" bgcolor="#FFFFFF"><img src="img/spacer.gif" width="10" height="10"></td>
              <td width="22%" bgcolor="#FFFFFF"><table width="100%" height="166"  border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td height="19" valign="top" class="Verdana12Grey"><p class="Style52"><b><span class="Style25"> 61</span>e Anniversaire</b></p></td>
                  </tr>
                  <tr>
                    <td height="94"><table width="100%"  border="0" cellspacing="0" cellpadding="5">
                        <tr>
                          <td height="159" valign="top" class="Verdana9Grey"><div align="justify">
                            <p class="Verdana9Grey"><span class="Style22"><strong>                              Les Opticiens Prost-Tournier</strong></span> <span class="Style14">vous proposeront toute l'ann&eacute;e des offres &agrave; ne pas manquer.</span><br>
                            <br>
                              <b>Trois opticiens dipl&ocirc;m&eacute;s</b>, vous aideront dans la prise de d&eacute;cision pour que  vos lunettes optiques, solaires, lentilles correspondent &agrave; vos besoins, &agrave; votre utilisation, et &agrave; votre envie de design et d'esth&eacute;tique. </p>
                            </div></td>
                        </tr>
                    </table></td>
                  </tr>
              </table></td>
              <td width="13%"><img src="img/acc_02e.jpg" width="45" height="182"></td>
            </tr>
            <tr valign="top" bgcolor="#FFFFFF">
              <td><img src="img/acc_033a.jpg" width="45" height="10"></td>
              <td><img src="img/spacer.gif" width="182" height="10"></td>
              <td><img src="img/spacer.gif" width="10" height="10"></td>
              <td><img src="img/spacer.gif" width="182" height="10"></td>
              <td><img src="img/spacer.gif" width="10" height="10"></td>
              <td><img src="img/spacer.gif" width="182" height="10"></td>
              <td width="7%" height="10"><img src="img/acc_033b.jpg" width="45" height="10"></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td height="282" valign="top"><table width="1" height="250"  border="0" cellpadding="0" cellspacing="0">
          <tr valign="top">
            <td width="7%" height="282"><img src="img/acc_06a.jpg" width="45" height="282"></td>
            <td bgcolor="#FFFFFF"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="32%"><img src="img/m_offre_acc.gif" width="100" height="39" align="middle"></td>
                  <td width="68%" class="Style43"><p><a href="tension_glaucome.php" class="SousMenu"><b>D&eacute;pistage gratuit de la tension oculaire :</b></a><span class="Style30"> <span class="Style14">du 1er au 30 mail  2008 ...</span>..</span><a href="tension_glaucome.php"><span class="Style47"> +d'infos<br>
                  </span></a><a href="basse_vision.php" class="SousMenu"><b>Basse Vision :</b></a> <span class="Style30"><span class="Style14">...</span>..</span><a href="basse_vision.php"><span class="Style47"> +d'infos</span></a>
                    </p>
                    </td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td class="Style43">&nbsp;</td>
                </tr>
              </table>
                <table width="100%"  border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="12%" height="161" valign="top">&nbsp;</td>
                    <td width="20%" valign="top"><img src="img/th_offres_01.gif" alt="offres" width="60" height="40" class="boxGrey"></td>
                    <td width="68%" valign="top"><p align="left" class="Style1"><span class="Style44 Style21 Style2"><STRONG>61<STRONG>e</STRONG> <STRONG>A</STRONG>nniversaire</STRONG>, </span><span class="Style2 Style21">d</span><span class="Style30">es offres toute l'ann&eacute;e :</span><strong><span class="Style2"><br>
                      </span></strong><span class="Verdana9Grey">2&egrave;me paire &agrave; votre vue * <br>
                        Des<b> Forfaits solaires</b>* &agrave; votre vue :&nbsp; <br>
  <b>80&euro; </b> monture + 2 verres unifocaux &nbsp;<br>
  <strong>180 &euro;</strong>&nbsp;2 verres progressifs<br>
  <br>
  <b><span class="Style14">15 %</span></b> sur la collection solaire <span class="Style14"><b>POLICE </b></span></span><span class="Style22"><br>
  </span><span class="Verdana9Grey Style40">Vos lentilles de couleurs <span class="Style42">Freshlook </span>:<br>
    23 &euro; la paire ou 27 &euro; avec Renu 360ml</span></p>
                      <p align="right" class="Verdana10Grey"><a href="http://www.optique-prost-tournier.com/offres.php">+ d&rsquo;infos</a><br>
                          <span class="Style26">*voir conditions, non cumulables</span></p></td>
                  </tr>
                </table></td>
            <td width="2%" bgcolor="#FFFFFF"><img src="img/spacer.gif" width="10" height="10"></td>
            <td width="22%" valign="top" bgcolor="#FFFFFF"><img src="img/acc_03c.jpg" width="182" height="182" align="top"></td>
            <td width="13%"><img src="img/acc_06d.jpg" width="45" height="282"></td>
          </tr>
          <tr valign="top" bgcolor="#FFFFFF">
            <td height="10"><img src="img/acc_044a.jpg" width="45" height="10"></td>
            <td><img src="img/spacer.gif" width="374" height="10"></td>
            <td><img src="img/spacer.gif" width="10" height="10"></td>
            <td><img src="img/spacer.gif" width="182" height="10"></td>
            <td><img src="img/acc_044b.jpg" width="45" height="10"></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td height="95" valign="top"><table width="1"  border="0" cellspacing="0" cellpadding="0">
            <tr valign="top" bgcolor="#FFFFFF">
              <td width="8%" height="95"><img src="img/acc_05a.jpg" width="45" height="95"></td>
              <td valign="bottom" bgcolor="#D9D9D9"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td><img src="img/spacer.gif" width="566" height="2"></td>
                  </tr>
                  <tr>
                    <td height="59" valign="bottom"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td width="93%" height="37" class="Verdana9Black">&nbsp; &copy; Prost-Tournier, 2008</td>
                          <td width="7%"><div align="right"><img src="img/akajou.jpg" alt="akajou, studio de cr&eacute;ation" width="39" height="37" border="0"></div></td>
                        </tr>
                    </table></td>
                  </tr>
              </table></td>
              <td width="10%"><img src="img/acc_05b.jpg" width="45" height="95"></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td height="45" valign="top"><img src="img/acc_bottom.jpg" width="656" height="45"></td>
      </tr>
    </table></td>
    <td width="33%" class="bgdRight"><p>&nbsp;</p></td>
  </tr>
</table>

**_Mac_** · 05/05/2008, 10h10

A expliquer, c'est pas très compliqué : ton image acc_02a.jpg fait 182 pixels de haut, or tout le contenu du tableau bleu au centre et du texte à droite fait plus de 182 pixels de haut. Donc forcément, ça fait un blanc en dessous.

Maintenant, à corriger le problème, je ne vois pas trop comment faire étant donné le design

Y aurait la solution classique de ramener ton image acc_02a.jpg à 1 pixel de haut et à répéter cette image sur toute la hauteur de la cellule (solution classique) mais ce n'est pas possible étant donné le dégradé de l'ombre portée. Donc là, je ne sais pas comment t'aider davantage.

**idfast** · 05/05/2008, 10h22

merci pour ta réponse, je n'ai pas ce pb avec IE 7 seulement avec Firefox.
ID

**_Mac_** · 05/05/2008, 14h21

Compare l'affichage avec les différents navigateurs : tu verras que l'espacement entre les titres et les paragraphes du texte de droite ne sont pas les mêmes. Tu peux donc jouer sur les proporiétés CSS margin et padding pour les corriger. En fait, ce qui me gêne c'est si l'utilisateur change la taille d'affichage de la police : dans ce cas, il risque de voir ce "trou".

Pb avec Firefox

CSS

Vue hybride

Discussions similaires

Partager

Partager