Problème de div autoextensible sous IE

Bonjour, j'ai un souci. J'ai suivi le tuto pour les cadres arrondis et j'ai adapté à ma manière, et afin d'avoir mes images comme je veux j'ai fait 10 cadres.

Le cadre principal qui contient
_ le cadre qui contient le coin haut gauche
_ le cadre qui contient le trait du haut
_ le cadre qui contient le coin haut droit
_ le cadre qui contient le trait de gauche
_ le cadre qui contient le contenu
_ le cadre qui contient le trait de droite
_ le cadre qui contient le coin bas gauche
_ le cadre qui contient le trait du bas
_ le cadre qui contient le coin bas de droite

Le cadre contenu et le cadre global ont les mêmes dimensions, tous les coins et les traits ont des marges négatives.

Sous Firefox ça marche sans problème mais sous IE ça se complique...
En effet le trait gauche et trait droit n'ont pas la bonne dimension puisqu'ils ont la taille d'une ligne de texte... au lieu de la taille de l'ensemble du texte.

.cadre{
  background-repeat : repeat;
  float : left;
  height : auto;
  margin-top : 25px;
  margin-bottom	: 50px;
}

.cadre .bas{
  background-image : url("../image/cadrebas.png");
  bottom : -25px;
  height : 25px;
  left	: 0px;
  position : absolute;
  text-align : center;
  width	: 100%;
}

.cadre .basdroit{
  background-image : url("../image/cadrecoinbd.png");
  bottom : -25px;
  height : 25px;
  position : absolute;
  right	: -22px;
  width	: 22px;
}

.cadre .basgauche{
  background-image : url("../image/cadrecoinbg.png");
  bottom : -25px;
  height : 25px;
  position : absolute;
  left	: -22px;
  width	: 22px;
}

.cadre .centre{
  background-image : url("../image/cadrecentre.png");
  height : auto;
  margin : 0;
  overflow : auto;
  width	: 100%;
}

.cadre .droit{
  background-image : url("../image/cadredroit.png");
  height : 100%;
  position : absolute;
  right	: -22px;
  top : 0px;
  width	: 22px;
}

.cadre .gauche{
  background-image : url("../image/cadregauche.png");
  height : 100%;
  left : -22px;
  position : absolute;
  top : 0px;
  width : 22px;
}

.cadre .haut{
  background-image : url("../image/cadrehaut.png");
  color	: #00A000;
  font-size : 1.1em;
  height : 22px;
  left : 0px;
  padding-top : 3px;
  position : absolute;
  text-align : center;
  top : -25px;
  width	: 100%;
}

.cadre .hautdroit{
  background-image : url("../image/cadrecoinhd.png");
  height : 25px;
  position : absolute;
  right	: -22px;
  top : -25px;
  width	: 23px;
}

.cadre .hautgauche{
  background-image : url("../image/cadrecoinhg.png");
  height : 25px;
  left : -22px;
  position : absolute;
  top : -25px;
  width : 22px;
}

Il n'y avait pas moyen de simplifier ?
Ton bloc est-il en largeur fixe ou en largeur fluide ?

Il est en largeur fixe mais la largeur est différente suivant les endroits, j'utilise une autre classe pour qualifier mes div (elle indique la largeur).

C'est à dire que sur l'accueil la largeur sera de 25% par exemple, pour les contact de 50%, pour l'agend de 40%, etc...

Cela dit j'ai k'impression que le problème vient du

height : 100%

, si je le met à 100px le trait s'affiche bien sur une hauteur de 100px mais impossible (pour moi pour le moment) de le rendre extensible automatiquement

Dewe a écrit :
Cela dit j'ai k'impression que le problème vient du

height : 100%

, si je le met à 100px le trait s'affiche bien sur une hauteur de 100px mais impossible (pour moi pour le moment) de le rendre extensible automatiquement

Un height: x%; ne sera pris en compte que si l'élément parent est dimmensionné... ce qui ne semble pas être le cas ici.

Pour un bloc en largeur fixe, il y a dix fois plus simple que ces bidouillages étranges :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

J'utilise ma technique car en fait mon image n'est pas fixe en largeur puisqu'elle dépend de la résolution de l'écran (c'est à dire que mo cadre à 25% n'aura pas la même taille en 800x600 qu'en 1600x1200). Bien qu'il doit quand même exister plus simple pour les cadre à largeur et hauteur variable .

En fait pour le height la classe parent de gauche est cadre et height est défini en auto. Maintenant comme tu le soulignes j'ai l'impression que IE ne l'entend pas de cette oreille :<<
Modifié par Dewe (09 Oct 2006 - 22:44)

Dewe a écrit :
En fait pour le height la classe parent de gauche est cadre et height est défini en auto. Maintenant comme tu le soulignes j'ai l'impression que IE ne l'entend pas de cette oreille :<<

Heu... ben un height: auto; c'est comme pas de height du tout, donc il n'y a pas que IE qui n'y comprendra rien : tous les navigateurs t'enverront balader, normalement.

Dewe a écrit :
J'utilise ma technique car en fait mon image n'est pas fixe en largeur puisqu'elle dépend de la résolution de l'écran (c'est à dire que mo cadre à 25% n'aura pas la même taille en 800x600 qu'en 1600x1200). Bien qu'il doit quand même exister plus simple pour les cadre à largeur et hauteur variable .

Bon, donc ton bloc n'est pas en largeur fixe mais en largeur fluide. Faut savoir, hein !

Pour un bloc en largeur fluide, c'est effectivement plus compliqué.
Ce sujet en parle et recense des solutions possibles : design fluide et 4 coins ou bordures graphiques.

Je suis un peu boulet des fois (le coup du height : auto par défaut^^) qui pourtant marche pour FF, je t'ai répondu pour la largeur fixe un peu rapidement, merci je vais éplucher ton lien

Résolu, en fait il suffit de préciser un height pour mon cadre global (peu importe la taille), je pense que le fait de repréciser auto pour le cadre central va adapter le cadre automatiquement en hauteur mais le 100% de mes cadres du coté vont agrandir automatiquement mes bordures correctement.

Merci pour ton aide et tes questions qui m'ont aiguiller
Modifié par Dewe (10 Oct 2006 - 19:10)