Placement et taille div flottantes sous internet explorer [résolu]

Bonjour.
Un petit souci.
J'essaie de faire une page lisible sur tous les navigateurs.
http://www.trusiad.fr/cahierdetexte/20082009/cinquiemec.html
Or, bien entendu, le placement est bon sous firefox, opera mais mauvais sous ie, qui non seulement ne gère pas bien le placement, mais en plus ne respecte pas les tailles indiquées.
http://www.trusiad.fr/cahierdetexte/styles.css
Quelqu'un aurait-il une idée ?
Merci beaucoup,
David

P.S. Les bordures sont temporaires, pour voir où sont placés les différents éléments.
Modifié par trusiad (08 May 2009 - 08:30)

Je progresse, en triturant ma feuille de style dans tous les sens.
Le placement est meilleur.
Mais j'ai une div imbriquée dans une autre qui semble se comporter très bizarrement.
En fait, presque toutes les dimensions sont en pourcentage.
la div imbriquée fait 75% de la div contenante.
Mais il semble qu'internet explorer l'interprète mal : il me laisse un espace énorme à droite, et je ne vois pas du tout à quoi cela correspond.

Enlève :

<?xml version="1.0" encoding="UTF-8"?>

avant ton doctype, ça devrait beaucoup arranger les choses.

Tu peux également te renseigner sur le mode quirks d'IE pour comprendre le problème.

C'est bien pire sans la ligne initiale !
Du coup toutes les div imbriquées sont décalées et placées en dessous !
Pour comparer :
1. Sans la ligne initiale :
http://www.trusiad.fr/cahierdetexte/20082009/cinquiemed.html
2. Avec :
http://www.trusiad.fr/cahierdetexte/20082009/cinquiemec.html
Par ailleurs, j'ai toujours vérifié la validité de mes pages avec les outils du w3c, et je n'ai jamais eu aucune remarque avec cet en-tête...

trusiad a écrit :
C'est bien pire sans la ligne initiale !

Ben oui, si tu as tout développé en travaillant (dans IE 6-7) en mode Quirks, forcément, quand tu passes en mode Standard ça peut faire drôle.

Solution: travailler dès le départ en mode Standard. Si on ne l'a pas fait, il faut évaluer les corrections à effectuer dans un cas ou dans l'autre, ce que ça implique pour la maintenance du site (plus compliquée si en mode Quirks), ses évolutions futures (limitées), etc.

trusiad a écrit :
Par ailleurs, j'ai toujours vérifié la validité de mes pages avec les outils du w3c, et je n'ai jamais eu aucune remarque avec cet en-tête...

Il s'agit d'un bug d'IE6-7. Sauf si on fait du XML (en l'occurrence du XHTML 1.0 ou 1.1 servi en "application/xhtml+xml"), cette déclaration XML est inutile, voire inappropriée, et vu le bug d'IE à ce sujet il est considéré comme une bonne pratique de ne PAS l'inclure.

En passant, si je regarde le code source de ta page:
- tu déclares du XHTML 1.1, servi en "application/xhtml+xml" (logique, le XHTML 1.1 ne peut être servi, théoriquement, que de cette façon);
- mais le serveur déclare un type de document "text/html", ce qui veut dire concrètement que pour les navigateurs ton document est du "text/html", et sera interprété comme du HTML 4.

Donc:
- continuer à servir les pages en "text/html" (parce que c'est ce qu'il faut faire);
- ne pas utiliser le Doctype XHTML 1.1 (tu ne fais pas vraiment du XHTML 1.1);
- utiliser de préférence un Doctype HTML 4.01, ou éventuellement un Doctype XHTML 1.0.

Un peu de lecture:
http://www.alsacreations.com/astuce/lire/41-comment-bien-dclarer-du-xhtml-10-et-du-xhtml11.html

je viens de regarder un peu cette histoire de quirks mode ( je ne connaissais pas vraiment ).
En fait, xhtml 1.0 ou 1.1 ne change rien. C'est juste la déclaration xml du début qui fait la différence.
amusant de voir qu'en mode quirks, le rendu d'ie6 est meilleur qu'en mode normal.

En fait, c'est la balise h6, qui est avant la div ligne dans le code, en float:right, qui fait que la div ligne se décale en dessous, au lieu de rester en haut du conteneur.

Problème finalement résolu en appliquant un contexte de formatage block sur le div concerné ( overflow:hidden ).
Par contre, je n'ai aucune idée si ça marche sous ie7 ?

trusiad a écrit :
Dernière question : pourquoi dis-tu que je ne fais pas vraiment du xhtml 1.1 ?

Le XHTML 1.1 DOIT être servi en "application/xhtml+xml". C'est à dire qu'il doit être déclaré comme tel dans les en-têtes HTTP, et sera interprété par le parseur XML des agents utilisateur (navigateurs). Les problèmes que ça pose:
- un parseur XML n'autorise pas d'erreurs dans le code, à la moindre erreur de syntaxe le visiteur verra s'afficher une page d'erreur sibylline (pas souhaitable), tandis que les parseurs HTML des navigateurs sont beaucoup plus souples et tentent de «récupérer» les erreurs;
- Internet Explorer, y compris dans sa dernière version (8), ne comprend pas le type MIME "application/xhtml+xml".

Concrètement, ta page n'est PAS en "application/xhtml+xml". Elle est servie en "text/html" et donc interprétée comme telle. Voir les en-têtes HTTP envoyés.

Il est probable qu'au final tu souhaites faire du text/html plutôt que du application/xhtm+xml. Dans ce cas, tu fais du HTML, que tu utilises la syntaxe HTML 4 ou XHTML 1.0 pour faire joli. DONC, tu n'as pas besoin d'une déclaration XML (vu que tu fais du HTML et pas du XML ), elle est même inappropriée. Le bug d'IE (6-7, corrigé dans la version 8) avec la déclaration XML n'est qu'une raison de plus de ne pas l'utiliser.

En passant, je n'aurais pas eu besoin d'écrire tout cela si tu avais lu l'article que je t'ai indiqué...

trusiad a écrit :
Problème finalement résolu en appliquant un contexte de formatage block sur le div concerné ( overflow:hidden ). Par contre, je n'ai aucune idée si ça marche sous ie7 ?

Ça marche sous IE7, pas sous IE6.

trusiad a écrit :
la balise h6

Si tu as un H6 dans ton document, c'est que tu as un H1, H2, H3, H4 et H5 avant cela, et bien sur en respectant l'ordre hiérarchique: ton H6 est un sous-sous-sous-sous-sous-titre du H1 qui le précède, et pas un niveau de titre choisi juste parce qu'on voulait du texte peu encombrant. C'est bien le cas? Si ce n'est pas le cas, tu as loupé quelques informations de base sur la sémantique HTML.

Plusieurs points sont intéressants.
Cela dit, pour faire bref :
1. je veux faire du xhtml, parce qu'il est possible qu'un jour j'évolue vers un format xml genre docbook.
2. personnellement, j'ai ie6 qui tourne sous wine. ça marche, il me semble.
3. La balise h6 a été choisie pour une raison précise : en l'occurence, parce que je fais un copier-coller rapide d'un bloc contenant déjà h1,h2,h3,h4 et que je n'ai pas envie de tout retaper à chaque fois.
Modifié par trusiad (08 May 2009 - 14:19)

trusiad a écrit :
1. je veux faire du xhtml, parce qu'il est possible qu'un jour j'évolue vers un format xml genre docbook.

Auquel cas, fais du XHTML 1.0 servi en text/html. À moins que tu ne te fiches du support d'IE (6-8), et que tu préfères alors du XHTML 1.0 ou 1.1 servi en application/xhtml+xml. Ou du XML maison stylé en CSS.

(En passant, il y a cet article intéressant de Mark Pilgrim (en anglais) qui explique pourquoi il a laissé tomber le Docbook pour passer à... HTML 5.)

trusiad a écrit :
2. personnellement, j'ai ie6 qui tourne sous wine. ça marche, il me semble.

Ce n'est pas le contexte de formatage via overflow:hidden qui «marche» dans ce cas précis. C'est, à priori, un effet secondaire du HasLayout.

trusiad a écrit :
3. La balise h6 a été choisie pour une raison précise : en l'occurence, parce que je fais un copier-coller rapide d'un bloc contenant déjà h1,h2,h3,h4 et que je n'ai pas envie de tout retaper à chaque fois.

Ça ne m'a pas l'air très clair. Je suis près à parier qu'il y a là un problème de hiérarchie des titres.

Ok, j'avais raison pour les titres.

Mais au-delà des titres, c'est toute la sémantique HTML qui est du grand n'importe quoi dans ces pages.

La page suivante est une aberration: http://www.trusiad.fr/cahierdetexte/20082009/cinquiemec.html

On a deux problèmes majeurs ici:
1. La hiérarchie des titres est aléatoire. On lira avec attention la page suivante (et tout le cours, tant qu'à faire).
2. On a utilisé des titres, paragraphes, listes, etc., en remplacement d'un tableau. Le résultat est moins accessible, plus difficile à mettre en page, moins compatible qu'un tableau! Je ne sais pas où on a lu qu'il fallait bannir les tableaux (éléments TABLE, TR, TH, TD...) des pages HTML, mais c'est une bêtise. Les tableaux HTML sont définis ici.

Ma réaction est un peu rude, mais tu as visiblement appris un certain nombre de choses de travers, et il serait préférable de revoir ces connaissances et de repartir du bon pied.
Modifié par Florent V. (08 May 2009 - 20:41)

Effectivement, la réaction est rude, surtout que tu ne connais ni les tenants ni les aboutissants de cet usage.
Alors, pourquoi ce balisage ?
Simplement parce que c'est un cahier de textes : c'est fait pour reporter jour après jour les séances de travail effectuée avec les élèves ( par exemple, http://www.trusiad.fr/cours/cours/vendredi.html ). Or, l'en-tête de ces séances est construit avec des balises h1,h2,h3 et h4. Il est très simple et très rapide pour moi de faire un copier-coller. Restait à ajouter la date et le travail à faire : les balises h5 et h6, qui n'étaient pas utilisées, m'ont paru tout-à-fait adaptées. Parfois, j'ai besoin de mettre des notes particulières, des paragraphes. J'ai donc choisi la balise p.
Alors oui, effectivement, j'aurais pu faire un tableau. Mais ça m'obligerait à refaire un document chaque jour, alors que là c'est juste du copier-coller.
J'aurais pu également utiliser un blog, ce qui m'éviterait tous ces soucis de mise en forme et serait plus logique avec l'idée du journal. Mais là encore, c'est plus long de tout réécrire, que de faire un simple copier-coller.
Effectivement, comme beaucoup, j'ai appris en autodidacte, et j'ai sans doute pris de mauvaises habitudes. Les forums d'alsacréations sont vraiment enrichissants dans ce cadre. Mais dans ce cas précis, le document correspond à un usage précis. Le balisage n'est que la conséquence de cet usage. Donc, ce n'est peut-être pas standard, mais c'est ce dont j'ai besoin.
Merci en tout cas pour ces indications enrichissantes.

Salut,

au risque d'être un peu lourd (j'ai l'habitude ) je trouve l'argument du copier/coller un peu léger : cela prend autant de temps de le faire depuis une structure cohérente que depuis une structure incohérente...

De plus, en tant qu'enseignant, la notion de sémantique devrait (...pourrait) être importante non ?

Mais je n'insiste pas plus et te souhaite bonne continuation.

trusiad a écrit :
Or, l'en-tête de ces séances est construit avec des balises h1,h2,h3 et h4.

Oui, il y a d'ailleurs quelques erreurs et quelques incohérences. On peut le constater en générant un plan du document avec l'extension Web Developer pour Firefox (Information > Plan du document), par exemple.
Ces erreurs et incohérences ne sont pas catastrophiques, cependant.

trusiad a écrit :
Il est très simple et très rapide pour moi de faire un copier-coller.

Ce qui est cohérent dans un cas ne l'est pas dans l'autre. Un titre introduit un contenu. Lorsqu'on extrait une série de titres (qui tous n'auraient pas forcément dû être des titres à la base, mais passons), pour en faire un listing, on ne devrait pas avoir le même balisage structurel dans le listing.

Copier-coller sans conscience n'est que ruine de la sémantique.

trusiad a écrit :
les balises h5 et h6, qui n'étaient pas utilisées, m'ont paru tout-à-fait adaptées

Elles ne le sont pas. La notion de titre semble vous échapper.

trusiad a écrit :
Mais ça m'obligerait à refaire un document chaque jour, alors que là c'est juste du copier-coller.

Ça obligeait à rajouter une ligne au tableau, pas à refaire un document complet.

trusiad a écrit :
J'aurais pu également utiliser un blog

Plutôt une base de données. Les différentes pages étant alors des vues sur les données, avec un balisage HTML adapté à chaque cas.

trusiad a écrit :
Donc, ce n'est peut-être pas standard

Ce n'est pas une question de validité du code HTML (qui, à vue de nez, est valide, ou ne devrait pas comporter beaucoup d'erreurs). C'est plus une question d'utilisation correcte de la sémantique HTML, qui permet une meilleure accessibilité des contenus.

Dans le cas du simili-tableau, c'est aussi une question de robustesse de la mise en forme. Un tableau aurait été tout de même moins casse-gueule; en particulier il aurait permis un rendu correct sous Internet Explorer 6, ce qui n'est pas le cas ici.

Effectivement. Finalement, je vais peut-être opter pour un tableau.
En fait, au départ, j'ai commencé à utiliser du xml. Je suis passé au xhtml ensuite. Du coup, j'ai gardé l'habitude de considérer les éléments indifférement; comme des balises xml.

Bon, et comme ça ?
http://www.trusiad.fr/cahierdetexte/20082009/cinquiemec.html
Je retiens l'info sur la hiérarchie des styles, idée toute bête que j'avais un peu perdu de vue.
Merci !
Modifié par trusiad (09 May 2009 - 11:37)