28172 sujets

CSS et mise en forme, CSS3

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 [I][B]repeat-y[/B][/I] 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 :

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

<div class="relsample">
	   <div class="top">
               [I] <div align=center>[/I]
                   LE TITRE DANS LA PARTIE HAUTE ARRONDIE[I]</div>[/I]
           </div>
	   <div class="left"></div>
	   <div class="right"></div>
	   <div class="top_left"></div>
	   <div class="top_right"></div>
	        [I]<div class="contentu">[/I]
	            LE CONTENUE
	        [I]</div>[/I]
	   <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