[resolu]Mise en page IE...je pige plus!

Bonjour,

je suis en train de réliser un site pour une asso de quartier avec le systeme SPIP. Jusque là j'essayais tant bienque mal de compenser les différences de mise en page entre Firefox et IE6 avec plus ou moins de bonheur.

Mais là j'avoue être face à un léger problème dramatique. Suite à une modif' sûrement mineure, la mise en page sous IE part complètement en sucette et j'ai beau éplucher ma feuille de style, je n'y comprends goutte !

Je teste mon site en local avec Easyphp. Je pensais que le blème venait de là, j'ai donc finalement posté mes page sur mon site perso, et là même problème.

> 2 éléments de ma feuille de style qui devraient au moins afficher ma page de façon cohérente

la div centrale

#global {
	position: absolute;
	left: 50%;
	top: 10px;
	width: 750px;
	margin-left:-375px; /* moitié de la largeur */	
}

la div tout en haut pour afficher la banniere à taille fixe:

#header {
	background-image: url('pict/banniere.jpg');
	background-repeat: no-repeat;
	width: 750px;
	height: 150px;
	margin-bottom: 15px;
	margin-top: 10px;	
}

je précise que sur IE5 le problème ne se pose pas.

Il se peut que le problème soit tout simple mais pour l'instant je vais finir chauve à force de m'arracher les cheveux.

Merci de votre aide ou de vos pistes.

Mikaël

PS: un p'tit probleme en postant mon message, je précise que dans mon CSS les accolades sont correctes !
Modifié par etc (01 Apr 2006 - 17:13)

Bonjour,
(aouarglllg faire un post c'est mission impossible, merci Wed Dev pour rétablir cela

Aurais-tu un lien à nous montrer s'il te plaît que l'on puisse tester cela ?

Oups, c'est vrai qu'avec une URL c'est plus parlant...désolé.

http://etc.photo.free.fr/eiv/

Une piste pour poster ce 1er Avril: rédiger son message dans un bloc-note et copier/coller...

Merci.

Mikaël

PS: ne tenez bien sûr pas compte du contenu même du site, ce ne sont que des copier/coller au hasard pour remplir mes pages et les tester. Ainsi soit dit.
Modifié par etc (01 Apr 2006 - 12:05)

Juste pour savoir, les tests on bien été effectués avec IE6 pour windows, pas avec IE Mac ?
Parce que le coup du positionnement absolu en left:50% c'est sympa, mais comme IE Mac n'aime pas trop les marges négatives, le côté gauche de la page reste à 50% de l'écran.

J'utiliserais plutôt un positionnement statique et la technique des marges automatiques, à ta place.

Ah ouais d'accord, c'est du violent comme bug ! Jamais vu ça avant. Et là j'avoue que j'ai pas la moindre idée de la source du problème. C'est comme si la moitié de la feuille de style était ignorée par IE. J'ai jeté un coup d'œil au cas où, mais je n'ai pas vu d'erreur de syntaxe flagrante ou de hack IE pas refermé...

En effet, je n'ai testé que sur PC. Je pars de ce pas en apprendre plus sur les marges négatives, même si mon problème reste pour l'instant en l'etat...

Merci

Oui, violent et desespérant...je ne pense pas (sans trop savoir à vrai dire ) que cela provienne de ma version de Spip. Comme tu dis on dirait que IE ne charge pas toute ma page. En local, j'ai testé ma page en ayant pris soin de vider avant le cache de IE. Après coup, en consultant ce cache je vois que la feuille de style est bien integrée, par contre, certaines images (qui font la mise en page) ne le sont pas, notamment la bannière...

J'en perds mon latin et mon javanais...

Salut,

D'après ce que j'ai vu, ça semble venir d'un :first-letter mal digéré.
Tu peux essayer de remplacer :

.le_dernier div:first-letter {
par
.le_dernier div:first-letter{

En rapprochant l'accolade, ça va le désactiver pour IE mais pas pour les autres.

Ps: non non, c'est pas un poisson d'avril
ps2: je n'ai pas balisé avec [ code ] justement à cause du poisson d'avril, les accolades partant tout à gauche .
Modifié par Alan (01 Apr 2006 - 13:04)

Alors là, je suis soufflé ou comment trouver une aiguille dans une botte de foin ! Chapeau.

Du coup j'ai revisité toute ma feuille de style et j'ai donc supprimé tous les espaces avant les accolades. Maintenant certaines pages résistent encore...

Sur la page index le dernier article "test mise en page..." pointe vers une page où à nouveau le style est pour le moins facétieux!
Pourtant mon CSS est modifié...

Quelqu'un connaît-il(ou elle) une regle définissant ce bug au sujet de l'accolade suivie d'un espace ?

Bravo encore et merci je touche au but.

Mikaël

Ah ben dis-donc !

Alan, tu aurais une idée de l'origine du problème ?
Je veux dire, qu'est-ce qui fait que la présence d'une espace ou pas crée un problème ? Le bug est répertorié ?

Ça me rappelle un problème que j'ai déjà eu, j'avais intégré une espace insécable (indifférentiable à œil nu d'une espace normale) entre la fin de mon sélecteur et mon accolade.
Genre

#conteneur_{bla bla}
	au lieu de
#conteneur {bla bla}

(ici l'underscore représente l'espace insécable, mais visuellement elle était indécelable).

Sinon, pour le poisson d'avril, avec la webdevelopper toolbar je gère ça très bien. Un petit Editer les CSS > Styles incorporés
Puis suppression de l'instruction fautive. Résultat, je peux écrire ce message sans me prendre la tête

etc a écrit :


Quelqu'un connaît-il(ou elle) une regle définissant ce bug au sujet de l'accolade suivie d'un espace ?
Mikaël

Salut,
J'ai peur de m'être mal fait comprendre : ce qui cloche ce n'est pas l'espace avec l'accolade, mais ce :first-letter qui met étrangement tout sans dessus dessous.
Le truc d'enlever l'espace, ça vient juste désactiver ce first-letter pour IE, et ainsi contourner le problème. Donc là il n'y avait pas de problème, tu n'as aucune raison de faire ça, sinon tu n'auras tout simplement plus de lettrine avec IE !

En effet, je ne sais pas pourquoi, mais le fait qu'il n'y ait pas d'espace après le :first-letter le rend inefficace avec IE. Pas seulement avec les accolades, mais aussi avec les virgules.

Je ne sais pas du tout pourquoi ce first-letter pose problème, d'autant plus qu'il n'y a aucune classe "le_dernier" dans cette page et que par conséquent ça ne devrait agir sur aucun élément de celle ci .
D'ailleurs tu peux t'amuser à remplacer ".le_dernier" par n'importe quelle classe imaginaire, et tu verras que le problème persiste (j'ai essayé à partir d'une capture de ta page).

Apparement c'est le fait que le first-letter soit sur un div qui fait clocher l'affaire.
En effet si tu remplaces div:first-letter par p:first-letter (tout en laissant l'espace), plus de problème (bien que cet élément p n'existe pas plus que le div sur le page...).
Modifié par Alan (01 Apr 2006 - 15:59)

Merci beaucoup Alan, quelle sollicitude.

Bon ben pour finir j'ai zappé de ma feuille de style tout ce qui contenait l'honni first-letter. Comme ça je ne suis plus emm....

En plus je crois qu'il y a une combine avec spip pour appliquer ce truc sans passer par les CSS.

Merci encore d'avoir trouvé ma faille et d'avoir soulevé cette etrangeté d'Explorer.

PS: faudra que je pense à mettre un "get Firefox" quelque part sur ma page...

Merci beaucoup Alan, quelle sollicitude.

Bon ben pour finir j'ai zappé de ma feuille de style tout ce qui contenait l'honni first-letter. Comme ça je ne suis plus emm....

En plus je crois qu'il y a une combine avec spip pour appliquer ce truc sans passer par les CSS.

Merci encore d'avoir trouvé ma faille et d'avoir soulevé cette etrangeté d'Explorer.

PS: faudra que je pense à mettre un "get Firefox" quelque part sur ma page...

@ Alan : merci de l'info.

Alan a écrit :

En effet, je ne sais pas pourquoi, mais le fait qu'il n'y ait pas d'espace après le :first-letter le rend inefficace avec IE. Pas seulement avec les accolades, mais aussi avec les virgules.

Voir IE 6 pseudo element Bug (en anglais) pour plus de précisions.