S'identifier - S'inscrire - Ecrire un article - Contact

Problème avec le modèle Ondine sous Internet Explorer -- résolu

IE, IE, IE... Une nouvelle onomatopée pour désigner un rire jaune ?

Par guillaume • Aide • Mercredi 23/08/2006 • 31 commentaires  • Lu 5545 fois • Version imprimable

Mots-clés : , , , ,


[Résumé de l'épisode précédent (pour ceux qui étaient en vacances) :
Boudant le club Med et la piscine de leblase, Guillaume avait choisi cette année de passer une partie de ses vacances à bidouiller son blog. Il a ainsi pu réaliser de substantielles économies de mélange 2 temps pour sa mobylette, participant ainsi à la réduction de la facture pétrolière de notre pays au moment même où DgeorgesBouch se félicitait de l'impact positif de l'actualité récente sur les cours du brut.
Après avoir réinvesti une partie de ces économies dans une fantasque compagnie de prospection minière que Stéphane venait de créer, il avait abandonné son combat donquichottesque contre les 60 % d'internautes qui persistent à utiliser IE, délaissant le modèle et adoptant pour TouraineBlogs le modèle Ondine.
En pleine canicule, après de longues heures de bidouillage qu'il avait généreusement arrosées de vin frais, il lui avait fallu lutter contre les pulsions meurtrières qu'il avait ressenties en découvrant que RDC large avait été rendu compatible avec IE deux jours après qu'il ait abandonné ce modèle...
]

Episode 2 : où l'on découvre que même avec Ondine, rien n'est simple...

(L'action se passe dans une cave à vins où Guillaume tente de se consoler au Chinon)

Guillaume : Ondine, pourquoi m'as tu fait ça ?
Ondine (l'air innocent) : mais j'ai rien fait moi
Guillaume : Si. Une Touraineblogueuse© vient de me rapporter que tu t'amuses à planquer ma colonne de gauche tout en bas du blog.
Ondine : (faussement outrée) N'importe quoi !
Guillaume (montrant deux photos) : Inutile de nier, j'ai des preuves :




Ondine : En même temps ta Touraineblogueuse©, elle n'a qu'a utiliser Firefox. Et puis c'est qui d'abord celle là ?
Guillaume (feignant de n'avoir pas entendu la seconde partie de la question) : C'est pas faux.
(Sans doute sous l'emprise d'un état alcoolique, Guillaume se met subitement à parler Volapük)
Pour l'instant elle utilise IE 6.0 sous Win XP.

Guillaume se tourne alors vers Déclic qui passait par là.


Guillaume : Dis moi Déclic, j'espère que toi au moins tu ne fous pas en l'air la mise en page de VinsdeLoire.info.
Declic (visiblement embarassé par la question) : Euh... on en reparle un autre jour ? Je dois filer, j'ai rendez-vous place de Valois.

Ondine et Déclic quittent la scène. Le jour décline. Guillaume reste seul au milieu des cadavres de bouteilles vides.

PUB :
Retrouvez bientôt la suite des aventures d'Ondine, Déclic et tous vos héros préférés dans "Viabloga, le livre".
En vente dans toutes les bonnes librairies. Téléchargeable gratuitement ici même.

D'autres articles sur des thèmes similaires :


Commentaires

par OlivierMG le Mercredi 23/08/2006 à 20:48

OlivierMG Mes modèles personnalisés sont construits sur Ondine. En général, c'est un modèle très éprouvé et je n'ai quasiment j'amais eu de problème de compatibilité, y compris sous IE windows.

Je me souviens quand même avoir eu le même problème que toi il y a longtemps. Je crois que ça venait d'un bloc du type "Recherche". Mais le problème avait dû être corrigé à l'époque. Cela peut venir aussi bien sûr de blocs externes, notamment des javascript. Il faut que tu fasses des essais en les retirant un par un, pour voir quel bloc pose problème. Quand tu auras isoler le bloc qui fait foirer la mise en page, il sera plus facile de voir ce qui pose problème.

Entourer un bloc javascript de balises < object class=location id!=form > < /object > est pas mal aussi.

PS : est-ce que ton Mac a un processeur Intel ? si c'est le cas je te conseille d'essayer "parallels desktop" pour faire des tests d'affichage de tes blogs sous IE et firefox windows. Windows tourne alors en effet dans une fenêtre du Mac (ou en plein écran) à la même vitesse que sur PC (merci la virtualisation) et cerise sur le gâteau : comme la connexion internet est filtrée par le Mac : pas de virus !! c'est très impressionnant, maintenant il faut avoir un Mac pour faire tourner windows sainement sans aucun besoin d'antivirus... Si tu as un Mac PowerPC, il te reste VirtualPC pour faire des essais d'affichage à chaque fois que tu changes quelque chose dans la mise en page.


Re: par guillaume le Mercredi 23/08/2006 à 23:49

guillaume Pas simple tout ça...

J'ai trouvé ça qui trainait devant l'image "comment participer ?" : <div style="text-align:center">.
 Je ne sais pas trop ce que ça foutait là ni même qui l'a mis là (Ah bon ? C'est forcément moi ?) mais dans le doute j'ai enlevé.

Sinon l'image elle-même est déjà maîtrisée par un width="165" height="74", donc je ne pense pas que le problème vienne de là.

Entourer un bloc javascript de balises < object class=location id!=form > < /object > est pas mal aussi.

Euh... A jeûn, je ne parle pas Volapük. Ça sert à quoi ce machin ?
T'accordant une confiance aveugle, j'insère le bidule. On verra bien ;-)
PS : est-ce que ton Mac a un processeur Intel ?

Ben non je ne pense pas. Mon mac, c'est une demi-boule blanche avec un écran plat au bout d'un long cou argenté. Ça date de 2003 donc avant le mariage entre la pomme et la puce me semble-t-il. Mais je ne saurais pas être beaucoup plus bavard sur ce sujet trop technique pour moi.
Quand je teste mes blogs sous IE (IE 5.2 pour OS X), tout marche bien. Et j'avoue ne pas avoir très envie d'installer Virtual PC pour tester chacune de mes bidouilles.

Idéalement -mais est-ce techniquement réalisable ?- il serait intéressant qu'un système de contrôle prévienne les Viablogueurs lorsqu'une image, un tableau, un objet quelconque... risque de dépasser et de foutre en l'air la mise en page.

Ça me semble ennuyeux que le simple ajout d'un objet dans la colonne, même sans avoir personnalisé le modèle, puisse tout dérégler...


Je remercie d'avance les aimables testeurs qui voudront jeter un oeil sur mes blogs depuis IE pour PC de me faire part de leurs remarques.


Re: Re: par OlivierMG le Jeudi 24/08/2006 à 08:17

OlivierMG je viens de tester sous IE windows : toujours le bordel...

Mon mac, c'est une demi-boule blanche avec un écran plat au bout d'un long cou argenté. Ça date de 2003 donc avant le mariage entre la pomme et la puce me semble-t-il
effectivement, c'est un Mac PowerPC.

Quand je teste mes blogs sous IE (IE 5.2 pour OS X), tout marche bien
le test sous IE Mac n'est pas suffisant, IE Windows étant trop différent maintenant, et la différence va fortement s'accentuer avec la sortie de IE7 prochainement.

Et j'avoue ne pas avoir très envie d'installer Virtual PC pour tester chacune de mes bidouilles.
je pense pourtant que c'est la meilleure solution.

Ça me semble ennuyeux que le simple ajout d'un objet dans la colonne, même sans avoir personnalisé le modèle, puisse tout dérégler...
c'est le prix à payer pour avoir un diversité de navigateurs et de plateformes.

une dernière observation au sujet de firefox : même firefox ne respecte pas totalement les standards. Il n'a, par exemple, jamais réussi le test Acid2 sur la qualité d'implémentation des standards dans un navigateur. Seul le webkit d'Apple l'a réussi ! (leblase : ;o)


Re: Re: par OlivierMG le Jeudi 24/08/2006 à 08:46

OlivierMG je crois que j'avais eu aussi ce problème de colonne de gauche décalée à cause d'une simple balise non refermée, certains navigateurs sont parfois sensibles..


Re: Re: par Jean-Luc le Jeudi 24/08/2006 à 17:12

Jean-Luc

J'ai trouvé ça qui trainait devant l'image "comment participer ?" : <div style="text-align:center">.
Je ne sais pas trop ce que ça foutait là ni même qui l'a mis là (Ah bon ? C'est forcément moi ?) mais dans le doute j'ai enlevé.
En l'occurrence ce devait être moi si tu t'es inspiré du code d'Isabelle ou de ce site. Cela permet de centrer le bloc dans la colonne. Penses à supprimer le </div> qui referme cette balise.
Sinon l'image elle-même est déjà maîtrisée par un width="165" height="74", donc je ne pense pas que le problème vienne de là.
Il vaut mieux réduire l'image sous Photoshop (ou un autre logiciel de retouche d'images) que de forcer sa réduction avec un width qui dégrade le résultat :




Re: par guillaume le Jeudi 24/08/2006 à 00:04

guillaume

Entourer un bloc javascript de balises < object class=location id!=form > < /object > est pas mal aussi.

Euh...

Ça s'utilise comment ?

J'ai tenté :
< object class=location id!=form >
<script type="text/javascript">
[contenu du script]
</script>
</object>

Mais visiblement ça ne fonctionne pas comme ça :



Re: Re: par OlivierMG le Jeudi 24/08/2006 à 08:04

OlivierMG c'est ma faute : j'avais mis un espace avant "object" et un autre après "form" et il ne faut pas... la syntaxe exacte est : <object class=location id!=form>



Re: Re: Re: par guillaume le Jeudi 24/08/2006 à 14:33

guillaume Merci.

J'ai encadré tous mes scripts avec <object class=location id!=form>...</object>

Au cas où, j'ai fait la même chose sur VinsdeLoire.info, en priant Bacchus, Dyonisos et Saint Vincent pour que Déclic ne fasse les mêmes dégâts qu'Ondine...

J'espère que c'est mieux parce qu'à part ça, je ne sais pas quoi essayer d'autre et je me sens un peu désemparé...


Re: Re: Re: Re: par OlivierMG le Jeudi 24/08/2006 à 14:46

OlivierMG désolé, mais il y a toujours le même problème..
et sur vinsdeloire aussi..

au moins, le bloc qui pose problème est commun aux deux blogs, tu devrais pouvoir plus facilement l'identifier.

enlève les blocs un par un pour voir lequel pose problème.
à chaque retrait d'un bloc, met moi un commentaire en réponse pour que je sois prévenu et que j'aille vérifier si ça va mieux.


Re: Re: Re: Re: par OlivierMG le Jeudi 24/08/2006 à 14:52

OlivierMG

comme tu peux le voir sur la capture, le bloc de recherche a l'air d'être plus large que la colonne (sur vinsdeloire). Tu peux peut-être commencer à enlever ce bloc pour voir si c'est le fautif.


Re: Re: Re: Re: Re: par guillaume le Jeudi 24/08/2006 à 15:04

guillaume Hop ! Y a plus de bloc recherche


Re: Re: Re: Re: Re: Re: par OlivierMG le Jeudi 24/08/2006 à 15:10

OlivierMG rien n'a changé sur les deux blogs. Au fait, tu as aussi le problème dans toutes les pages intérieures, le bloc/code qui pose problème se situe donc là aussi. ça peut t'aider à le repérer si ta maquette est différente dans les pages "autres".

essaye un autre bloc et préviens moi !
(je te conseille de ne pas remettre pour l'instant le bloc de recherche, au cas où le problème vienne quand même de là en plus d'un autre bloc à problème..)


Strip Tease par guillaume le Jeudi 24/08/2006 à 15:45

guillaume Et hop, j'ai viré les pubs de la colonne


Re: Strip Tease par OlivierMG le Jeudi 24/08/2006 à 15:52

OlivierMG pas de changement sur les deux blogs, ni en page sommaire, ni en pages autres..


Re: Re: Strip Tease par guillaume le Jeudi 24/08/2006 à 15:59

guillaume je vire la bannière de haut de page, me demandant si il n interagit pas avec la colonne de gauche


Re: Re: Re: Strip Tease par OlivierMG le Jeudi 24/08/2006 à 16:05

OlivierMG super !

tout est bon sur les deux blogs..


Re: Re: Re: Re: Strip Tease par guillaume le Jeudi 24/08/2006 à 16:12

guillaume Arf. Bon bah je remets tout le bousin sauf la bannière en haut des articles.

Y a moyen de faire quelque chose pour la remettre sans tout chambouler ?


Re: Re: Re: Re: Re: Strip Tease par guillaume le Jeudi 24/08/2006 à 16:37

guillaume J'avais installé un script qui me permettait :
- de faire tourner différentes bannières
- de choisir un prorata d affichage pour chacune
- d avoir des stats d affichage et de clics sortants pour chacune d entre elles

Voici le script en question :

<object class=location id!=form>
<script type="text/javascript">
var bseuri = 'http://script.banstex.com/script/affichagejs.aspx?zid=5882&rnd=' + new String (Math.random()).substring (2, 11);
document.write('<scr'+'ipt language="javascript" src="'+bseuri+'"></scr'+'ipt>');
</script>
</object>

A priori, il ne contient que des bannières 468 X 60 qui ne devraient pas poser de problemes.

Y a t il un moyen de contourner l obstacle ?


Re: Re: Re: Re: Re: Strip Tease par Jean-Luc le Jeudi 24/08/2006 à 16:55

Jean-Luc Il faut que tu limites toutes tes bannières qui s'affichent dans la colonne centrale à un width="470" (vérifies la largeur maxi) et toutes celles de la colonne latérale à un width="190" (vérifies aussi).

En choisissant un modèle aux largeurs de colonnes fixes, tu n'as pas réglé le problème de IE, tu t'es donné seulement le moyen de le maîtriser ! En l'occurrence c'est au responsable du site de s'assurer du bon affichage sous IE, et de faire le nécessaire. Le piège c'est que Firefox pallie à ce problème et que si on ne vérifie pas sous IE, cela nous échappe.

Il pourrait peut-être y avoir une solution du type réduction automatique des images, paramétrée suivant les modèles, ou une alerte lors des téléchargements d'images, suivant l'exploitation. Ce n'est pas aussi évident et puis il y a les scripts qui, comme dans ton cas, affichent des bannières stockées ailleurs. Le mieux, c'est de s'assurer que l'affichage respectera systématiquement la largeur de la colonne. Dans le script des bannières des Influenceurs, il y a systématiquement (au moins depuis que je m'en occupe) le paramètre width indiqué da façon à pouvoir le modifier, si besoin, suivant le blog où elle est insérée...


par leblase le Mercredi 23/08/2006 à 23:43

leblase Du haut de son hélico aux couleurs de Typepad, leblase longeait les interminables rangées de vignobles appartenant à Guillaume. Il savait que des puissances extérieures tenteraient de favoriser les vins Australiens dès le début de l'automne, aussi ne fut-il pas surpris d'observer une mobylette (un engin totalement désuet) abandonnée à quelques kilomètres de Chinon.
Celà ne pouvait appartenir qu'à Guillaume, dont l'esprit d'ouverture continuait de le pousser à autoriser la navigation sous IE, alors que ce navigateur est capable de résister aussi bien à la bouillie bordelaise qu'aux sulfamides.
Pendant un instant, il se demanda s'il devait partir à la recherche des restes pantelants du patron de VinsdeLoire.
L'ennui, c'est qu'il devait continuer à sauver le monde, habilement déguisé en typepadeux, alors qu'il était plutôt Viablogueux.
Un éclat lointain l'alerta: tapis derrière une rangée de hêtres , trois Hummer aux couleurs de Mac, Apple et Logiciel Mac.com, spécialistes d'Ondine, s'apprêtaient à intervenir.
Rassuré, il appuya sur le manche, en direction de Chablis.


Re: par guillaume le Jeudi 24/08/2006 à 14:45

guillaume Après la tragi-comédie, la comédie et même les soap séries, on tente quoi pour demain ?

La hot line en bouts rimés ?

Proposition de slogan :

Viabloga, la seule plateforme de blogs qui propose une hotline agréée par le ministère de la Culture.


par Stephane le Mercredi 23/08/2006 à 23:45

Stephane Effectivement, ce n'est pas un article en particulier qui pose problème, donc c'est l'un des blocs à gauche qui contient un élément trop large.


Re: par guillaume le Jeudi 24/08/2006 à 01:01

guillaume Parmi les bannières de Touraine blogs qui défilent aléatoirement dans la colonne, j'en ai trouvé une de 200 pixels de large. Je l'ai réduite. J'espère que ça suffira à résoudre les problèmes.

Pourrait-on trouver un moyen d'alerter les utilisateurs pour éviter de tels problèmes ?


rebelotte.. par OlivierMG le Vendredi 25/08/2006 à 10:07

OlivierMG désolé d'apporter de nouveau des mauvaises nouvelles, mais tes deux blogs (sommaires et pages autres) ont encore la colonne de gauche déplacée sous la colonne principale sous IE. (heureusement que j'avais pas fermé ma fenêtre windows hier soir..)


Re: rebelotte.. par guillaume le Vendredi 25/08/2006 à 10:20

guillaume Merci de ta vigilance.

A la suite de l'enquête menée grâce à toi, j'avais cru que le problème venait de ce script.

Hier soir, j'ai donc remis des bannières avec un autre script.

Une bannière Google Adsense sur Vinsdeloire et une bannière promobenef sur Touraineblogs.

Je viens de les enlever ce qui normalement a du tout remettre en ordre (??).

Dans un cas comme dans l'autre, il s'agit de bannières 468 X60 qui, théoriquement, ne devraient pas poser de problèmes.

- D'où peut venir le problème ?

- Est il impossible d'insérer une bannière 468 X 60 dans le bloc central au dessus des articles ?

- Peut-on envisager que ce problème puisse être résolu en insérant le script dans un texte et en insérant ensuite le texte dans dans le bloc central au dessus des articles ?

Merci beaucoup Olivier de ta patience et vivement la sortie d'Internet Explorer 7... dont je vous propose de télécharger ici la version bêta (et même gros bêta)...


Re: Re: rebelotte.. par OlivierMG le Vendredi 25/08/2006 à 10:32

OlivierMG tout est bon maintenant effectivement.

- Peut-on envisager que ce problème puisse être résolu en insérant le script dans un texte et en insérant ensuite le texte dans dans le bloc central au dessus des articles ?


le seul problème de cette solution si je me souviens bien, est que le titre du texte apparaîtra obligatoirement en haut du bloc (à confirmer), mais c'est peut-être plus un désagrément qu'un réel problème. Quant à résoudre le problème initial, je ne sais pas pour ma part..


Re: Re: Re: rebelotte.. par guillaume le Vendredi 25/08/2006 à 19:22

guillaume J'ai testé ca ne fonctionne pas.

Non seulement ça affiche le titre masis en plus ça n'affiche pas les bannières.

Je ne vois donc pas de solution...

Et je ne comprends toujours pas pourquoi il y a ce problème de mise en page alors que les bannières ne dépassent pas 468 pixels de large ce qui, me semblait-il, est inférieur à la taille du bloc central au dessus des articles....


Re: Re: Re: Re: rebelotte.. par Jean-Luc le Vendredi 25/08/2006 à 21:08

Jean-Luc Le problème c'est la CSS de ce modèle qui prévoit déjà une "marge" de 20px pour le contenu de la colonne principale sur les 500px de la largeur maxi PLUS, pour ce bloc central, une marge supplémentaire de 20px (de chaque côté ?). Tu ne disposes donc au mieux que de 460px utilisables (voire 440) sur ce bloc central, et non les 468px des bannières diffusées par ton script, soit l'affichage suivant sur Firefox :



D'où le binz sous IE - et sous Firefox !

Comme apparemment le service que tu utilises ne permet pas de modifier la largeur des bannières ni d'intervenir sur le script pour limiter l'affichage (du moins, moi je n'y suis pas parvenu), il ne te reste plus qu'à personnaliser ton modèle, juste pour réduire la marge latérale du bloc central de 20px à 5px. C'est tout simple et cela règle ton problème :



Il suffit de réduire la valeur de padding de 20px à 5px pour sbtop :



Voilà, c'est tout ce que j'ai à te proposer. J'ai testé sur le site http://jlb.en-fete.org/ ...


Re: Re: Re: Re: Re: rebelotte.. par guillaume le Samedi 26/08/2006 à 12:04

guillaume Yes !!

Merci jlb

Ton explication, digne de figurer dans le prochain "Bidouiller les modèles pour les nuls" est parfaitement de mon niveau.

Et j'adore les explications que j'arrive à comprendre.

Au dela de mon cas personnel, est-ce qu'il serait envisageable (c'est une simple question, je n'ai pas d'idée de la quantité de travail que cela représenterait) de publier un jour quelques éléments de référence sur le bidouillage des modèles.

Lorsqu'il m'est arrivé de jeter un oeil aux modèles, j'avoue ne pas avoir compris par quel bout les prendre. Comment deviner par exemple à quel endroit est définie la marge du bloc central ?

Peut-être que les spécialistes du bidouillage du modèle pourraient s'atteler à insérer quelques lignes de commentaires à l'intérieur des modèles ? ou un lien vers un site de référence présentant "les CSS pour les nuls"

Questions subsidiaire :

Sur Vinsdeloire.info, j'affiche des bannières en pied de page des articles. Est ce que je dispose des 468 px nécessaires ?
Si je te lis bien,

la CSS de ce modèle qui prévoit déjà une "marge" de 20px pour le contenu de la colonne principale sur les 500px de la largeur maxi
C'est le cas seulement pour Ondine ? ou aussi pour Déclic ?

C'est seulement une marge à gauche ? ou marge à gauche + marge à droite ?


Re: Re: Re: Re: Re: Re: rebelotte.. par Jean-Luc le Samedi 26/08/2006 à 12:44

Jean-Luc Rapidement, car je suis attendu au BarCampEarth Place de Valois.

Ondine et Déclic ont la même structure : dans le corps des articles ou des textes, tu disposes de 480px de largeur exploitable.

Pour la personnalisation des modèles, c'est vrai qu'il faudrait une présentation sommaire de leur structure et comment ça fonctionne. C'est à la fois pas très compliqué et quand même chiant car il faut être très rigoureux au niveau de la syntaxe mais c'est plein de ressources - très accessibles ! Je rappelle qu'un gros boulot de documentation a été réalisé conjointement par Delphine et Stéphane concernant les modèles de mise en page. Ensuite il suffit de se lancer et d'y aller prudemment - ou franco comme lekritikeur !


Re: Re: Re: Re: Re: Re: Re: rebelotte.. par guillaume le Dimanche 27/08/2006 à 18:39

guillaume Merci jlb,

J'ai réussi à installer des modèles personnalisés sur les 2 blogs et à réduire la marge du bloc central.

Désormais, tout devrait fonctionner.

Sur Déclic, j'ai même réussi à installer à la main la fonction d'impression des articles.

Je ne suis pas encore au niveau du critikeur mais déjà je m'épate !



Session

Pour participer plus facilement, ouvrez une session :

Identifiant de
mon blog
Nom d'utilisateur
Mot de passe

Si vous avez déjà un blog sur ViaBloga ou si vous avez ouvert un compte sur l'un d'entre eux, vous pouvez vous identifier avec votre nom d'utilisateur et mot de passe en précisant d'abord l'identifiant de votre blog.

S'inscrire

Discussions actives (+ commentaire)


Archives par mois