Background-image sur Internet Explorer

Version imprimable

19/06/2012, 12h25
Joshfluitsma

Background-image sur Internet Explorer

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!
19/06/2012, 14h00
Gaetan_

Rajoute à la propriété de ton css :

Code:

background-repeat: repeat-x;
19/06/2012, 14h24
Joshfluitsma

Citation:

Envoyé par Gaetan_

Rajoute à la propriété de ton css :

Code:

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!
19/06/2012, 15h21
Meloooo
Salut,
Je pense que le
Code:

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..
19/06/2012, 16h11
Joshfluitsma

Citation:

Envoyé par Meloooo

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

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

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
 
<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 ?

19/06/2012, 16h40
Joshfluitsma

Citation:

Envoyé par Meloooo

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..
19/06/2012, 16h46
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 ;)