28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Mon problème est simple : J'essaye de placer un élément en position:fixed, et évidemment ça fonctionne dans tous les navigateurs SAUF IE8.

Je ne comprends pas car il n'y a pas l'air d'y avoir de bug connus sur cette propriété avec IE, et l'attribut fixed marche très bien sur ce site par exemple.

Quand c'est mon code, rien à faire, même lorsqu'il s'agit d'un simple div en position:fixed dans une page vide, et même si je reprends le code de la page sus-citée. Vraiment je ne comprends pas, il y a de quoi ce jeter par la fenêtre, ça doit être un truc trop boulet mais impossible de mettre la main dessus.

J'ai cru voir qu'avec IE7 c'était lié au quirks mode, donc j'ai bien vérifié ma dtd pour ne pas que ça se mette en quirks, mais là non plus rien à faire.

C'est d'autant plus enervant que je vois que ça fonctionne sur un autre site sans voir la différence avec mon code Smiley decu

Si quelqu'un peut tester chez lui, mettre juste un div en position:fixed dans une page blanche et m'envoyer le lien, ce serait parfait, ou encore mieux si vous connaissez une solution pour que ça fonctionne.

Je n'ai aps de code à vous montrer comme exemple, c'est juste que la position:fixed ne marche pas, quoi que je fasse et quel que soit le code.
J'ai réglé le problème en ajoutant ce code dans ma page :

<meta http-equiv="X-UA-Compatible" content="IE=8" />


de ce que j'ai compris ça "force" IE8 à bien interpréter les standards, mais je ne suis pas sûr que cette solution soit perenne, et je ne sais pas si ça fonctionne sous IE7 (je n'ai pas le moyen de tester)

Ça rejoindrais ma théorie sur le mode quirks, mais ça ne me dis pas ce qui le déclenche Smiley murf

Si vous avez plus d'info sur cette ligne de code (est-elle necessaire ?) je suis preneur.
Désolé je ne peux pas éditer mes posts pour éviter la multiplication des messages mais j'ai installé IEtester et effectivement c'est la cata dans IE7, l'attribut position:fixed n'est pas traité. Pareil pour IE6 mais c'est une partie limitée de mon audience, donc c'est pas grave, mais IE7 c'est assez génant.

Y'a t'il un moyen comme pour IE8 de le forcer à interpréter la page correctement ?

Merci.
yosh a écrit :
de ce que j'ai compris ça "force" IE8 à bien interpréter les standards

Ça demande à IE8 d'utiliser le mode de rendu «IE8» plutôt que le mode de rendu «compatibilité IE7» qu'il embarque aussi.
Pour IE8 lui-même c'est pérenne, et cette fonctionnalité devrait être dans IE9 également. Par contre pour éviter qu'un futur IE9 ou IE10 se limite à un mode de rendu «compatibilité IE8» à l'avenir, j'utiliserais plutôt:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />


Sur l'origine du problème (toujours bon à comprendre avant de chercher un correctif Smiley cligne ), le problème rencontré lors des tests est celui décrit dans cet article (en anglais):
http://www.sitepoint.com/blogs/2010/02/20/podcast-49-buzz-kill/

yosh a écrit :
Ça rejoindrais ma théorie sur le mode quirks, mais ça ne me dis pas ce qui le déclenche Smiley murf

IE8 a également un mode Quirks. En fait si on compte les modes de rendu dans IE8 on en a trois:
- «mode normal = rendu IE8» (nécessite un doctype en bonne et due forme et pas de critère qui fait basculer en mode de compatibilité);
- «mode de compatibilité ~ rendu IE7»;
- «mode Quirks ~ rendu IE 5.5».

Le mode Quirks dans IE8 ne se comportera pas exactement comme IE 5.5 et le mode de compatibilité pas exactement comme IE7, mais ce sont des approximations décentes.

yosh a écrit :
Si vous avez plus d'info sur cette ligne de code (est-elle necessaire ?)

Elle n'est en général pas nécessaire. Si tu développes un site pour un intranet, par contre, ça peut être une bonne idée de l'inclure. De même si plusieurs intégrateurs interviennent sur le site en travaillant en local sur la base de code. Autrement ça ne devrait pas être nécessaire ou même utile.

Quant aux anciennes versions:
- pas de support de position:fixed du tout dans IE6, il faut à priori dégrader le rendu en utilisant un positionnement statique ou absolu (pour IE6 uniquement);
- normalement le support de position:fixed est ok dans IE7.

Pour IE7, tu rencontres peut-être un bug particulier? Ou bien tu as des caractères autre que des espaces avant ton Doctype, ou bien un Doctype non valide, et tu te retrouves en mode Quirks dans IE6 et dans IE7.

yosh a écrit :
Désolé je ne peux pas éditer mes posts pour éviter la multiplication des messages

Si tu te connectes d'abord sur le forum (plutôt que de t'identifier au moment de poster un message), tu peux éditer tes messages. Sauf bug velu. Smiley smile
hello, merci pour cette réponse rapide, toutefois c'est bien ce qu'il me semblais : je ne devrait rien forcer normalement pour que IE8 réagisse comme IE8, un doctype valide devrait suffire !!

En fait mon IE 8 s'exécutait en mode compatibilité IE7, ce qui fait que ça foutait le bazar, mai sce que je ne m'explique pas, c'est que IE7 comprends très bien le position:fixed, et pourtant rien y fait, tous mes éléments sont les uns dessous les autres, comme en static.

J'ai fait une validation W3C qui ne m'a rien remonté, du coup je pense que mon doctype est ok, je ne m'explique vraiment pas POURQUOI ie7 ne comprends pas correctement le fixed. J'ai dégradé en absolu pour pouvoir continuer à avancer, mais je pense qu'il y a un problème, sur IE7 ça devrait marcher !! Smiley bawling
yosh a écrit :
je ne devrait rien forcer normalement pour que IE8 réagisse comme IE8, un doctype valide devrait suffire !!

Sauf si tu bosses en local, ou sur un serveur de test avec une adresse de type intranet (domaine/ au lieu de domaine.tld/), ce qui est courant. Voir l'article de SitePoint cité.

yosh a écrit :
je ne m'explique vraiment pas POURQUOI ie7 ne comprends pas correctement le fixed

Si ça s'affiche «comme en statique» et pas «comme du fixed un peu foireux», il y a probablement un problème de mode de rendu plutôt qu'un bug de positionnement vaguement lié au HasLayout.
Rien de placé avant le Doctype? Pas de déclaration XML, de commentaire HTML, ou même une saleté de BOM (si fichier en UTF-8, à vérifier en basculant l'affichage en ISO-8859-1 pour voir si tu as trois caractères bizarres qui apparaissent dans ton code source)? Le modèle de boite de CSS2 est bien respecté?

Bon, je crois que j'ai fait le tour de ce que je pouvais en dire. Pour en dire plus il faudrait pouvoir voir le patient. Smiley smile
"florent" a écrit :
Sauf si tu bosses en local, ou sur un serveur de test avec une adresse de type intranet


Yep mais ça n'est pas le cas, c'est en ligne sur un serveur classique.

Pour le reste non, il n'y a rien de tout ça, j'ai même essayé avec une page vierge, avec juste le nécessaire.

pour résumer :
- dans IE8 = le fixed s'affiche comme du static
- dans IE8 avec le meta de compatibilité = ça s'affiche correctement
- dans IE7 via ietester = le fixed s'affiche comme du static
- dans IE6 = fixed comme du static mais bon à la limite c'est pas grave

Pour voir le patient c'est par ici. c'est grave docteur ? Smiley murf //edit : hop guéri, c'est plus la peine !!

ne faites pas attention au désordre, je ne voulais pas présenter tout ça sit tôt, mais ce bug dès le départ va me rendre fou. Smiley biggol

//edit, le fin mot de l'histoire : bien qu'ayant vérifié 15 fois, c'était bien dû à un bout de commentaire HTML qui, par le jeu de plusieurs includes imbriquées, se retrouvait avant le doctype. Y'avait vraiment de quoi s'arracher la tête. Moralité : commenter son code, c'est mal Smiley cligne (le pire c'est qu'il me semblait bien qu'à un momnt ça marchait, mais comme j'ai commenté assez rapidement, je pensais que la régression venait d'ailleurs. Ceci dit, je ne m'explique pas le mode compatibilité sur la page vierge !! Smiley rolleyes )

Un grand merci à florent, je reviendrais surement avec le convalescent pour d'autres questions du même style, ou qui sait, pour vous poser des questions d'ergonomie.
Modifié par yosh (21 Feb 2010 - 20:40)
yosh a écrit :
//edit, le fin mot de l'histoire : bien qu'ayant vérifié 15 fois, c'était bien dû à un bout de commentaire HTML qui, par le jeu de plusieurs includes imbriquées, se retrouvait avant le doctype.

IE, toutes versions confondues, était donc en mode Quirks. CQFD
Oui, je sentais bien que c'était une histoire de quirks, mais comme mon doctype était OK je m'arrachai les cheveux à essayer de voir ce qui enclenchait se mode, et au passage faisait foirer toute la page. Je l'avait même faite valider pour vérifier que tout était Ok dans ma déclaration de doctype, mais rien à faire...

Si vous pouvez m'éclairer sur un point : est-ce que c'est un comportement normal qu'un commentaire avant le doctype fasse passer IE en quirks, ou est-ce que c'est juste IE qui se fait des films ?

Je veux dire : c'est pas censé être 100% transparent un commentaire ? Smiley ohwell

Merci à tous en tout cas !! Smiley lol
yosh a écrit :
Je veux dire : c'est pas censé être 100% transparent un commentaire ? Smiley ohwell

Si. C'est un bug d'IE 6-7, cette histoire de commentaire ou déclaration XML ou autre contenu autre que espaces/tabulations/retour à la ligne qui fait ignorer le Doctype.
Pour IE8 je ne sais pas s'il reproduit ce comportement bugué (rétro-compatibilité), ou si c'était uniquement les critères «normaux» du mode de compatibilité qui rentraient en compte.