[fini] A CSS identiques, 2 comportements différents sous IE

Allez, rebelote avec IE 6.

Ce coup-ci, il s'agit de cette page.

Sous Firefox, aucun souci.
Sous IE 6 le cadre bordeaux "Nous découvrir" se colle au menu, avec donc une disparition de la marge de gauche et de la bordure.
Ce qui m'étonne le plus, c'est que ça ne soit pas le cas du cadre bleu qui se trouve juste dessous.
Je mets ici le code CSS correspondant à ces 2 cadres (bordeaux et bleu) :

div.sephoriz {margin: 3px 52px 1px 52px; border-top:1px solid;}
div.sephorizarticles {margin: 3px 156px 1px 52px; border-top:1px solid;}

#cadre1a {margin:0px 7px 10px 14px; background:url('/actu/squelettes/autres/images/accueil-cadre1-g.gif') top left no-repeat; background-color:#cb5513;}
#cadre1b {margin-bottom:1px; padding-top:2px; padding-right:1px; padding-bottom:1px; padding-left:1px; background:url('/actu/squelettes/autres/images/accueil-cadre1-d.gif') top right no-repeat;}
#contenu1 {margin-top:2px; padding-top:2px; padding-right:4px; padding-bottom:4px; padding-left:4px; background-color:#f7f4ed;}
#contenu1 div.sephoriz {border-color:#cb5513;}
#contenu1 div.sephorizarticles {border-color:#cb5513;}

#cadre3a {margin:0px 7px 10px 14px; background:url('/actu/squelettes/autres/images/accueil-cadre3-g.gif') top left no-repeat; background-color:#879fd8;}
#cadre3b {margin-bottom:1px; padding-top:2px; padding-right:1px; padding-bottom:1px; padding-left:1px; background:url('/actu/squelettes/autres/images/accueil-cadre3-d.gif') top right no-repeat;}
#contenu3 {margin-top:2px; padding-top:2px; padding-right:4px; padding-bottom:4px; padding-left:4px; background-color:#f7f4ed;}
#contenu3 div.sephoriz {border-color:#879fd8;}
#contenu3 div.sephorizarticles {border-color:#879fd8;}

Any idea ?...
Modifié par olivier-m (20 Feb 2006 - 10:56)

Il me semble pourtant que ce problème est assez courant et je crois bien avoir déjà lu tes articles à ce sujet mais pas moyen de les retrouver.

Si quelqu'un connaît une bonne source. Notamment je pensais que positioniseverything.net aurait fait quelque chose là-dessus mais je ne trouve pas.

Edit : je viens d'essayer sans succès "position:relative". (tour à tour sur le cadre extérieur et sur les 3 cadres à la fois)
Modifié par olivier-m (14 Feb 2006 - 15:52)

J'y arrive pas...

Franchement, là, je vais devenir fou ; je n'y comprends absolument rien.

En plus j'ai eu un autre souci à gauche sous le menu (l'ajout d'un div en-dessous du menu allongeait le menu sous IE) et la seule solution que j'ai trouvée a été de... faire un tableau de 2 lignes.

Alsa ! ALSA ! Pourquoi m'as-tu abandonné...

olivier-m a écrit :
Alsa ! ALSA ! Pourquoi m'as-tu abandonné...

laisse nous le temps d'un petit coffee apres on est a toi

bon ca doit etre un probleme de calcul au niveau de ton tableau et des marges et tout le tralala enfin bref

avec

<td width="30%" valign="top">

a la place de

<td width="50%" valign="top">

pour ton tableau de gauche ( celui qui "colle") ca marche enfin chez moi...


edit : en faite si je sais ... tu met 2 marge à 10 px pour celle de droite et celle de gauche donc faut que tu pense a les retirer dans ton tableau

reedit: a non excuse moi ca ne regle pas le probleme ... c'est plus grave que ca j'avais ma fenetre en petite taille
Modifié par StyleSho (16 Feb 2006 - 10:41)

Bon je pense avoir trouvé...

le probleme vient de tes images , j'ai fais le test de les enlever et la miracle plus de probleme ... alors pourquoi?

a mon avis il faut que tu donne une taille a ta dic accueilchapo la la bonne taille serait 100% - la taille de ton image ( je sais pas si tu comprend se que j'essai de te dire )

enfin fais le test donne une taille genre 50px a cette div je crois que ca resout le pb , maintenant a toi de trouver la bonne taille...

mais bon je pense que la meilleur solution aurait été de mettre l'image ( dans une div aussi avec la propriété flot right) dans la div pour que ton paragraphe se fixe en fct de l'image

Un très grand merci pour tes tests ; du coup j'avance. L'idée ne m'était pas venue que le problème pouvait venir de ce div-là.

Alors...

1) j'ai essayé en remplaçant les div par des span, sans succès.

2) j'ai mis une largeur de 80% : ça marche mais du coup c'est quand même pas très chouette sous IE parce qu'on a un blanc à droite du texte. Et si je mets plus large, la marge et la bordure disparaissent de nouveau.
Donc je cherche une autre solution.
En dernier recours, je mettrai l'image dans le div avec la classe accueil-chapeau mais ça va augmenter la hauteur de la page donc le client risque de ne pas apprécier...

3) spécialement @toi : ça m'intéresse de savoir comment tu testes mes pages : est-ce que tu les copies localement ? Ou est-ce que tu as un simulateur d'IE ?

Je sens que je vais craquer...

Je croyais avoir résolu le problème : nenni !
En début d'après-midi, je jette un oeil sur la page sous IE 6 et le problème est "revenu"...

Et maintenant que, en désespoir de cause, j'ai mis l'image dans le div de classe accueilchapo sur ton conseil en me disant "allez ! au moins je pourrai passer à autre chose", ben, ça ne change rien.

Quand je pense à tout ce qui m'attend ensuite, ça me fait mal au coeur de passer autant de temps là-dessus...

Je m'apprête à tout changer pour faire des tableaux imbriqués dans des tableaux qui encadreront d'autres tableaux.

Je pense m'y mettre vers 17h et finir je sais pas quand, vu que ce sera quand même sacrément long...

Si d'ici là quelqu'un arrivait à me sauver la vie, je lui en serais éternellement reconnaissant.

olivier-m a écrit :
Je m'apprête à tout changer pour faire des tableaux imbriqués dans des tableaux qui encadreront d'autres tableaux.

Je pense m'y mettre vers 17h et finir je sais pas quand, vu que ce sera quand même sacrément long...

Si d'ici là quelqu'un arrivait à me sauver la vie, je lui en serais éternellement reconnaissant.

le probleme c'est que tu risque de rencontrer a chaque fois de nouveaux problemes du fait de ( sans etre mechant) "bordel" de ton fichier css...

mais bon en meme temps c'est comme ca qu'on apprend

test test et retest ya que ca de vrai

justement je demandais dans un autre sujet comment je pouvais "assainir" ma CSS : moi qui apprends tous les jours, je ne vois pas pour le moment ce qui vous semble compliqué.

Quelques conseils seront les bienvenus.

PS : bravo pour ton lien sur standblog ; je l'ai vu dans mes RSS aujourd'hui
PPS : franchement, "tester, tester et restester", c'est ce que je fais depuis 1 semaine sur ce point précis. Ras le bol.
Modifié par olivier-m (17 Feb 2006 - 11:20)

J'aligne les photos à gauche et je vais peut-être réduire les tailles de 3 d'entre elles pour que ce soit pas trop choquant.

Pas trouvé de vraie solution.