[Résolu]Problêmes d'affichage avec IE..

Bonjour à tous!
Je viens ici chercher de l'aide car je suis en ce moment en train de coder mon site et j'ai un petit problême d'affichage avec IE..
Voyez vous mêmes: ici
Ca marche parfaitement sous Firefox mais pas sous IE.

Je vous donne le css: (J'ai enlever quelques trucs inutiles)

body
{
   width: 100%;
   margin: auto;
   background-color: #FFFFFF;
   font-family: "Trebuchet MS";
}

/* Header */

#header
{  
   top: 0px;
   width: 100%;
   min-width: 800px;
   height: 245px;
}

.header-titre
{  
   position: absolute;
   top: 20px;
   width: 100%;
   height: 175px;
   background-image: url("header-titre.gif");
   background-position: center;
   background-repeat: no-repeat;
   z-index: 4;
}

.header-left
{ 
   position: absolute;
   top: 20px;
   left: 0px;
   width: 400px;
   height: 250px;  
   background-image: url("header-left.png"); 
   background-repeat: no-repeat; 
   z-index: 3;
}

.header-center
{ 
   position: absolute;
   top: 20px;
   width: 100%;
   height: 250px;  
   background-image: url("header-center.png"); 
   background-repeat: repeat-x; 
   z-index: 1;
}

.header-right
{ 
   position: absolute;
   top: 20px;
   right: 0px;
   width: 399px;
   height: 250px;  
   background-image: url("header-right.png"); 
   background-repeat: no-repeat; 
   z-index: 3;
}


/* Corps */

#corps
{
   position: relative;
   background-color: #FCFED6;
}

.corps-contenu
{
   position: relative;
   margin-left: 230px;
   margin-right: 50px;
   z-index: 4;
}


/* Cotés */

#cote-gauche         /* C'est Ici que ca coince sous IE.. */
{
   position: absolute;
   top: 0px;
   left: 0px;
   float: left;
   width: 50px;
   height: 100%;
   background-image: url(coté-gauche.png);
   background-repeat: repeat-y;
   z-index: 2;
}

#cote-droit
{
   position: absolute;
   top: 0px;
   right: 0px;
   float: right;
   width: 50px;
   height: 100%;
   background-image: url(coté-droit.png);
   background-repeat: repeat-y;
   z-index: 2;
}                               /* Jusque là */


/* Footer */

#bas
{  
   position: relative;
   bottom: 0px;
   width: 100%;
   min-width: 800px;
   height: 150px;
}

.bas-left
{ 
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 399px;
   height: 250px;  
   background-image: url("bas-left.png"); 
   background-repeat: no-repeat; 
   z-index: 2;
}

.bas-center
{ 
   position: absolute;
   bottom: 0px;
   width: 100%;
   height: 250px;  
   background-image: url("bas-center.png"); 
   background-repeat: repeat-x; 
   z-index: 1;
}

.bas-right
{ 
   position: absolute;
   bottom: 0px;
   right: 0px;
   width: 400px;
   height: 250px;  
   background-image: url("bas-right.png"); 
   background-repeat: no-repeat; 
   z-index: 2;
}

#footer
{
   position: relative;
   clear: both;
}

Voilà, vous savez tout!
Donc si quelqu'un à une idée..
Merci d'avance.
Modifié par Kels (06 Oct 2005 - 20:06)

Personne ne peut m'aider?
(j'aime pas faire de up donc j'apporte quelques infos suplémentaire..)
J'ai donc remarquer que le cote-gauche, se positionait avec le bloc contenu-texte au lieu de se mettre avec le corps..
Un bug donc car il est bien embriqué avec le corps.
Si quelqu'un sait pourquoi IE réagit comme ca ou/et que encore mieux il a une solution, merci de m'aider.

bonjour,
je remarque des accents dans le nom des images , donc tu as la une premiere source de probleme, ensuite je vois que les images en questions sont des png , IE est incapable de faire le rendu d'opacité de ces images ,peut-etre une deuxieme source de soucis ?

a plus

Bonjour,
En fait je n'utilise pas de png transparente donc pas de problême de ce coté là.
Pour ce qui est des accents j'ai changer les noms des images mais ca n'a rien changé.

Par contre j'ai ajouté un height: 100%; au body, ce qui prolonge un peu les images "cote" sans pour autant aller jusque au bout..

ps: j'ai mis le fond blanc pour se rendre mieux compte de ce que ca fait.

à voir ici

rebonjour,
j'ai modifié ton css,
ajoute la hauteur 100% par defaut a html et body, pour corps et ses element j'ai passer les position absolute en static (pour IE seulement).
il reste cependant des defaut d'affichage, en retrecissant ta page en largeur, en desous de 800px sous FF, et sous IE il arrive un moment ou les bordures ne sont plus assez longues.
voila donc une petite modif du css pour afficher les bordures aussi sous IE.

(J'ai du mal a me faire au position absolute et relative, désolé)

html,body {height:100%;}



body
{
   width: 100%;
   margin: auto;
   background-color: #FFFFFF;
   font-family: "Trebuchet MS";
}

p
{
   font-family: "arial";
   font-size : 90%;
   color: #3D3D3D;
   text-align: left;
}

strong
{
   color: red;
}

h1, h2, h3, h4, h5, h6
{
   color: #ABE00A;
   text-align: left;
}

/* Header */

#header
{  
   top: 0px;
   width: 100%;
   min-width: 800px;
   height: 245px;
}

.header-titre
{  
   position: absolute;
   top: 20px;
   width: 100%;
   height: 175px;
   background-image: url("http://kelsakeyworld.free.fr/test2/header-titre.gif");
   background-position: center;
   background-repeat: no-repeat;
   z-index: 4;
}

.header-left
{ 
   position: absolute;
   top: 20px;
   left: 0px;
   width: 400px;
   height: 250px;  
   background-image: url("http://kelsakeyworld.free.fr/test2/header-left.png"); 
   background-repeat: no-repeat; 
   z-index: 3;
}

.header-center
{ 
   position: absolute;
   top: 20px;
   width: 100%;
   height: 250px;  
   background-image: url("http://kelsakeyworld.free.fr/test2/header-center.png"); 
   background-repeat: repeat-x; 
   z-index: 1;
}

.header-right
{ 
   position: absolute;
   top: 20px;
   right: 0px;
   width: 399px;
   height: 250px;  
   background-image: url("http://kelsakeyworld.free.fr/test2/header-right.png"); 
   background-repeat: no-repeat; 
   z-index: 3;
}




/* Corps */

#corps
{

 position: relative!important;
 position: static;
}

.corps-contenu
{
 position: relative!important;
 position: static;
   margin-left: 230px;
   margin-right: 50px;

}


/* Cotes */

#cote-gauche         /* C'est Ici que ca coince sous IE.. */
{
 position: absolute!important;
 position: static;

   top: 0px;
   left: 0px;
   float: left;
   width: 50px;
   height: 100%;
   background-image: url(http://kelsakeyworld.free.fr/test2/cote-gauche.png);
   background-repeat: repeat-y;


}

#cote-droit
{
 position: absolute!important;
 position: static;

   top: 0px;
   right: 0px;
   float: right;
   width: 50px;
   height: 100%;
   background-image: url(http://kelsakeyworld.free.fr/test2/cote-droit.png);
   background-repeat: repeat-y;

}                               /* Jusque la */


/* Footer */

#bas
{  
   position: relative;
   bottom: 0px;
   width: 100%;
   min-width: 800px;
   height: 150px;
}

.bas-left
{ 
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 399px;
   height: 250px;  
   background-image: url("http://kelsakeyworld.free.fr/test2/bas-left.png"); 
   background-repeat: no-repeat; 
   z-index: 2;
}

.bas-center
{ 
   position: absolute;
   bottom: 0px;
   width: 100%;
   height: 250px;  
   background-image: url("http://kelsakeyworld.free.fr/test2/bas-center.png"); 
   background-repeat: repeat-x; 
   z-index: 1;
}

.bas-right
{ 
   position: absolute;
   bottom: 0px;
   right: 0px;
   width: 400px;
   height: 250px;  
   background-image: url("http://kelsakeyworld.free.fr/test2/bas-right.png"); 
   background-repeat: no-repeat; 
   z-index: 2;
}

#footer
{
   position: relative;
   clear: both;
}

.footer-contenu
{
   font-weight: bold;
   color: #B0B0B0;
   text-align: center;
   z-index: 4;
}

j'ai fait usage du hack "!important" pour positionner et passer de absolute a static les bordures.

ce resultat, est a mis chemin vers l'effet recherché, vu qu'il n'est pas 100% extensible en hauteur pour les bordures sous IE.

Je te remercie d'avoir passé du temps sur ce bout de code!
Par contre, je n'obtient pas de résultat.
Je ne vois plus du tout les bordures.. voir ici.
Il est tard aussi, je retenterai des trucs demain.

Je me demande si je ne vais pas devoir faire de non-extensible..
C'est dommage mais bon ca fait un bout de temps que je planche là dessus.
En tout cas, merci à toi gcyrillus!
Si il y en à d'autres qui ont des idées, n'hésitez pas.

Bonjour,

gcyrillus a écrit :

/* Cotes */

#cote-gauche /* C'est Ici que ca coince sous IE.. */
{
position: absolute!important;
position: static;

top: 0px;
left: 0px;
float: left;
...

Un boîte CSS ne peut pas être simultanément en position absolue et flottante, même dans IE. Le positionnement n'aura aucun effet ici.

Une position statique tu veux dire?
Parce qu'avec une position absolute ca marche dans FF.

bonjour,
hmm désolé, j'ai du probablement modifier a partir d'une autre page !?
dans le css j'indique des ID pour les cotés et dans ton html, il y a des class d'indiquées, donc le css est appliqué a rien du tout .
(#cote-droit et <div class="cote-droit" > sont different)

sinon pour rendre ton design fluide:
Essai plutot de reprend l'idée des coins arrondies avec images:
un conteneur principal, (avec la bordure de droite en background)
1 div (de la taille des hauteurs des images, pour de petite hauteur un overflow:hidden; peut-etre necessaire pour IE) pour ta bordure haute dans lequel tu place 2 autres div (ou image)en float a droite et a gauche avec respectivement les coins droite et gauche.

puis le contenu avec une marge a droite pour laisser apparaitre la bordure droite en fond du conteneur,
et une marge a gauche de zero, tu lui applique la bordure gauche en fond..

et pour le bas tu repete le principe du haut.

ça devrait te permettre de faire un code plus simple.

a plus

edit: remarque que la marge pour le contenu n'est pas necessaire si tu met la couleur de fond dans le conteneur principal.

re edit: "laurent denis", désolé, je me suis seulement arreter sur le code existant , mauvaise demarche en effet
Modifié par gcyrillus (04 Oct 2005 - 14:45)

Effectivement je n'avais pas vu la concordance id et class..
Par contre je crois bien que j'ai réussi!! voir ici
Ce qui faisait bugger IE, c'était le margin-left, je l'ai remplacer par un padding-left et la ca marche presque impec, j'ai juste un petit problême de z-index pas bien difficile à régler.

Je vous remercie tous pour l'aide que vous m'avez apporté.
A+

(petit problême de bande passante donc peut être que certaines images ne vont pas s'afficher mais ca marche en local..)
Modifié par Kels (04 Oct 2005 - 19:54)

Rebonjour à tous,
J'ai un autre problême, qui m'a l'air moins compliqué cette fois.
Les bordures (cote-left et cote-right) ne se terminent pas sous IE.. voir ici
J'ai testé quelques trucs sans succès..
Donc si quelqu'un a une idée. feuille de style

J'ai tout de même essayé de ruser (si on peut dire ca comme ca) augmentant le % du height. voir ici
Par contre avec ce code c'est sous FF que ca ne marche pas, la page fait la hauteur donnée.
Je sais que cette 2ème solution est un peu tordue mais je n'ai rien trouvé d'autre de vraiment concluant, c'est donc pour ca que je viens chercher de l'aide. feuille de style

Donc voila, si quelqu'un a une petite idée..
Merci d'avance.

a petit pas, en ne remettant pas le code en question, je dirais d'ajouter un hack pour donner une hauteur de bordures moins importantes sous IE, genre height: 100%!important; height:75%;

sinon l'histoire des cadre arrondis,fixe ou extensible je crois que c'est la : http://www.alsacreations.com/articles/cadre/
a plus

Je n'avai pas compris le sens du !important..
J'ai réussi, en combinant mes 2 possibilités! Merci à toi gcyrillus de m'avoir mis sur la voie une nouvelle fois.
Pour ce qui est du !important, Peut tu m'expliquer comment ca marche?
Si j'ai bien compris, Firefox considère le !important et IE l'ignore, c'est ca?

Merci encore!

oui, c'est comme ça que je comprend aussi et utilise ce "hack",
seul IE ne comprend pas le !important, et ecrase donc cette valeur avec la valeur suivante qu'il rencontre.
(jette un oeil quand même au dernier lien que j'ai laisser, tu devrais avoir moins de difficulté a construire ta page fluide en largeur et hauteur, et facilement regardable dans les differents navigateurs)
a plus et bon dev