CSS non chargé dans Thickbox sous Safari

**will89** · 15/07/2008, 18h49

Bonjour, je travaille a la finalisation de la nouvelle charte graphique d'un site de commerce. J'en suis au débuggage et aux dernières petites retouches. Mon problème vient des pages Mur des marques et Mur des catégories. qui sont accessibles via la page d'accueil : http://www.monshowroom.com.

Le problème est visible uniquement sous Safari (sous Mac ou Windows le problème est le même). Lorsque l'on ouvre le lien normalement, la thickbox s'ouvre mais le CSS n'est pas chargé, alors que lorsqu'on ouvre dans un nouvel onglet ou une nouvelle fenêtre, le CSS est chargé correctement.

Si quelqu'un a une idée, je suis preneur et je continue de mon coté.

**bredelet** · 15/07/2008, 21h47

Tu es sur que c'est une question CSS pas une question Flash?

(Safari croit que c'est du Flash.)

**will89** · 16/07/2008, 15h33

Bin je vois vraiment pas pourquoi Safari m'interprèterait ça comme du Flash...

Bizarre comme idée... Je vous mets le code de ma page wall_mark.php qui correspond au mur des marques.

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
<style type="text/css">
  h1 {
    font-family: Tahoma;
    color: #6B6B6B;
    font-size: 18px;
    text-align: center;
    padding-bottom: 24px;
    text-transform: uppercase;
  }
 
  #mur_marques {
    margin: 0px auto;
    background-image: url(images/background_bloc/degrade_marque.gif);
    background-repeat: repeat-x;
    background-position: bottom;
    font-family: Tahoma;
    color: #6B6B6B;
  }
 
  #mur_marques a:link, #mur_marques a:visited {
    text-decoration: none;
  }
 
  #mur_marques a:hover {
    text-decoration: none;
    font-weight: bold;
    color: #FF33CC;
  }
 
  .col_marques {
    width: 235px;
    height: 417px;
    overflow: hidden;
  }
 
  #col_1 {
  }
 
  #col_2 {
    margin: -417px 0px 0px 235px;
  }
 
  #col_3 {
    margin: -417px 0px 0px 470px;
  }
 
  #col_4 {
    margin: -417px 0px 0px 705px;
  }
 
  .bloc_marque {
    margin-left: 8px;
    width: 220px;
  }
 
  .case_lettre {
    float:left;
    width: 45px;
    height: 45px;
    padding: 8px 0px;
    font-size :36px;
    font-weight: bold;
    text-align: center;
  }
 
  .case_marques {
    float:right;
    width: 175px;
    font-size :11px;
  }
 
  .case_ann {
    clear:both;
    height: 20px;
  }
</style>
<h1>Mur des marques</h1>
<div id="mur_marques">
  <div class="col_marques" id="col_1"><div class="bloc_marque" id="bm2">
                       <div class="case_lettre" id="cl2">2</div>
                       <div class="case_marques" id="lm2"><a href="/fr/collection-ete-08/137-------" title="2two">2two</a><br /></div>
                       <div class="case_ann" id="ca2"></div>
                     </div>
 
                     <div class="bloc_marque" id="bmA">
                       <div class="case_lettre" id="clA">A</div>
                       <div class="case_marques" id="lmA"><a href="/fr/collection-ete-08/1-------" title="American Retro">American Retro</a><br /><a href="/fr/ancienne-collection/121-------" title="Ambre Babzoe">Ambre Babzoe</a><br /><a href="/fr/collection-ete-08/21-------" title="Antik Batik">Antik Batik</a><br /><a href="/fr/collection-ete-08/25-------" title="American vintage">American vintage</a><br /><a href="/fr/collection-ete-08/119-------" title="American Apparel by MSR">American Apparel by MSR</a><br /></div>
                       <div class="case_ann" id="caA"></div>
                     </div>
                     <div class="bloc_marque" id="bmB">
 
                       <div class="case_lettre" id="clB">B</div>
                       <div class="case_marques" id="lmB"><a href="/fr/collection-ete-08/4-------" title="Ba&sh">Ba&sh</a><br /><a href="/fr/collection-ete-08/33-------" title="Bel Air">Bel Air</a><br /><a href="/fr/ancienne-collection/37-------" title="Berenice">Berenice</a><br /><a href="/fr/collection-ete-08/128-------" title="By Zoé">By Zoé</a><br /></div>
                       <div class="case_ann" id="caB"></div>
                     </div>
                     <div class="bloc_marque" id="bmC">
                       <div class="case_lettre" id="clC">C</div>
 
                       <div class="case_marques" id="lmC"><a href="/fr/collection-ete-08/46-------" title="Cintribille">Cintribille</a><br /></div>
                       <div class="case_ann" id="caC"></div>
                     </div>
                     <div class="bloc_marque" id="bmE">
                       <div class="case_lettre" id="clE">E</div>
                       <div class="case_marques" id="lmE"><a href="/fr/collection-ete-08/48-------" title="Egery">Egery</a><br /><a href="/fr/collection-ete-08/132-------" title="Euphémie">Euphémie</a><br /></div>
                       <div class="case_ann" id="caE"></div>
 
                     </div>
                     </div>
  <div class="col_marques" id="col_2"><div class="bloc_marque" id="bmF">
                       <div class="case_lettre" id="clF">F</div>
                       <div class="case_marques" id="lmF"><a href="/fr/collection-ete-08/10-------" title="Fuschia">Fuschia</a><br /><a href="/fr/collection-ete-08/40-------" title="French connection">French connection</a><br /></div>
                       <div class="case_ann" id="caF"></div>
                     </div>
 
                     <div class="bloc_marque" id="bmH">
                       <div class="case_lettre" id="clH">H</div>
                       <div class="case_marques" id="lmH"><a href="/fr/collection-ete-08/34-------" title="Hello kitty By Victoria">Hello kitty By Victoria</a><br /><a href="/fr/collection-ete-08/118-------" title="Hannah Moré">Hannah Moré</a><br /><a href="/fr/collection-ete-08/140-------" title="Hop Hop Hop">Hop Hop Hop</a><br /></div>
                       <div class="case_ann" id="caH"></div>
                     </div>
                     <div class="bloc_marque" id="bmI">
                       <div class="case_lettre" id="clI">I</div>
 
                       <div class="case_marques" id="lmI"><a href="/fr/collection-ete-08/5-------" title="Iro">Iro</a><br /><a href="/fr/collection-ete-08/27-------" title="Inari">Inari</a><br /></div>
                       <div class="case_ann" id="caI"></div>
                     </div>
                     <div class="bloc_marque" id="bmK">
                       <div class="case_lettre" id="clK">K</div>
                       <div class="case_marques" id="lmK"><a href="/fr/collection-ete-08/134-------" title="Koshka Mashka">Koshka Mashka</a><br /></div>
                       <div class="case_ann" id="caK"></div>
 
                     </div>
                     <div class="bloc_marque" id="bmL">
                       <div class="case_lettre" id="clL">L</div>
                       <div class="case_marques" id="lmL"><a href="/fr/collection-ete-08/45-------" title="Les dilettantes">Les dilettantes</a><br /><a href="/fr/collection-ete-08/116-------" title="La Fiancée des Pirates">La Fiancée des Pirates</a><br /><a href="/fr/collection-ete-08/135-------" title="LSonge">LSonge</a><br /><a href="/fr/collection-ete-08/142-------" title="Lyie Van Rycke">Lyie Van Rycke</a><br /></div>
                       <div class="case_ann" id="caL"></div>
                     </div>
 
                     </div>
  <div class="col_marques" id="col_3"><div class="bloc_marque" id="bmM">
                       <div class="case_lettre" id="clM">M</div>
                       <div class="case_marques" id="lmM"><a href="/fr/collection-ete-08/3-------" title="Manoush">Manoush</a><br /><a href="/fr/collection-ete-08/11-------" title="Maje">Maje</a><br /><a href="/fr/collection-ete-08/35-------" title="Milk & Water">Milk & Water</a><br /><a href="/fr/ancienne-collection/41-------" title="Madame à Paris">Madame à Paris</a><br /><a href="/fr/collection-ete-08/113-------" title="Muka">Muka</a><br /><a href="/fr/collection-ete-08/136-------" title="Mademoiselle est Capricieuse">Mademoiselle est Capricieuse</a><br /><a href="/fr/collection-ete-08/143-------" title="Marie Berte">Marie Berte</a><br /></div>
 
                       <div class="case_ann" id="caM"></div>
                     </div>
                     <div class="bloc_marque" id="bmO">
                       <div class="case_lettre" id="clO">O</div>
                       <div class="case_marques" id="lmO"><a href="/fr/collection-ete-08/43-------" title="Oxyde">Oxyde</a><br /><a href="/fr/collection-ete-08/120-------" title="Only">Only</a><br /><a href="/fr/collection-ete-08/138-------" title="Objet Trouvé">Objet Trouvé</a><br /></div>
                       <div class="case_ann" id="caO"></div>
                     </div>
 
                     <div class="bloc_marque" id="bmP">
                       <div class="case_lettre" id="clP">P</div>
                       <div class="case_marques" id="lmP"><a href="/fr/collection-ete-08/29-------" title="Petite Mendigote">Petite Mendigote</a><br /><a href="/fr/ancienne-collection/108-------" title="Pudik">Pudik</a><br /><a href="/fr/collection-ete-08/110-------" title="Paul & Joe Sister">Paul & Joe Sister</a><br /><a href="/fr/collection-ete-08/127-------" title="Pablo de Gérard Darel">Pablo de Gérard Darel</a><br /><a href="/fr/collection-ete-08/139-------" title="Pieces">Pieces</a><br /></div>
                       <div class="case_ann" id="caP"></div>
                     </div>
 
                     <div class="bloc_marque" id="bmS">
                       <div class="case_lettre" id="clS">S</div>
                       <div class="case_marques" id="lmS"><a href="/fr/collection-ete-08/9-------" title="Sessun">Sessun</a><br /><a href="/fr/ancienne-collection/32-------" title="Sandro">Sandro</a><br /><a href="/fr/collection-ete-08/123-------" title="Sélection MonShowroom">Sélection MonShowroom</a><br /><a href="/fr/collection-ete-08/133-------" title="Sluch">Sluch</a><br /></div>
                       <div class="case_ann" id="caS"></div>
                     </div>
                     </div>
 
  <div class="col_marques" id="col_4"><div class="bloc_marque" id="bmU">
                       <div class="case_lettre" id="clU">U</div>
                       <div class="case_marques" id="lmU"><a href="/fr/collection-ete-08/109-------" title="Un jour mon prince">Un jour mon prince</a><br /></div>
                       <div class="case_ann" id="caU"></div>
                     </div>
                     <div class="bloc_marque" id="bmV">
                       <div class="case_lettre" id="clV">V</div>
 
                       <div class="case_marques" id="lmV"><a href="/fr/collection-ete-08/42-------" title="Virginie Monroe">Virginie Monroe</a><br /><a href="/fr/ancienne-collection/47-------" title="Velvet">Velvet</a><br /><a href="/fr/collection-ete-08/111-------" title="Virginie Castaway">Virginie Castaway</a><br /><a href="/fr/collection-ete-08/126-------" title="Véro Moda">Véro Moda</a><br /></div>
                       <div class="case_ann" id="caV"></div>
                     </div>
                     <div class="bloc_marque" id="bmY">
                       <div class="case_lettre" id="clY">Y</div>
                       <div class="case_marques" id="lmY"><a href="/fr/collection-ete-08/114-------" title="Yumi">Yumi</a><br /></div>
 
                       <div class="case_ann" id="caY"></div>
                     </div>
                     <div class="bloc_marque" id="bmZ">
                       <div class="case_lettre" id="clZ">Z</div>
                       <div class="case_marques" id="lmZ"><a href="/fr/collection-ete-08/12-------" title="Zin">Zin</a><br /><a href="/fr/collection-ete-08/31-------" title="Zoe la fée">Zoe la fée</a><br /><a href="/fr/ancienne-collection/39-------" title="Zoe Tee's">Zoe Tee's</a><br /></div>
                       <div class="case_ann" id="caZ"></div>
                     </div>
 
                     </div>
</div>

Si ça se trouve, en appelant le CSS depuis un fichier externe au lieu de directement dans la page ça pourrait marcher... A voir, je vous tiens au courant...

**bredelet** · 16/07/2008, 15h53

En fait le Flash il est derriere... Alors quand je fais un clic droit dans la thickbox ca passe a travers et je vois les options Flash dans le menu contextuel.

Sinon pour ton probleme, est-ce que c'est permis ca de mettre un bloc <style> en plein milieu d'une page? Tu peux pas ajouter tes classes a la feuille de style de la page d'accueil?

**will89** · 17/07/2008, 10h24

Effectivement bredelet, j'ai mis les styles de mes murs dans une page CSS que j'appelle dans l'entête de ma page d'accueil et c'est tout bon...

Farpait j'ai envie de dire...

CSS non chargé dans Thickbox sous Safari

CSS

Discussions similaires

Partager

Partager