Discussion :

[Joshfluitsma]

Bonjour,

Je suis en train de bosser sur une page où j'ai des images en fond de div.
Le mieux c'est que je vous montre directement la page:
http://www.decitre.fr/aide/passer-commande

Il s'agit des 5 images correspondant aux 5 étapes de la commande.
J'étais plutôt content avec la page mais c'est jusqu'à ce que j'essaye d'afficher la page avec IE et que l'image de fond de div de l'étape 5 se copie en dessous et s'affiche en double.
Je n'ai vraiment aucune idée d'où vient ce problème sachant que tout s'affiche correctement sur tous les autres navigateurs...

Pouvez-vous peut-être m'aider pour trouver l'origine de ce problème?

Merci d'avance!

[Gaetan_]

Rajoute à la propriété de ton css :

Code :

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

background-repeat: repeat-x;

[Joshfluitsma]

Rajoute à la propriété de ton css :

Code :

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

background-repeat: repeat-x;

Alors j'avais déjà essayé avec "background-repeat: no-repeat;" mais j'ai essayé avec repeat-x du coup, ça ne change rien...
Quand j'y pense, le background-image ne devrait pas influencer sur la div, pourtant la div qui se copie en bas décale tout le texte!

[Meloooo]

Salut,
Je pense que le

Code :

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

1
2
 
background-repeat:repeat-x

n'est pas nécessaire, au contraire l'image ne doit pas se répéter...
Essayes de mettre tes width en px..

[Joshfluitsma]

Essayes de mettre tes width en px..

Ce que je comprend pas c'est que la div marche bien pourtant, la 5ème s'affiche bien à côté des autres mais elle se duplique d'une manière ou d'une autre, ce n'est pas la largeur des divs qui pose problème...

[Meloooo]

J'ai remplacé ta 5ème étape avec l'étape4 et j'ai remplacé les images, et ca à l'air de fonctionner :

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
 
<div class="content">
<h1><span>Comment passer commande ?</span></h1>
<p>Pour passer commande sur internet, il suffit de :</p>
</div>
<div style="height: 5px;"></div>
<div style="width: 20%; height: 120px; float: left; background-image: url(http://static.decitre.fr/media/wysiwyg/etape_01);background-repeat:no-repeat;">
<div style="display: table; height: 120px; width: 157px; _position: relative; overflow: hidden;"> 
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"> 
<p style=" _position: relative; _top: -50%; margin: 0px 2px 0px 18px; text-align: center;">
<font face="Georgia" size="2px"><i><i>
<a href="#" onclick="toggleDisplay1();">ajouter un article au panier</a>
</i></font>
</p>
</div>
</div>
</div>
<div style="width: 20%; height: 120px; float: left; background-image: url(http://static.decitre.fr/media/wysiwyg/etape_02);background-repeat:no-repeat;">
<div style="display: table; height: 120px; width: 157px; _position: relative; overflow: hidden;"> 
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"> 
<p style=" _position: relative; _top: -50%; margin: 0px 2px 0px 18px; text-align: center;">
<font face="Georgia" size="2px"><i>
<a href="#" onclick="toggleDisplay2();">valider le panier</a>
</i></font>
</p>
</div>
</div>
</div>
<div style="width: 20%; height: 120px; float: left; background-image: url(http://static.decitre.fr/media/wysiwyg/etape_03);background-repeat:no-repeat;">
<div style="display: table; height: 120px; width: 157px; _position: relative; overflow: hidden;"> 
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"> 
<p style=" _position: relative; _top: -50%; margin: 0px 2px 0px 18px; text-align: center;">
<font face="Georgia" size="2px"><i>
<a href="#" onclick="toggleDisplay3();">s'identifier</a>
</i></font>
</p>
</div>
</div>
</div>
<div style="width: 20%; height: 120px; float: left; background-image: url(http://static.decitre.fr/media/wysiwyg/etape_04);background-repeat:no-repeat;">
<div style="display: table; height: 120px; width: 157px; _position: relative; overflow: hidden;"> 
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"> 
<p style=" _position: relative; _top: -50%; margin: 0px 2px 0px 18px; text-align: center;">
<font face="Georgia" size="2px"><i>
<a href="#" onclick="toggleDisplay4();">choisir une adresse de livraison</a>
</i></font>
</p>
</div>
</div>
</div>
<div style="width: 20%; height: 120px; float: left; background-image: url(http://static.decitre.fr/media/wysiwyg/etape_05);background-repeat:no-repeat;">
<div style="display: table; height: 120px; width: 157px; _position: relative; overflow: hidden;"> 
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"> 
<p style=" _position: relative; _top: -50%; margin: 0px 2px 0px 18px; text-align: center;">
<font face="Georgia" size="2px"><i>
<a href="#" onclick="toggleDisplay5();">choisir un mode de paiement et payer</a>
</i></font>
</p>
</div>
</div>
</div>

Pourquoi mettre des _ devant tes propriétés CSS ?

[Joshfluitsma]

Pourquoi mettre des _ devant tes propriétés CSS ?

Faudrait demander ça à la personne qui a écrit l'article d'où j'ai copié les propriétés dont j'avais besoin..

Ceci dit, ça ne change rien, si?
Dans tous les cas je les vire pour être sûr..

[Joshfluitsma]

En tout cas ça marche maintenant!
En remplaçant l'étape 5 par l'étape 4 il me semble avoir aperçu un </li> de trop, c'était surement ça le problème.

Merci beaucoup Meloooo