Internet explorer fait un peu ce qu'il veut de l'affichage, non ?

Bonjour,

je vous invite a aller voir l'adresse http://www.rosegrenouille.com, avec IE et avec FF par exemple. Sous FF, evidemment ( on devrait plutot dire, comme d'habitude à force.....) aucun problème.
Sous IE, tentez de scroller verticalement et voila que l'image et même la couleur du background de la partie contenant la photo du clavier se mettent a défiler ou plutot a s'effacer suivant un ligne qui n'a ni queue ni tête !

Si vous regardez les autres pages, le problème est le même......dès fois il veut bien dès fois il veut pas.

J'ai déjà fait des test en enlevant les images, en jouant sur le float pour les réintégrer dans le flux, j'ai réfléchi à la notion de layout spécifique à IE, et j'ai un peu joué avec overflow pour le parent, mais sans résultat.

Avez vous déjà vu cà et comment l'avez vous réglé ?

Code du CSS:

* CSS Document */

/* balises générales*/

* {
margin:0;
padding:0;}

html {
height:100%;
}

body {
background-color:white;
background-image:url(IMAGES/body.png);
background-position: top left;
background-repeat:repeat;
background-attachment:fixed;
font-family:Verdana;
font-weight:normal;
font-size:0.8em;
height:100%;
padding:2em 0;
}

a {
color:black;
}

a:hover {
color:#EC107C;
}

acronym {
cursor:help;
border-bottom:1px dotted #EC107C;
}

kbd {
border-bottom:3px solid #ec107c;
font-size:1.3em;
font-weight:bold;
}
code{
color:#666;
border-left:2px solid #666;
border-right:2px solid#666;
font-size:1.2em;
font-weight:bold;
padding:0 0.2em;
}

h1{    /*titre de la page*/
color:#EC107C;
font-size:1.2em;
padding:0.5em 0 0 0;
width:auto;
text-align:right;
line-height:1.2em;
clear:right;
}

h2{   /*gros titre de niveau 1 dans les pages de contenu */
font-size:1.5em;
margin-bottom:1.5em;
text-decoration:underline;
padding-left:42px;
background-image:url(IMAGES/titreh2.png);
background-position:left;
background-repeat:no-repeat;
line-height:38px;
font-weight:bold;
}
h2:first-letter{
color:#ec107c;
}

h3{
color:#EC107C;
padding:0.5em;
margin-bottom:1em;
}

ul {
list-style-type:none;
width:100%;
}

p {
margin-bottom:0.8em;
}

table {
text-align:center;
border:1px solid black;
margin-top:2em;
border-collapse:collapse;
}

th {
background-color:#EC107C;
line-height:0.8em;
color:#fff;
padding:0.8em;
border:1px solid black;
}
td {
padding:0.3em;
border:1px solid black;
}

blockquote {
margin:1em 0;
color:#666;
font-style:italic;
font-weight:bold;
text-align:center;
font-size:1em;
}

q {
font-style:italic;
color:#666;
margin:0 1em;
font-weight:bold;
}

hr{
margin:2em 0;
}


/* Éléments de type #ID */

#conteneur {
margin-left:auto;
margin-right:auto;
width:90%;
background-color:white;
margin-bottom:2em;
position:relative;
}

#header {
background:#f2f0dd url(IMAGES/header.gif) top left no-repeat;
height:212px;
margin-bottom:0.5em;
}

#slogan {
position:absolute;
top: 180px;
right:5px;
}

#menu{
}

#menuaccessibilite{
padding:1em;
text-align:right;
}

#centre{
padding:20px;
padding-top:25px;
text-align:justify;
border:2px solid #d0d1d3;
margin-top:0.5em;
}


#footer {
background:#D0D1D3 url(IMAGES/footer.gif) bottom right no-repeat;
height:40px;
clear:both;
}
#valid{
padding:1em;
text-align:left;
}

#newsletter {
margin:0 10px;
}

#intro {
background:#f2f0dd url(IMAGES/info.GIF) left no-repeat;
border:1px solid #ccc;
padding:0.5em 0.5em 0.5em 70px;
margin-bottom:1em;
}

/* Apparence des différents liens*/

.liencontrastant:hover {
color:white;
}

/* fin de l'Apparence des liens*/




/* Configuration de l'aspect du menu principal*/

.menu li {
float:right;
}

.menu a {
display:block;
line-height:2.2em;
width:8em;
background-color:#d0d1d3;
margin:0 0 0.5em 0.5em ;
text-align:center;
font-size:1.2em;
text-decoration:none;
font-weight:bold;
border:2px solid #666;
}

.menu a:hover {
background-color:white;
border:2px solid #EC107C;
color:black;
}

body#page1 a#menu1,
body#page2 a#menu2,
body#page3 a#menu3,
body#page4 a#menu4,
body#page5 a#menu5,
body#page6 a#menu6 {
background-color:black;
border:2px solid black;
color:#EC107C;
}

.textemisenvaleur {
color:#EC107C;
font-weight:bold;
}
.souligne {
text-decoration:underline
}

.bouton {
background-color:#d0d1d3;
border:2px solid #666;
padding:2px;
}

.bouton:hover {
background-color:white;
border:2px solid #EC107C;
color:black;
}
.bouton:active{
background-color:black;
border:2px solid black;
color:#EC107C;
}
p.lettrine:first-letter{
font-size:large;
font-weight:bold;
color:#EC107C;
}

.engagement {
font-size:1.1em;
font-variant:small-caps;
padding:0.5em;
line-height:1em;
font-weight:bold;
margin:2em 0;
border:2px solid #EC107C;
clear:both;
}
.information {
color:#666;
font-style:italic;
}
.titreinfo{
font-weight:bold;
color:#ec107c;
font-variant:small-caps;
font-size:1.2em;
}

.imagedroite{
float:right;
margin:1em;
}

.imagegauche{
float:left;
margin:1em;
}
.soustitre {    /*sous titre sous le titre de la page*/
color:#333;
font-size:0.8em;
padding:0 0 0.5em 1em;
width:auto;
text-align:right;
line-height:1.2em;
}
.encart{
border:1px solid #ccc;
padding:0.5em;
margin-bottom:1em;
}
.telephone{
background:url(images/telephone.png) bottom right no-repeat;
}
.poste{
background:url(images/poste.png) bottom right no-repeat;
}
.mail{
background:url(images/thunderbird.png) bottom right no-repeat;
}
.list {
list-style-type:disc;
line-height:1.5em;
margin:2em 0;
}
.list li{
margin-left:2em;
margin-right:2em;
}
.savoirplus {
border:1px solid #EC107C;
border-left:6px solid #EC107C;
padding:0.5em;
margin:1em 0;
background-color:#F2F0DD;
width:30%;
}

pour le HTML je vous laisse voir ca en ligne avce votre click droit, bien plus rapide.....

Merci !!!!!

Aucune idée de ce que ça peut être…
Par contre, c'est hébergé sur quel type de serveur ? Parce qu'en accédant aux images par /IMAGES/info.GIF ou par /images/info.gif, on a le même résultat. Mais je doute que ça ait un rapport…

Le truc, c'est que je n'ai pas bien compris à quel élément était lié ce vide blanc qui apparaît… ça a l'air assez aléatoire en hauteur.

Salut

La réaction est très particulière elle est attachée au hovers ?du menu et au déplacement de l’ascenseur ?
Malheureusement je ne vois pas l’origine

Tiens nous informés

A+
Modifié par gege71 (07 Jun 2006 - 01:29)

c'est clair que je vais faire un suivi la dessus parce que c'est quelque chose que je n'ai jamais vu de manière similaire et que le code semble propre ( du moins on veille a ca, des fois au grand depit de la productivite ).

Je vous dirais ca si je trouve mais en attendant le post reste ouvert et je reflechis en meme temps !

Merci de votre contribution.

Si on donne le layout avec un zoom:1; ca corrige (si ont peut dire ca) le probleme


A+

Bon jai fini par trouver en enlevant les elements un par un pour isoler le fautif.

voila le bug isolé, il s'agit du position:relative dans le #conteneur servant a donner un point de reference au #slogan qui se compose d'une image sur fond transparent que je voulais positionner en absolu .

#conteneur {

margin-left:auto;

margin-right:auto;

width:90%;

background-color:white;

margin-bottom:2em;

position:relative;

}



#header {

background:#f2f0dd url(IMAGES/header.gif) top left no-repeat;

height:212px;

margin-bottom:0.5em;

}



#slogan {

position:absolute;

top: 180px;

right:5px;

}

on oublie le relative pour ne garder que la absolute avec des valeurs differentes et ca marche tout aussi bien. Par contre , pourquoi IE adopte ce comportement la.............la je sèches , avis aux grands gourous, je suis preneur de l'explication

merci gege71 pour ton truc , ca me semble etre une bonne maniere de contourner mais ca n'explique pas le bug en soi .

pour visualiser la page non corrigee contenant le bug d'affichage allez a cette adresse
http://www.rosegrenouille.com/ancien.php
Modifié par RoseGrenouille (07 Jun 2006 - 03:50)

RoseGrenouille a écrit :

............la je sèches , avis aux grands gourous, je suis preneur de l'explication

Si en plus de trouver les solutions au bug de IE, il faut en déterminer l’origine, on n’a pas fini de galérer

RoseGrenouille a écrit :

merci gege71 pour ton truc , ca me semble etre une bonne maniere de contourner mais ca n'explique pas le bug en soi .

Téléphone a Bill Gate, il a peut être (j’en doute) la réponse
A+

de toute maniere ce n'est pas la peine d'aller chercher midi a 14h sur ie les textes qui apparraissent et disparaissent c'est toujours le probleme de
' haslayout ' imaginé par les developpeurs ms de la fin des années 1990

ok, c'est un peu plus clair......

je vais reprendre ton lien, mpop, pour essayer de bien saisir la portée de cette bête la .

Ne t'en veux pas trop de n'avoir pas reduit la page a sa plus simple expression , j'Aurais aussi du isoler le probleme plus localement avant de poster. . Et c'est le fait d'enlever les elements inclus en PHP un par un qui m'a permis d'isoler le problème.

Rendu la , vous m'avez tous de toute facon bien aidé ! Merci !