Problème de compatibilité IE 6 et Firefox

Question

Salut all,

Je viens de me rendre compte que mes pages internet (enfin certaine) ne s'affichent pas correctement sous IE 6 et pas de probèle en revanche sur Firefox !

http://counterstrike6.free.fr/Pages/Software/Prog/LangageVBNET.htm

Tester par vous meme ^^

Comment résoudre ce problème assez embétant pour ceux qui utilise IE6 :D :)

Merci

huberdine · Answer

ie n'interprète pas les <table width="100%"> de la même manière que firefox :
firefox calcule sur l'espace restant
ie calcule sur la largeur totale de ta page
donc si tu fais des tableaux imbriqués, fais attention aux largeurs que tu donnes.

fdiedler2000 · Answer

Euh excuse mais j'ai pas compris ! En gros je suis obliger de tout recommencer mes pages ? et comment je peux gerer ca ? (dsl je suis Newbies dans le domaine ^^)

huberdine · Answer

en gros, dans ton code source, tu mets des tableaux dans d'autres tableaux :

...

le problème avec IE, c'est que à chaque fois que tu lui indique width="100%" le 100% fait référence à la largeur totale disponible dans ton navigateur (100% de la largeur de la fenêtre IE). En revanche, firefox calcule à partir de la largeur disponible, qui est elle même fonction des largeurs déjà attribuées aux autres tableaux. D'une manière générale, des tableaux dans d'autres tableaux, c'est pas génial. De manière générale, on utilise plutôt des calques ( ) avec des styles associés. Je crains que tu doives modifier pas mal de choses pour que ça passe sous IE si tu reste en largeur relative. Si tu passe en largeur absolue, tu n'auras pas tout à refaire, mais il faudra faire un choix de résolution minimale pour le site.

cs_zatt · Answer

Slt,

Le canevas (fond du document dans le navigateur) n'est effectivement pas le même sous IE et FF (quelques pixels de plus sous FF), et l'interprétation non plus (IE est beaucoup plus permissif, pour ne pas dire moins respectueux); les soucis sont beaucoup plus fréquents dans l'autre sens, de IE vers FF.
Et il est vrai que la mise en page par tableau est largement dépréciée, au profit du css, ce qui veut dire remplacer toutes les "tables" par des "div". Si tu t'y tentes, testes plutôt en priorité sur FireFox, pour moins de surprises.
Ta page n'est plus visible, déjà en chantier ?

fdiedler2000 · Answer

Salut vous deux,

SI ma page est toujours visible :
http://counterstrike6.free.fr/Pages/Software/Prog/LangageVBNET.htm

Vous pouvez me dire qu'est ce qui est le mieux pour mes pages (toutes issus d'un meme modele heureusement) et comment je dois faire le plus facilement possible avec DW car moi je comprends pas grands chose à tout ca !

Désolé de mon niveau pitoyable en Html et PHP et merci de vos aides

cs_zatt · Answer

te confirme que la page ne passe pas (IE 7, FF 1.5) (par contre tu devrais mettre des pages d'index sur les racines de tes répertoires ... ) quelques tutos DW: http://www.cyberformateur.com/support/dream/index.htm (après que ça soit plus facile... le mieux c'est quand même de mettre les mains dans le code) recherches sur "css" aussi si tu veux mettre en place des div

fdiedler2000 · Answer

Ca marche pas sur FF 1.5 ??
Le modele de mon site est basée sur un kit graphique.
Estce que je devrais tout refaire ou pas ?As ton avis ca va etre dur ou pas d'apres le modèle de mon site ?
Cdl ++

fdiedler2000 · Answer

Rebonjour, je viens de regarder le code source de ma page internet et puis j'ai déjà des calcques dans mes pages ! (j'ai plein de balises 
). SInon pouvez vous m'expliquer ce que je dois faire pour résoudre ce problème (je travaille avec DreamWeaver)
Merci ++

cs_zatt · Answer

Petite précision: uniquement la page que tu indiques ne s'affiche pas (pour toutes les autres c'est bon, et la mise en page est correcte IE7, FF1.5).
Ton kit fonctionnait-il auparavant et l'as tu modifié sur cette page ? 
Si tu veux modifier le style d'un kit existant, il va falloir t'approprier le code existant, et un minimum de connaissances (rq: le design est bien souvent externalisé par rapport au code).
Ça peut représenter pas mal de travail, bon courage ...

fdiedler2000 · Answer

Salut,

Vous pouvez essayer de retester ma page plus haute dans IE 5, IE 6 ou IE7 et dans FF 1.5 et FF 2.0 ?

J'ai bidouiller un peu le code et je voudrais savoir si ca passe mieux.

Merci

cs_zatt · Answer

Salut,
sous FF oui, sous IE ton cadre principal (celui du contenu) n'est pas redimensionné en relatif sur la largeur de l'écran (ou plutôt si, mais il se redimensionne par la suite, en plus large - donc tu as du agir directement sur la page, au lieu du design principal du site).
Un petit décalage aussi au niveau d'un bloc de menu, en fonction de la taille de la fenêtre (le titre passe sur 2 lignes, la largeur du bloc menu étant alors insuffisante pour tout afficher.)

fdiedler2000 · Answer

Je suis pas trop terme technique vu que j'y connais rien mais en gros sur IE je suppose que tu as une scrollbar horizontale en plus, les menus de gauches sont plus petits (d'ou parfois il sont sur deux lignes) et la cadre de droite (celui avec le cours de programmation) doit etre plus grand (d'où la scrollbar horizontale)...

Mais y'a plus la grosse déformation de tout le site comme avant j'espère?

Sinon ta tester avec IE 6 ou IE 7 ? et avec FF 1.5 ou FF 2.0 ?

Thanks

cs_zatt · Answer

IE7 FF1.5 (dernière version proposée)
tout ce que tu dis, donc ta page n'est plus homogène avec l'ensemble du site (le principe du template n'est plus respecté, tout le design devrait être placé au même endroit)
et pour le menu, il faudrait soit que tu l'élargisses (le problème n'étant pas les 2 lignes, mais toute l'image du bloc est déformée - testes par toi même), soit lui adapter la longueur du texte.

fdiedler2000 · Answer

oui je vais reduire le texte comme ca ca reglera ce probleme.
Moi je uis sous FF 2.0 ca marche tres bien et sous IE 6.0 j'ai comme toi.
Donc est ce qu'il te demande si tu veux activer le contenu bloquer dans ta fenetre IE quand tu clique sur mon lien de ce forum ? Car si oui, bah laisse le bloqué et tu verras que ca marche tres bien.

En fait ce qui déforme ou plutot agrandit la page du contenu c'est la coloration syntaxique implementée dans certaines pages. Donc si tu va dans la rubrique programmation et dans la partie Intruction, il n'y a pas de coloration syntaxique et donc normalement y'a pas de probleme ... mais vérifie ce que je raconte lol)

Et sinon on peut faire quoi pour regler le probleme ? (car dans FF ca marche toujours nickel c'est de la m**** IE lol)

cs_zatt · Answer

étranges, tu as des options de mise en forme dans ta fonction de coloration ?
si c'est la cas, pourquoi pas les supprimer ...

fdiedler2000 · Answer

Tu as vérifier par toi meme... je pense que c'est ca

Alors c'est simple je l'ai pris sur internet ce script et comme je comprends rien je suis pas pret de trouver ^^

Par contre veux tu que je t'envois le script que tu regardes un peu dedans ?

cs_zatt · Answer

euh ... [ ... Donne un poisson à un homme et tu le nourris pour un jour , apprend lui à pêcher et tu le nourris pour toujours ...].
Le but pour toi n'est il pas de savoir le faire ? Tu arrives déjà à localiser l'erreur, reste plus que la mise en page, courage ...

PS:Passes tout de même ton bout de code si tu veux, je jette un coup d'oeil quand j'ai un moment

fdiedler2000 · Answer

Donc j'ai regarder ca de plus pres et je pense qu'il y a de la mise en forme dans le script.

Je penses que c'est dans le .dp-Hhighlighter que ca foire. J'ai modifier le "width" et ca change rien pour notre probleme. J'ai enlever le "overflow" et ca plante dans FF et dans IE ! J'ai modifier le "margin" et ca change rien à notre probleme.

Pour le script en entier, il me faudrait ton mail...

Par contre si tu connais un moyen de faire de la coloration syntaxique sans TextArea, dis le moi !

Merci ^^

/* Main style for the table */
.dp-highlighter
{
    font-family: "Courier New" , Courier, mono;
    font-size: 12px;
    border: 1px solid #2B91AF;
    background-color: #fff;
    width: 98%;
    overflow: auto;
    margin: 18px 0px 18px 0px;
}
.dp-highlighter .bar
{
    padding-left: 45px;
}
.dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar
{
    padding-left: 0px;
}
.dp-highlighter ol
{
    margin: 0px 0px 1px 45px; /* 1px bottom margin seems to fix occasional Firefox scrolling */
    padding: 0px;
    color: #2B91AF;
}
.dp-highlighter.nogutter ol
{
    list-style-type: none;
    margin-left: 0px;
}
.dp-highlighter ol li, .dp-highlighter .columns div
{
    border-left: 3px solid #6CE26C;
    background-color: #fff;
    padding-left: 10px;
    line-height: 14px;
}
.dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div
{
    border: 0;
}
.dp-highlighter .columns
{
    color: gray;
    overflow: hidden;
    width: 100%;
}
.dp-highlighter .columns div
{
    padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
    background-color: #f8f8f8;
}
.dp-highlighter ol li span
{
    color: Black;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
    margin: 0px;
}
.dp-highlighter.collapsed ol li
{
    display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing 
{
    border: none;
}
.dp-highlighter.printing .tools
{
    display: none !important;
}
.dp-highlighter.printing li
{
    display: list-item !important;
}
/* Language specific styles */

.dp-vb {}
.dp-vb .comment { color: green; }
.dp-vb .string { color: #804000; }
.dp-vb .preprocessor { color: gray; }
.dp-vb .keyword { color: blue; }

cs_zatt · Answer

.dp-highlighter .columns
{
    color: gray;
    overflow: hidden;
    width: 100%;
}

??

fdiedler2000 · Answer

??
Excuse je comprends pas... J'ai modifier le 100% en 50% puis 10% mais ca change rien du tout sur la page et ca plante toujours sur IE...

fdiedler2000 · Answer

Bon, j'ai toujours pas résolu mon soucis mais bon je suis trop nul c'est normal ^^ (pour quelqu'un qui n'a jamais touché du Html, PHP et javascript je suis content !)

J'ai bidouiller quelque chose en Javascript (et oui !!). En gros, si le mec est sur IE alors je désactive la coloration syntaxique comme ca plus de soucis. Si il est sur un autre navigateur alors j'active la coloration syntaxique. De plus sur la page
http://counterstrike6.free.fr/Pages/Software/Prog/index.htm

... je préviens l'utilisateur que la coloration syntaxique ne sera pas activé sous IE (si il est sous FF alors j'affiche pas la MsgBox). Et puis couronne le tout, une fois la fenetre affiché (pour ceux sous IE) elle ne s'affichera plus tans qu'il ne quitte pas mon site ! ^^ cool non ?

Enfin je suis pas fier car c'est du bidouillage !

Pouvez vous tester sur ces pages avec FF (toutes versions) et IE (toutes versions)
http://counterstrike6.free.fr/Pages/Software/Prog/LangageVBNET.htm (Pour le test du graphisme de la page)
http://counterstrike6.free.fr/Pages/Software/Prog/index.htm (pour la MsgBox sous IE)

Merci encore

Problème de compatibilité IE 6 et Firefox

21 réponses

Votre réponse

Discussions similaires