IE 6 et repeat-y

Bonjour à tous,
je voudrais réaliser un cadre arrondi avec 8 images. 4 pour les coins et 4 sur le cotés.
Mon soucis est que sur les 8 images, seul 6 s'affichent normalement sur internet explorer 6. Le div affichant l'image de droite et celle de gauche ne prenne pas en compte le repeat-y sur ie 6.
Pourtant si je test la méthode sur d'autre navigateur celle-ci marche parfaitement, même pour ie 5.5 et 5.1.

Voilà mon code CSS :

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
 
.relsample { 
      position: relative; 
 }
 
.relsample 
.top_left, 
.relsample 
.top_right, 
.relsample 
.bottom_left, 
.relsample 
.bottom_right { 
     height: 25px; 
     width: 25px; 
     background-repeat: no-repeat; 
     position: absolute; 
 }
 
.relsample .top_left { 
     top: 0px; 
     left: 0px; 
     background-image: url("images/Dtheme/cornergh.gif"); z-index: 0; 
 }
 
.relsample .top_right { 
     top: 0px; 
     right: 0px; 
     background-image: url("images/Dtheme/cornerdh.gif"); z-index: 1; 
 }
 
.relsample .bottom_left { 
     bottom: 0px; 
     left: 0px; 
     background-image: url("images/Dtheme/cornergb.gif"); z-index: 2;
 }
 
.relsample .bottom_right { 
     bottom: 0px; 
     right: 0px; 
     background-image: url("images/Dtheme/cornerdb.gif"); z-index: 3;
     background-position: bottom;
}
 
.relsample .content { 
     position: relative; 
     padding: 12px; z-index: 4; 
 }
 
.top { 
     position: absolute;
     right: 0px;
     top: 0px;
     width: 100%;
     height:4px; 
     background-image: url("images/Dtheme/barho.gif");
     background-repeat: repeat-x;
 }
 
.bottom {
     position: absolute; 
     bottom: 0%;
     width: 100%;
     height: 4px;
     left: 0px;
     background-image: url("images/Dtheme/barho.gif");
     background-position: bottom;
     background-repeat: repeat-x;
 }
 
.left { 
     position: absolute;
     width: 4px;
     height: 100%; 
     left: 0px;
     background-image: url("images/Dtheme/barvert.gif");
     background-repeat: repeat-y;
 }
 
.right { 
     position: absolute;
     right: 0%;
     width: 4px;
     height: 100%;
     background-image: url("images/Dtheme/barvert.gif");
     background-repeat: repeat-y;
     background-position: right;
 }

Voila la partie HTML du code ( en italique la partie optionnel )

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="relsample">
	   <div class="top">
                <div align=center>
                   LE TITRE DANS LA PARTIE HAUTE ARRONDIE</div>
           </div>
	   <div class="left"></div>
	   <div class="right"></div>
	   <div class="top_left"></div>
	   <div class="top_right"></div>
	        <div class="contentu">
	            LE CONTENUE
	        </div>
	   <div class="bottom"></div>
	   <div class="bottom_left"></div>
	   <div class="bottom_right"></div>
</div>

J'espère que vous me trouverez une solution, car la j'avoue, je sèche totalement.
Merci d'avance pour vos réponse et bonne journée à tous

Salut,

Essaye en rajoutant line-height: 100% pour .left et .right

salut,
Merci de ta réponse, je viens à l'instant d'essayer mais cela ne marche pas.
Erf je ne comprend pas ce bug qui n'apparait que sur internet explorer 6

Tu aurais un lien de cette page afin que je regarde stp ?