Probleme de beug sous IE6, Merci de votre aide!!

Bonjour, mon design beug sous internet explorer 6, voici une image ou jai pris des screen des beug: http://upbyadri56.free.fr/jeux/beugIE6.png
Je n'arrive pas a trouver le problème dans le codage!

Merci de votre aide je peux vous envoier le zip du kit par mp si vous le souhaiter!

page de test: ici

cordialement,
adrien
Modifié par adri5656 (24 Mar 2007 - 21:28)

Bonjour adri5656 et bienvenue,

Le mieux serait que tu laisses ton code ici...Les demandes ne se traitent pas en privé sur le forum.

ok donc je vous laisse le code html et css des parties qui beug:

le menu se déforme sous IE6

code html:

a écrit :

<!--******************************************
* LEFTBAR *
********************************************** -->
<div id="leftbar">
<div class="box">
<h2>Navigation</h2>
<ul class="inbox">
<li><a href="#">accueil</a></li>
<li><a href="#">l' equipe</a></li>
<li><a href="#">livre d' or</a></li>
<li><a href="#">en savoir plus</a></li>
<li><a href="#">partenaires</a></li>
<li><a href="#">accueil</a></li>
<li><a href="#">l' equipe</a></li>
<li><a href="#">livre d' or</a></li>
<li><a href="#">en savoir plus</a></li>
<li><a href="#">partenaires</a></li>
<li><a href="#">Jeux video</a></li>
<li><a href="#">Astuces</a></li>
<li><a href="#">entraide</a></li>
<li><a href="#">combats, concours</a></li>
<li><a href="#">vos preferences</a></li>
</ul>
</div>

css:

a écrit :


/****************************************************
* LEFTTBAR *
*****************************************************/
#leftbar{
margin: 0;
padding: 0 0 0 27px;
float: left;
width: 160px;
text-transform:capitalize;
}
#leftbar .box{
margin: 0 0 12px 0;
padding: 0;
background: url(img/box.png) repeat-y 0 0;
}
#leftbar .box .inbox{
margin: 0;
padding: 0 0 20px 0;
list-style: none;
background: url(img/boxfoot.png) no-repeat 0 100%;
}

#leftbar h2{
margin: 0;
padding: 3px 0 0 0;
height: 26px;
font: bold 12px Arial, Helvetica, sans-serif;
text-align:center;
color:#7d4e96;
text-transform:uppercase;
background: url(img/h2side.png) no-repeat 0 0;
}
#leftbar h3{
margin: 0;
padding: 0;
height: 26px;
font: bold 12px Arial, Helvetica, sans-serif;
text-align:center;
color:#7d4e96;
text-transform:uppercase;
background: url(img/h3side.png) no-repeat 0 0;
}
#leftbar ul{
margin: 0;
padding: 0;
list-style: none;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
#leftbar ul li a{
margin: 0 1px! important;
margin: 0 1px -4px;
padding: 0 0 0 28px;
color: #AAAAAA;
line-height:24px;
text-decoration:none;
display: block;
background: url(img/liside.png) no-repeat 0 0;
}
#leftbar ul li a:hover{ color: #990000; background: url(img/liside.png) no-repeat 0 -24px; }
#leftbar p{ text-align: center; margin: 5px 20px; font:11px Arial, Helvetica, sans-serif; padding: 20px 0 0 }

Décalage au niveau du mini header central (voir screen ci-dessus)

code html:

a écrit :



<!--******************************************
* CONTENT CONTENU *
********************************************** -->
<div id="content">
<div id="news">
<h2>Online Games</h2>
<!--********** Blockquote1 **********-->
<blockquote>
<h3 id="h33">
Posté le: <span>15/02/2007 à 11h01</span> dans: <span>videos</span>
</h3>

code css:

a écrit :

/********** blockquote **********/
#content blockquote{
margin: 0;
padding: 10px 15px 6px 5px;
text-align:justify;
background: url(img/newsfoot.png) no-repeat 0 100%;
}
#content h2{
margin: 0;
padding: 5px 0 0 25px;
height: 95px;
letter-spacing:-1px;
font-size:1em;
color:#e4aa2c;
background: url(img/h2news.png) no-repeat 0 100%;
text-transform:uppercase;
}
#content blockquote h3#h33{ position: relative;top: -40px; margin: 0 50px;}
#content blockquote h3{
margin: 0;
padding: 5px;
font-size: 11px;
font-style:italic;
font-weight:normal;
}
#content blockquote h3 span{
margin: 0;
padding: 0 5px;
color: #33CCFF;
}
#content blockquote h4{
margin: 2px 25px;
padding: 10px 15px;
font-size: 11px;
font-weight:normal
}
#content blockquote h4 strong{
font-size: 1.1em;
}

#content blockquote .pimg{
font-size: 0;
padding: 0;
text-align: center
}

#content .p1{
margin: 0 15px;
padding: 3px 13px 8px;
font-size: 11px;
text-align:justify
}
#content blockquote .p1 strong{ color: #A81C1B;}
#content blockquote .clear{
margin: 0 20px 70px;
padding: 5px ;
font-size: 11px;
text-align: right;
color: #397787;
}
#content blockquote .clear a{
color:#000;
text-transform:capitalize;
text-decoration: underline
}
#content blockquote .clear a:hover{ color:#FFCC00;}

La speed bar du bas se décale complètement sous IE6 (voir screen)

code html:

a écrit :


<!--******************************************
* FOOTER *
********************************************** -->
<p id="footer">
<span id="footlinks">
<a href="#">accueil</a>
<a href="#">forum</a>
<a href="#">news</a>
<a href="#">staff</a>
<a href="#top">Haut de Page</a>
</span>
Copyright: Online-Games.fr - Mars 2007 - Tous droits reservés<br />
Integration xhtml / css :<a href="http://www.decoupe-fr.net">:: decoupe-fr.net ::</a>
<a href="http://validator.w3.org/check?uri=referer">:: xhtml ::</a>
<a href=" http://jigsaw.w3.org/css-validator/check/referer">:: css2 ::</a>
</p>
</div>

code css:

a écrit :


/****************************************************
* FOOTER *
*****************************************************/
#footer{
margin: 0;
padding: 0 0 0 205px;
clear:both;
font:9px Verdana, Arial, Helvetica, sans-serif;
color:#777;
text-align:center;
height: 54px;
background:url(img/footer.png) no-repeat 0 0;
}
#footer a{ text-decoration:none; color:#888888}
#footer span#footlinks{ display:block; font-size:1.2em;padding-top: 10px; text-transform:capitalize; margin-bottom:5px}
#footer span#footlinks a{ margin: 0 40px 0 20px! important;margin: 0 10px 0 10px; color: #6692af}
#footer a:hover{ color:#FFCC00;}

Merci d'avance,
cordialement,
Adrien

koala64 a écrit :
Le mieux serait que tu laisses ton code ici...

L'idéal étant la page de test disponible en ligne. Ou la page du site directement, si donner un lien vers le site directement ne pose pas de problème, ou si on n'a pas le temps de créer une page de test en ligne reproduisant le problème.

Pour ma part, étant particulièrement flemmard, je ne penche pas sur un problème sans page de test en ligne.
Modifié par Florent V. (24 Mar 2007 - 21:21)

Arf, ben voilà le code, manque juste la page en ligne (comment ça, je me répète ?).

Sans même regarder le code, si le bug du menu de gauche est un trop grand écartement des items de menu, je dirais que la solution est par là :
Impact sur le rendu de la mise en forme du code HTML
(Voir à la fin de l'article.)

a oui houps jai oublié le plus important désoler lol
la voila !
ici
Modifié par adri5656 (24 Mar 2007 - 21:28)

si j'ai bien compris l'article il faut que je regroupe les images dans un paragraphe, jai essayer mais cela na pas fonctionner
j'attend donc vos conseil et si vous voulez le zip complet demandez le!

adri5656 a écrit :
si j'ai bien compris l'article il faut que je regroupe les images dans un paragraphe, jai essayer mais cela na pas fonctionner

???

Tu as mal compris l'article, alors.

L'article en question dit que dans certains cas IE6 prend en compte les espaces non significatifs entre des éléments de type bloc (ici les li du menu), qui se retrouvent alors étrangement espacés. L'article donne ensuite deux solutions, dont la plus « simple » pour un débutant en CSS consiste à supprimer tous les espaces non significatifs entre les li, c'est à dire : les espaces, les tabulations, les retours à la ligne.

Et oui, ça marche (je viens de le tester à l'instant sur une copie locale de ta page).

Pour le décalage du h2 de ta div de news, c'est un effet du Three Pixel Jog conjugé au HasLayout.
http://www.test.blog-and-blues.org/haslayout/tests/float6.html

La propriété fautive qui confère le layout dans IE Win au h2 est le height: 95px;.
(Le problème, c'est que si l'on enlève le height: 95px pour le compenser par un padding-bottom: 75px par exemple, on n'a plus le layout -- ce qui était l'effet recherché -- et du coup on se retrouve avec un bel exemple de Peek-a-boo bug ou de Guillotine bug, je sais plus trop...)

Une solution possible serait de conférer le layout à tout le conteneur de droite, de sorte que tout ce conteneur serait décalé de 3px.

Pour information, le concept de HasLayout (ou de layout) est expliqué ici : Avoir le layout - Le concept de hasLayout dans IE/Win.
Attention les neurones, c'est du costaud.


Quant au pied de page, il y a encore un bug de HasLayout qui traine (la propriété height confère le layout à div#footer). Et un problème de fusion des marges, peut-être. Essayer un padding-top: 1px sur div#footer, pour voir...

woh jai survoler l'article et pour être franc j'ai pas compris grand chose...
Comme tu vois ce n'est pas moi qui ai codé le kit (decoup-fr)
J'ai pas beaucoup de connaisances en html...
Donc est-ce que tu pourrais essaier de me faire ça stp, car moi j'y arriverais jamis
Merci d'avance!!

non non adri5656 ! Je pense que tu n'as pas bien lu les règles du forum

règle 16

Si tu as des difficultés, c'est à toi de t'investir et de le faire... à moins que tu ne préfères payer un professionnel pour ce travail... au choix

Il y a sur ce site tout ce dont tu as besoin pour y arriver... des tutos, du plus simple au plus avancé, pas mal de liens intéressants ainsi qu'une communauté qui sera prête à t'aider sur tes incompréhensions... Il n'est pas question ici de travailler à ta place... donc si quelquechose te parait flou dans ce que tu as lu de l'article ou des explications de Florent, fais une recherche puis pose la question si vraiment tu pêches.

Tu peux y arriver si tu le veux mais certainement pas en survolant...

Florent a écrit :
L'article donne ensuite deux solutions, dont la plus « simple » pour un débutant en CSS consiste à supprimer tous les espaces non significatifs entre les li, c'est à dire : les espaces, les tabulations, les retours à la ligne.

Je pense que ça, tu peux déjà le faire.

ok je vais essaier de faire ça ^^
sinon jai essaié le padding-top=1px sur div#footer mais ça na pas marché..
demain je lirais de plus pret les article que florent ma donner!
merci pour vos conseils

J'ai réussi pour le menu de droite, en faite il suffisait juste de tout mettre sur la même ligne (cette fois ci j'ai bien lu^^).
il reste encore 3 beugs quand même
Le site (en test)
Modifié par adri5656 (26 Mar 2007 - 13:21)