Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[humour][hacks][long][fu2]IE 6 et les CSS

8 réponses
Avatar
François Battail
Bonjour,

Attention, x-post, suivi positionné sur
fr.comp.infosystemes.www.auteurs.

Voici toute l'histoire :

C'est sûr qu'IE est capricieux il est surtout tablivore alors forcément
quand on lui change son régime il a le hoquet. C'est sûr des
floats dans tous les coins, du positionnement relatif, bref autre chose
que des borders ou qu'un osé display:block, c'est franchement de la
provocation. Alors le fauve passe à l'attaque et sort son arsenal
impressionnant de dysfonctionnements et d'approximations en faisant
preuve d'une imagination quasi-inépuisable.

Mais voilà à force de ne pas évoluer, le temps permet d'analyser un peu
les réactions de la bête et certaines choses transparaissent. Oh bien
sûr c'est dans les recoins qu'il faut chercher, l'approche frontale ne
donnera rien.

Par exemple vous constatez avec surprise (en mode quirks) que IE ne sait
pas gérer margin-left: auto ; margin-right: auto, centrez le texte dans
le conteneur et hop, c'est pas tout neuf, mais ça donne bien une idée
de la nature déroutante des solutions en la matière. Et puis sinon il y
a aussi le travail admirable de Dean Edwards avec IE 7 qui exploite les
behaviours pour corriger de l'intérieur IE, pauvre IE il ne devait pas
s'attendre à cela !

Enfin le travail de Titan : http://www.positioniseverything.net ! Qui avec
acharnement met en évidence certains comportements et certaines
réactions de la bête. Ce sont des cas spécifiques mais il en ressort
des hacks fiables et des solutions bien connues de contournement.

Seulement voilà, la bête, bien que pas au top de l'évolution, a aussi
des ressources. A partir d'une certaine complexité ça devient du
n'importe quoi : du contenu qui disparaît, des couleurs qui ne sont pas
prises en compte, un positionnement qui se perd dans l'hyper espace et en
plus le tout sur la même page. La bête semble gagner... hum c'est mal
engagé tout ça... Voyons quand même les contres mesures en notre
possession.

Premier hack : le Holly hack. Très pratique quand des floats s'emmêlent
les pinceaux et également pour conserver du html sémantique puisque cela
permet aussi de faire l'auto-clear :) pour les navigateurs dignes de ce
nom on utilisera du generated content avec un sélecteur :after

/* Hack Holly \*/

.holly
{
height: 1% ;
}

/* */

Les commentaires sont significatifs car seul IE croit que c'est du code
alors que les autres interprètent (avec raison) l'ensemble comme un
commentaire à cause du '\'.


Deuxième hack, le HasLayout :

.hasLayout
{
zoom: 1 ;
}

Oui, c'est mal(c)(tm) une propriété CSS spécifique IE qui dit de zoomer
au rapport 1:1 :) en fait c'est peut être la propriété la plus utile
que IE nous offre : on s'approche du sublime, du miraculeux. J'exagère ?
Oui, des fois ça m'arrive, mais là c'est du vécu.

Récit d'une journée de boulot

Vous avez un menu tout à fait classique :

<ul id='#menu'>
<li>Accueil</li>
<li><a href='#'>Page 1</a></li>
<li><a href='#'>Page 2</a></li>
</ul>

Mais le conteneur est en float dans un layout un peu compliqué...
La bête est d'humeur facétieuse : il y a un espace vertical élevé
entre Accueil et Page 1 et ensuite un espace normal entre Page 1 et Page
2, irrationnel ? Oui un peu, d'autant plus que tous les margin et padding
de toutes les balises html avaient été mis à zéro préalablement,
la situation semble quelque peu désespérée ? Que nenni, Sainte
Holly veille sur nous :

<ul id='#menu' class='holly'>

fixé !

Vous avez un en-tête très classique :

<body>
<div id='header'>
...

Mais dedans du positionnement relatif et des formulaires fortement
stylés, vous avez en CSS, la bête ligne suivante :

#header
{
background-color: yellow ;
}

mais l'écran reste désespérément blanc... Je vois des incrédules,
j'avoue que je l'ai été pendant quelques temps mais Mozilla, Opera et
Konqueror affichaient du jaune, le clear cache n'en venait pas à bout
et une autre machine disait la même chose... Un truc aussi stupide qu'une
couleur de fond dans une div, j'ai même pas de float qui traîne dans le
coin, pas de z-index, ce n'est pas possible !

Si, si : une bête propriété CSS 1, deux ul, un form, un fieldset, deux
input, un label et voilà que notre vieux IE s'étrangle, ça fait peut
être trop de code xhtml valide en seule bouchée ? Notre IE n'aime pas
la qualité en quantité, il préfère son régime continu de <tr...><td...>
avec tout ces attributs html exotiques. Là, j'avoue que je n'étais pas
très fier sur ce coup mais Saint HasLayout :

<div id='header' class='hasLayout'>

fait véritablement des miracles, mieux que les lessives : il redonne
des couleurs.

Alors que Mozilla, Opera et Konqueror comprennent un text-align: right
pour un formulaire votre IE joue sa diva en collant à gauche ce dernier,
impossible de lui arracher ne serait-ce qu'un pixel vers la droite. Là le
moral en prend un sacré coup car Sainte Holly est inopérante...

Et puis... vient à l'esprit : si Saint HasLayout a le pouvoir de redonner
des couleurs aura-t-il la force de déplacer les forms ? Fébrilement le
texte est tapé : class='hasLayout', <esc>:wq (désolé je suis sous vim
;-) ) je me retourne anxieux vers mon Windows 2000, je vais faire
<ctrl>-F5 car je ne veux pas en plus que le cache ajoute à mes misères
et augmente le suspense qui est déjà insoutenable. <ctrl>-F5 donc, un
bruit inhabituel me surprend et je vois le formulaire sous l'emprise
d'une force inconnue mais certainement pas naturelle se propulser à
droite tellement fort, que j'ai pensé que mon deuxième écran allait
être fêlé.

Histoires vraies vécues aujourd'hui...

Bref ne vous découragez pas. En cas de problème incompréhensible,
tentez l'un et l'autre de ces hacks (ou les deux ensemble), ne cherchez
pas à comprendre ce qui peut bien se passer : c'est divin.

(Pour être franc : j'ai eu aussi quelques soucis avec Konqueror 3.3.0 et
avec Opera 7.5 mais rien d'aussi mystique qu'avec IE en mode "strict").

@+
fb
--
Plus fort que Matrix reloaded : IE6 désenvouté

8 réponses

Avatar
François Battail
Le Tue, 14 Sep 2004 00:01:54 +0200, kozaki a écrit :

On Mon, 13 Sep 2004 18:16:50 +0200, François Battail
wrote:




<snip />

Voici toute l'histoire :





<snip />

Bonjour,

merci de ne quoter que ce qui est nécessaire à la compréhension, nos
amis en RTC te seront reconnaissants :
(http://www.giromini.org/usenet-fr/repondre.html). Par ailleurs ta
signature est invalide : il faut mettre "-- " (tiret tiret espace)
pour que le mécanisme de suppression automatique puisse fonctionner avec
un lecteur de news.

LoL!! c stupéfiant ce que Saint François Battail nous raconte.

Je ne me coltinerai pas des adaptations CSS sur MSIE voire même MSIE 5.2
pour Mac régulièrement, je dirais qu'il exagère. Ce n'est pas le cas !



Toujours surpris, c'est peut être pour cela qu'il est indémodable :(

François > qlqs urls seraient les bienvenues. si tu as le temps,
J'ai appris qlqs trucs que je veux tester ds ton post,
et je veux voir !



J'ai un peu de temps et je suis zen vu que j'ai pas encore démarré IE !
Tout d'abord la majorité de ces ressources malheureusement sont en
anglais :

http://www.positioniseverything.net/ est le portail sur ce sujet
et est fréquemment mis à jour.
http://dean.edwards.name/IE7/ présente ce projet déjà très avancé qui
vise à corriger IE par toute une série de correctifs en javascript, mais
c'est vraiment incroyable.
Sinon dans un autre registre quelques utilisations assez extraordinaires
des CSS (mieux vaut aller sur ce site avec un navigateur *récent*) :
http://www.literarymoose.info/=/css.xhtml

Voilà il y a de la matière à lire !

@+
fb
Avatar
vero
Promue marginale calée en ordinatique, je décrypte les 25 lignes de
*Thibaut Allender*
relayées par les serveurs, en ce
jour /13/09/2004/

la poudre verte [1] est donc ma dernière chance ???

[1] http://www.poudreverte.com/



ah c'est super ça ! je viens de donner l'adresse à un vilain qui refuse
de comprendre les explications sur un autre NG :-)

--
http://perso.wanadoo.fr/cv.vfr/ & http://perso.wanadoo.fr/rustines/
La force des forums c'est que chacun peut profiter pleinement
des trouvailles, des défauts et du recul d'autrui.
Avatar
vero
Promue marginale calée en ordinatique, je décrypte les 156 lignes de
*François Battail*
relayées par les
serveurs, en ce jour /13/09/2004/

[snip]

Histoires vraies vécues aujourd'hui...



[snip]

sensationnel ! Que j'ai ri !
je demande l'autorisation de copier/coller sur NG Woo (en citant les
sources, naturellement)

--
http://perso.wanadoo.fr/cv.vfr/ & http://perso.wanadoo.fr/rustines/
La force des forums c'est que chacun peut profiter pleinement
des trouvailles, des défauts et du recul d'autrui.
Avatar
François Battail
Le Tue, 14 Sep 2004 13:04:10 +0200, vero a écrit :

Promue marginale calée en ordinatique, je décrypte les 156 lignes de
*François Battail*
relayées par les
serveurs, en ce jour /13/09/2004/

Histoires vraies vécues aujourd'hui...



je demande l'autorisation de copier/coller sur NG Woo (en citant les
sources, naturellement)



Bonjour vero,

Of course copyleft, y-a deux petites erreurs (voir dans ce fil) donc si
tu peux annoter le texte ce serait sympa.

Transmets mes amitiés aux habitués des NG Wanadoo.

@+
fb
Avatar
François Battail
Le Mon, 13 Sep 2004 23:27:37 +0200, Thibaut Allender a écrit :

ah ah ! je vais te louer tes 2 mamelles de euh, je veux dire tes 2
sAinTs pour tenter de résoudre un problème de l'ordre du paranormal
également (tididididi... musique de l'exorciste en fond), le div quand
change de hauteur lorsqu'on change sont background-position ... si si...
véridique



Un :

<!--[if IE]>
<link rel='stylesheet' href='ie.css' type='text/css' />
<![endif]-->

et dans ie.css :

h1, h2 ..., ul, li, ol, dl, span, div, object, input, ...
{
position: relative ;
}

est des fois salutaire.

le miracle ne s'est malheureusement pas accompli...
la poudre verte [1] est donc ma dernière chance ???

[1] http://www.poudreverte.com/



Ça dépasse ma science !

@+
fb
Avatar
docanski
Eleveurs et agricultueurs polluent encore et toujours la Bretagne et
kozaki qui s'en fout totalement nous narre ce qui suit en ce 14/09/2004
00:01 :

LoL!! c stupéfiant ce que Saint François Battail nous raconte.



Ce qui est encore plus stupéfiant, c'est de voir des enfoirés qui
quotent comme des gorets, reprenant la totalité d'un message long pour
dire :

Je ne me coltinerai pas des adaptations CSS sur MSIE voire même MSIE
5.2 pour Mac régulièrement, je dirais qu'il exagère. Ce n'est pas le cas !

François > qlqs urls seraient les bienvenues. si tu as le temps,
J'ai appris qlqs trucs que je veux tester ds ton post,
et je veux voir !



et terminer par une signature non conforme !
Un petit tour sur
http://www.giromini.org/usenet-fr/repondre.html
ne serait pas du luxe pour ton apprentissage !
Tout le monde n'est pas en ADSL !!!
Et quand bien même, d'ailleurs ... !
--
Cordialement,
docanski

Nature, histoire et légendes en
- Côtes du nord de la Bretagne
- Vallée de la Rance maritime
Memento des champignons
http://armorance.free.fr
Avatar
Fabrice Bonny
@SM wrote:

Dans un de mes bricolages j'ai mis une fds alternate vide
avec un JS pour la sélectionner, et IE affiche le truc-bazard html.




Et avec une non-alternative?

--
Fabrice Bonny

http://openweb.eu.org/
http://opquast.org/
Avatar
vero
Promue marginale calée en ordinatique, je décrypte les 52 lignes de
*François Battail*
relayées par les
serveurs, en ce jour /14/09/2004/

<hs>



suite en bal :-)

--
http://perso.wanadoo.fr/cv.vfr/ & http://perso.wanadoo.fr/rustines/
La force des forums c'est que chacun peut profiter pleinement
des trouvailles, des défauts et du recul d'autrui.