Yannick Francois
48 lines
4.8 KiB
HTML
48 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta name="generator" content="Hugo 0.22.1" />
|
||
<meta charset="utf-8">
|
||
<title>Yannick François - Elsif.fr</title>
|
||
|
||
<meta name="DC.title" content="elsif.fr, site de Yannick François aka yaf (ou ya_f)."/>
|
||
<meta name="description" content="Le site de Yannick François. Développeur Senior, Responsable Produit, Pédagogue. Je travail chez Scopyleft"/>
|
||
<meta name="keywords" content="code, développement, programmation, apprentissage, apprendre, lean, agile, logiciel, tdd, objet, refactoring, libre, creative commons, linux, unix"/>
|
||
<meta name="author" content="Yannick François, https://elsif.fr"/>
|
||
<meta name="designer" content="Yannick François, https://elsif.fr"/>
|
||
<meta name="geo.placename" content="Poissy, Ile de france, France"/>
|
||
<meta name="robots" content="index,follow" />
|
||
<meta name="language" content="French" />
|
||
<meta name="HandheldFriendly" content="True" />
|
||
<meta name="MobileOptimized" content="320" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
|
||
<link rel="index" title="Yannick François / Développeur / Pédagogue" href="index.html" />
|
||
<link rel="stylesheet" href="/css/201912-elsif.css" media="all"/>
|
||
<link rel="alternate" type="application/rss" href="/feed.xml" title="elsif.fr/feed" />
|
||
</head>
|
||
<body>
|
||
<article>
|
||
<h1>Et encore un hack tout vilain</h1>
|
||
<p>Ca devient pénible: voilà encore un problème avec IE. J’avais déjà <a href="http://typouype.org/articles/2006/05/04/ie-mon-amour">décortiqué un de mes problème avec sa façon de traiter les childNodes</a>, voilà maintenant un problème avec son traitement de CSS.</p>
|
||
<p>Le context: Je voulais mettre en place un système de “message” (d’erreur ou d’info) sur mes interfaces web. Ces messages ne doivent pas ouvrir de popup (javascript ou nouvelle fenêtre) parce que je ne veux pas ;-) NA !</p>
|
||
<p>Donc j’ouvre <a href="http://typouype.org/articles/2006/06/08/scite-le-bonus-indispensable">mon éditeur favori: SciTE</a>, je crée une petite page simple pour mettre en place mon systême de message. Bien, je par donc sur une fonction javascript show_message(monMessage) qui vas créer un DIV avec un ID en fonction du type de message (erreur, info). Par le biais de cet ID je vais faire le CSS qui vas bien. Pour l’info, un fond bleu, pour l’erreur un fond rouge. Classique.</p>
|
||
<p>Ajouter un DIV au body de ma page n’est pas sorcier. Maintenant il faut que je le place, par dessus mon contenu, je prend la décision de le placer en bas, sur toute la largeur. Alors voyons, je vais utiliser la propriété CSS position:fixed. Ca fixera le DIV en bas, tranquille et par dessus les autres. Parfait. (en bas du billet j’ai mis les fichiers qui m’on servi de test)</p>
|
||
<p>Essayons quand même sous IE car les personnes ayant fait cette appli à l’époque ne l’on fait que sous IE et elle ne passe pas sur des navigateur recents (pour le moment, j’y travail ;-) ).</p>
|
||
<p>Oulala ! Encore heureux que j’ajoute le DIV de message en bas de la page, parce que le position:fixed sous IE se transforme en position:relative :-/ (voir static ?)</p>
|
||
<p>Bon c’est pas gagné. Je regarde divers solution de Hack pour faire marcher ça. Moui , voyons, moui. Bon finalement deuxième problème, le fameux SELECT qui passe par dessus le DIV ! grrr. (je ferais un autre billet la dessus).</p>
|
||
<p>Finalement je vais me rabattre sur un IFRAME. C’est moche, c’est mal, mais je note quelque part que quand tout les écran fonctionnerons sous des navigateur recents, je viendrais changer tout ça. En gros me voilà avec une solution bancale, pas propre (même le rendu graphique est pas super), pas souple (pour le moment je me suis pas casser la tête pour le style appliquer dans le IFRAME): LE BONHEUR !</p>
|
||
<p>Encore une fois MERCI IE d’être un dinosaure tellement gros qu’on est obligé d’essayer de faire avec ! J’ai passé une très bonne après midi !</p>
|
||
<ul>
|
||
<li><p><a href="http://zone.typouype.org/message_test_div.html">la page qui marche sous un navigateur recent uniquement, mais proprement</a></p></li>
|
||
<li><p><a href="http://zone.typouype.org/message_test_iframe.html">la page qui marche avec tout les navigateur (enfin, disons le dinosaure et les autres plus recent) mais avec un sale IFRAME et des Hack spécifique pour le vieux.</a></p></li>
|
||
</ul>
|
||
<p>Un grand merci au divers site que j’ai parcouru pour comparer les hacks disponible sur IE. Et surtout à <a href="http://annevankesteren.nl/test/examples/ie/position-fixed.html">annevankesteren.nl</a> qui contient un exemple simple sur lequel je me suis basé.</p>
|
||
</article>
|
||
<footer>
|
||
<ul>
|
||
</ul>
|
||
</footer>
|
||
</body>
|
||
</html>
|
||
|