28172 sujets

CSS et mise en forme, CSS3

Bug IE lié à overflow

Bonjour à tous.

Je pense que le titre de ce message doit vous être familier, pour cause j'ai trouvé sur ce forum et d'autres, beaucoup de messages traitant de ce sujet. Mail malheureusement, je n'ai pas trouvé ma réponse.

J'étais tranquillement en train de finaliser un site sous firefox, quand je me suis dit, tiens je vais tester sous IE, ça fait un p'tit moment que je l'ai pas fait. Et là horreur, toutes les div contenant mes pages (mon contenu texte) n'affichent rien, alors que sous FF, tout fonctionne. Après de nombreux test, j'en conclus, comme vous le savez sûrement que les scrollbar ne sont pas affichées de la même façon sous IE et FF. IE rajoute la scroll à la largeur du div (ce qui est débile nous sommes d'accord ...) tandis que FF rajoute la scrollbar à l'intérieur.
Si je ne suis pas clair, voici de quoi illustrer mon propos : http://www.civel.asso.fr => cliquez sur "qui sommes-nous". Vous verrez un affichage différent sur FF et IE. Et franchement, ça me pose problème. J'aimerais bien que la scrollbar soit calée complètement à droite.

Déjà que mon site n'est pas supporté sous IE6, j'aimerais bien qu'il soit 100% supporté sur les autres navigateurs.

Sur d'autres forum, la réponse la plus fréquente que j'ai trouvée était liée au doctype. Du coup je les ais tous essayé pour la peine ^^ et rien y fait Smiley decu

Je suis ouvert a toute suggestion ! personnellement, je suis à court.
Merci d'avance !

Tom'
Modifié par 28ToM47 (12 Nov 2009 - 04:38)
Bonjour,

Avant de chercher ce qui bug, je commencerais pas corriger le code :

a écrit :
Errors found while checking this document as XHTML 1.0 Strict!
Result: 380 Errors

ça fait quand même beaucoup...

Par contre, tu dis que tes div contenant le texte n'affichent rien, mais sur IE6, j'ai bien accès au contenu.
Bonjour Laurie-Anne,

Effectivement, en cherchant mon bug, j'avais essayé tous les doctypes, et ai accidentellement laissé le doctype xhtml au lieu du doctype html 4 transitional. Merci pour la remarque donc ^^. Du coup mon nombre d'erreur passe automatiquement de 380 à 60. Je corriges les 60 erreurs restantes et je reviens vous voir ^^
Re-bonjour à tous !

Donc j'ai corrigé le maximum d'erreurs que j'ai pu. Et malheureusement pas toutes, comme en témoigne cette page http://validator.w3.org/check?uri=http%3A%2F%2Fwww.civel.asso.fr&charset=%28detect+automatically%29&doctype=Inline&group=0 qui retourne ceci :
a écrit :
Errors found while checking this document as HTML 4.01 Transitional!
Result: 5 Errors, 71 warning(s)


Je ne peux pas corriger ces erreurs et ça m'embête un peu, peut être que vous pouvez m'aider, je m'explique :
Le site dispose d'une interface d'aministration d'où l'utilisateur peut modifier ses pages via un éditeur bien connu appelé "Tiny mce". Le problème est que cet éditeur ne semble pas travailler au même doctype que moi. Je travailles avec le doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> (également sur l'interface d'administration), donc les sauts de lignes devraient être <br> et non pas <br /> ( selon w3c ).
Or, Tiny mce place automatiquement des <br /> et converti même mes <br> en <br />. Ce qui génère automatiquement un nombre incommensurable d'erreurs.
J'ai donc fait une petite recherche qui m'a mené à ça : http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/doctype
et j'ai donc rajouté dans mon code, l'information doctype :
tinyMCE.init({
...
doctype : "<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'> 'http://www.w3.org/TR/html4/loose.dtd'>",
...

Malhreusement, rien ne change, et tiny mce ne semble pas vouloir s'adapter à mon doctype.


Bref ! Ces problèmes étant majoritairement des avertissements, et ne nuisant pas à l'affichage général de mon site, j'en reviens à mon premier mouton: Mon problème d'affichage dû à l'overflow. Quelqu'un a t-il peut être une idée ?

J'ajoute mes tests d'affichages effectués manuellement sur 4 navigateurs différents à l'aide de 2 ordinateurs personnels :
- Sur le premier ordinateur :
a écrit :

Firefox 3.5.5 : Tout fonctionne parfaitement bien : c'est l'affichage que je souhaiterais.
Internet Explorer 6.0.2900.2180.xpsp_sp2_gdr.090804-1412 : Tu parles d'une version antédiluvienne !! Vous allez me dire : "Met à jour !", mais au moins cette version me permet de voir ce qu'obtiendront les gens "un peu" en retard sur leurs mise à jour, c'est à dire : RIEN. On à ici un bug complet de l'affichage dû à l'utilisation de Mootools. Arf !
Au passage, existe-t-il un script détectant la version du navigateur de l'utilisateur ? Ainsi, si l'utilisateur possède IE 6.0 et javascript désactivé, je peux peut être automatiquement lui suggérer de mettre à jour son navigateur ? C'est stupide comme comportement de développement, mais à l'état où j'en suis, c'est la solution qui me passe par l'esprit :s


- Sur le deuxième ordinateur :
a écrit :

Firefox 3.5.5 : Même navigateur que sur l'autre ordinateur, et pourtant, l'affichage est différent ! Les balises <p> sont interprétées visuellement comme des <br> : il y'a un seul saut de ligne au lieu de deux !! La scrollbar ne se cale cette fois pas automatiquement à droite mais respecte la largeur fixe du div. Voillà chose bien étrange d'obtenir 2 affichages différents pour 2 navigateurs de la même version !
Internet Explorer 8.0.6001.18702 : Cette fois encore, les balises <p> sont interprétées visuellement comme des balises <br>. Celà viendrait t-il de cet ordinateur ? Etrange :s. La barre de défilement quant à elle, n'est ni complètement calée sur la droite, ni à la même place que sur FF 3.5.5 sur ce même ordinateur !


Description faite, mon analyse reste sans mots, puisque je n'y comprend tout simplement rien !
Donc si quelqu'un reconnaît mon désespoir et ma confusion Smiley confus , je serais ravi d'avoir une ou deux suggestion pouvant m'aider à résoudre un bug mineur, qui me prend mon temps depuis 3 jours, et ainsi me faire retrouver le sourire Smiley lol ! huhu ^^

En tout cas, merci d'avoir au moins lu le message Smiley langue
Bonsoir,

Sincèrement je crois que les "erreurs" signalées par le validator w3c (qui, après tout, n'est qu'un robot) sont presque… anecdotiques à la vue de ton code (notamment le coup des <br/>).
On se croirait à Verdun (c'est de circonstance).
Si je n'ai qu'un seul conseil à te donner, c'est d'abandonner ton "éditeur" magique
et de faire ça avec le notepad (ou textedit enfin bref) et quelques tutos sous le coude : ton code de 300 lignes devrait tenir sur 50 lignes !
Commence donc par ça : brûle ton logiciel automatique…
Oops, je me suis peut être mal exprimé ^^

a écrit :

Commence donc par ça : brûle ton logiciel automatique…


Pour coder, j'utilise Pspad, et non pas de "logiciel magique" lol. Surtout pas dreamweaver ou autre outil de ce genre. Je ne suis pas 100% un crack question coding, j'ai tout appris seul, donc j'ai des lacunes, certes.

L'éditeur dont tu sembles parler est en fait un éditeur wysiwyg que j'ai placé dans l'interface d'administration afin que l'utilisateur ( pas moi ! ce site est une commande, il ne m'est pas destiné ! C'est pour quelqu'un qui à aucune notion html, qui ne souhaite pas en avoir ) puisse tout de même modifier le contenu de son site ! )

Cet éditeur, qui lorsqu'on l'utilise et valide un article via la page d'administration, génère automatiquement les <br /> non conformes à mon doctype. Ceci étant en effet un problème mineur, dont seul le robot verra la différence, peut-on en revenir à mon message initial ? Le problème d'affichage de scrollbar ...

Merci d'avance.
Sujet clos
Aller à