Une fois le redémarrage terminé, c’est avec allégresse que je clique que le gros E bleu, et que j’affiche mon site. Epicwin me dis-je : cela semble s’afficher correctement.
Il y a les dégradés et les ombres sous le texte et même les flammes sur le titre (reléguant à Chrome (et Safari) le statut de seul navigateur qui ne l’affiche pas, mais ça va viendre).
C’est alors, toujours dans un état d’euphorie, que j’ai le malheur de cliquer sur le lien vers mes outils en ligne…
ET LÀ, C’EST LE DRAME !
(EDIT : j’ai corrigé le bug hier soir pour IE. Un simple Border:none; en CSS, mais ça ne devrait pas être nécessaire si IE était pas si con).

IE 10 affiche toujours et encore des putain de bordure sur les liens-images.
C'est le seul à faire ça, depuis 10 ans.
C'est le seul a faire ça, seulement sur les liens images.
C'est le seul à faire ça, sans que ce soit demandé.
C'est le seul à faire ça.
Et que je te déteste, IE.
PS, voilà comment ça s’affiche sous Firefox et sous Opera :

(Je remarque du même temps que Chrome Néo-ie6 affiche lui aussi tout de travers… Lui aussi je commence à en avoir de plus en plus marre qu’il fasse n’importe quoi, parce que ce n’est pas la première fois >_<).
51 commentaires
On t'avais prévenu que c'était une merde pourtant ^^
PS : Le captcha déconne des fois, même si je met la bonne somme ça me met "La somme est incorrecte (utiliser des chiffres)"
PS : Rhooo !!
PS : M*r*e !
Tu l'as installé manuellement ou il t'a proposé la mise à jour ? Chez moi je n'ai toujours rien et j'ai bien envie de tester :P
Vive Firefox et Opéra. Bizarre, c'est ceux aussi qui respecte les utilisateurs...
Aucuns problèmes avec ie sous windows 8. Pas de bordures ni de dégradés...Meme chose sur la version metro.
Sous Windows 7 avec IE10 pas de bordures non plus à l'exception du bouton Flatter: http://uppix.net/4/f/b/a0747b8521372ed2ffea70acf0f00.png
Tu n'aurais pas activé le mode de compatibilité, par hasard ?
@Nerdebeu : Afficher la page correctement c'est ne pas être compatible ? Sont rigolos chez Microsoft ...
@Timo : c'est pas franchement une limitation de Chrome et Safari pour les flames, ça vient du moteur WebKit (qui équipe aussi quelques projets libres).
@Nerdebeu : Afficher la page correctement c'est ne pas être compatible ? Sont rigolos chez Microsoft ...
@Timo : c'est pas franchement une limitation de Chrome et Safari pour les flames, ça vient du moteur WebKit (qui équipe aussi quelques projets libres).
Je peux t'assurer que pour le coup tu râles pour rien, tu prends n'importe quel reset de base (une ancienne version que j'avais faite ici notamment qui est très courte et devrai te suffire http://www.yves-astier.com/2011/11/11/reset-css/ ou tu tapes "reset css" dans google tu n'as que l'embarras du choix).
Pour le mode de compatibilité, tu ajoutes :
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
(ici une explication détaillé : http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge )
Je peux te filer un coup de main si tu le souhaites, tu peux m'envoyer un mail dans ce cas ;)
border="0" pour éviter ça non ?
Si on regarde le CSS de ta page "outils", on a ça :
.bloc a img {
border: none;
display: block;
margin: 0 auto;
width: 48px;
height: 48px;
}
On a bien un border:none sur les images, et sous IE10, ça s'affiche bien correctement ...
Alors, c'est peut être pas le comportement par défaut, j'en sais rien, faudrait aller voir w3c ce qu'ils disent du comportement attendu pour les a img.
Parce que si ça se trouve, FF n'affiche pas de bordure alors qu'il en faudrait une.
Donc dans le pire des cas, c'est une ligne de CSS ... c'est pas la mort non plus ;)
Je vais regarder si je trouve des infos.
@iTux: je suis bien d'accord, mais justement, certains sites étant développés pour d'anciennes versions de IE qui respectaient bien moins que les dernières, il était parfois nécessaire d'être en mode compatibilité pour pouvoir les afficher. Donc en effet, avoir l'affichage de compatibilité activé est négatif sur les sites qui respectent les règles, et même sur d'autres d'ailleurs. Si tu essaies d'afficher Gmail ou d'autres trucs Google en mode compatibilité, vont pas aimer. En mode normal aucun souci, comme le site de notre ami.
Il me semble, sans en être certain, qu'à l'installation sous 7 ou d'origine sous 8, IE 10 est en mode compatibilité, du moins certains paramètres de ce mode.
Donc à vrai dire, je ne saisis pas bien ta remarque, puisqu'au contraire il ne faut pas activer le mode de compatibilité avec les anciennes versions de IE, ce qui pourrait être la cause d'un mauvais affichage.
NB: je suis Operadôlatre, je n'aime guère IE, mais rendons lui ce qu'il est tout de même capable de faire...Parfois...
IL est vrai que, par défaut, même en mode "normes", si on ne met pas un border:none; en CSS sur les a img, on a une bordure qui s'affiche sur les images.
Le tout étant de savoir si c'est la norme, ou si c'est les autres nav qui ont pris des libertés sur ce point précis.
Heuuu n'importe quoi. Je suis sous IE10 là, et cela fonctionne tout à fait comme l'image que tu souhaites obtenir... et ps zéro plug in ou quoi que ce soit de trituré.
@Nerdebeu : donc, si je comprend bien, le mode compatibilité c'est pour respecter les non-standards ?
Pour ma part je soutiens Firefox, Opéra et tout autre navigateur libre mais j'utilise principalement Chrome parce qu'il embarque son propre moteur flash (qui ne s'installe pas sur le système et qui est a jour).
Je suis actuellement sur firefox 3.6.17 (version uniquement autorisé par le taff') et j'ai la belle bordure aussi.
@iTux : C'est "Mode de compatibilité ancienne versions de IE".
En gros, c'est un mode qui te permet d'afficher tes sites comme avant, que ça reste compatible avec ce que tu avais avec les anciennes versions d'IE.
@Androc : au sens du W3C, ce serait donc le mode incompatibilité ^^
Je suis sans doute bigleux, mais je ne vois pas le souci de cette page avec Chrome.
Pas de lignes noires, tout est arrondi, etc.
Bonjour, en qualité d'avocat au sein du cabinet de conseil & protection WeDontCareServices, je vous mets en demeure monsieur Volant, dit Le Hollandais, de modifier la forme carrée à coins arrondis employées sur votre page d'applications, car elle viole le brevet 321581351.635b2 accordé à la société Mapple Inc. de Steve&Steve, lui accordant un droit d'usage exclusif ad vitam aeternam sur les icônes de forme dite 'carrées à coins arrondis'.
Nous vous suggérons d'utiliser à la place une mise en forme qui pique les yeux (vous pouvez par exemple vous inspirer des illustrations employées sur cette page http://sebsauvage.net/comprendre/), afin de respecter les droits de notre client.
Petite parenthèse.
@Timo : Ca a peut être été déjà discuté lors de ton rafraîchissement d'interface, mais je trouve très dommage que le lien pour aller aux commentaires soit juste au dessus des commentaires et pas au niveau du titre d'un article comme c'était le cas avant.
Etant donné que c'est sensé être un raccourci pour sauter vers les commentaires, il faut le placer dès le début pour pouvoir aller aux commentaires sans être obligé de défiler tout l'article pour y accéder.
En passant, j'ai modifié légèrement ton livre d'or en système pour partager les liens.
Si certains souhaitent tester, voici le lien de la démo : http://julien-et-nel.be/linx79/
@rwanito : normal j’ai corrigé maintenant.
J’ai spécifier un « border: none; » en CSS alors que normalement ce n’est pas nécessaire.
@Kevin : Dans Windows Update (WS7 SP1).
@Draeli : Justement, les Reset c’est le mal et ils ne devraient pas être utilisés si les navigateurs étaient tous bon. Et 90% d’un CSS-Reset c’est pour IE.
@Gilles : j’ai dû corriger aussi !
@Androc : la semaine dernière quelqu’un ma demandé l’inverse :-|.
@Julien et Nel :
Il faut être admin pour le moment pour poster des liens , je ferais peut être un petit truc pour que sa soit accessible en public (tout le monde) ou privé (admin). Je ferais peut être aussi un truc pour changer le login et le mot de passe. Et peut être un petit script d'installation aussi ... Pour le moment pour tester, il faut ajouter ?admin à l'url , le login est "admin" et le mot de passe est "pass".
@Le Hollandais Volant :
Merci en passant pour le partage du livre d'or.
Ça me permettra ainsi de l'améliorer un peu :)
@Le Hollandais Volant : reset ca n'est pas le mal car à la base (je ne rentrerai pas dans le détail explicatif car beaucoup de choses seraient à dire) c'est la pour uniformiser des parties qui sont laissés à la libre appréciations du navigateur. Par exemple, les specs ne disent pas les margin/padding à appliquer par défaut donc libre au navigateur de faire sa vie et libre à l'utilisateur d'utiliser ce genre de chose pour uniformiser s'il le souhaite.
Dans le cas de l'image, ca n'a rien d'hallucinant d'avoir un border sur l'image par défaut pour deux raisons simple :
1 : si l'image n'est pas chargé il reste possible d'identifier une zone définissant une image
2 : en terme d'accessibilité visuel, il sera plus simple d'identifier une image
(je ne dis pas que c'est juste, je montre simplement des arguments plausibles au choix effectué par les gars de chez IE)
Ensuite un lien historiquement est souligné, donc rien d'aberrant à visualiser rapidement une zone dite cliquable en appliquant un style par défaut.
Je ne suis pas un fan à IE mais objectivement il faut prendre un peu de recul pour comprendre certains choix qui ont été fais.
Justement : Firefox et les autres ajoutent une bordure *seulement* quand l’image n’a pas été chargée.
Je ne vois pas l’intérêt. Ce qui intéresse c’est le contenu de l’image, pas le fait que ce soit une image. Il y a de plus en plus d’images sur Tumblr surtout mais aussi les autres réseaux sociaux, avec du texte dans les images…
Je comprend bien ce que tu veux dire, mais dans ce cas, si c’est si pratique, ça confirme que fait que les CSS Reset soient un mal : ça supprime tout ce pratique.
Perso je le vois comme un bien mais c'est comme chaque outil, tout dépend l'usage final que tu en as et autant je vois pourquoi tu penses que c'est un mal (et on peut tout à fais s'en passer), autant dans les faits, sur des projets qui se veulent un minimum maintenable, il sera plus souvent intéressant de prendre un reset pour partir sur une base saine. Et que je dis base saine, non pas que ton reset sera bien et/ou propre mais qu'il correspondra à ta vision et ton approche des Css. Par exemple, je considère que passer un élément qui possède un outline à 0 est une hérésie pour des questions d'accessibilité mais pour certains Reset, tu le trouveras car ca correspond à la vision de l'auteur. Au final tu peux voir le comportement des navigateurs par défaut comme un Reset et au final en posant ton propre Reset, tu viens simplement dire "Votre vision du Css ne me plaît pas, je préfère ca".
Remarques que dans l'approche, à aucun moment je ne dis que c'est bien ou mal et/ou même que c'est obligatoire cependant si des choses ne te plaisent pas, avoir recours au reset (quelque soit sa forme) est un moyen pour toi d'offusquer la vision des Css porté par la navigateur.
Donc au final quand tu dis "ça ne devrait pas être nécessaire si IE était pas si con", je te trouve relativement injuste.
Tu aurais dis ça à cause de la gestion des hasLayout (truc spécifique des vieux IE), ou sous IE6 le double margin (bogue), ou encore les filtres spécifiques à IE en css (http://msdn.microsoft.com/en-us/library/ms673539%28v=vs.85%29.aspx), ou encore ... bref une raison qui sort des clous soit car ce n'est pas lié aux spécifications, soit car c'est un bogue dans ce cas la je ne pourrai être que d'accord.
C'est pour ca que je t'invite à demander à des gens dont c'est le métier (je me propose également) et qui te feront ca avec grand plaisir, ce qui en plus te dégagera du temps pour te concentrer sur la construction d'outils ;)
ps : remarque en passant, un css externe serait une bonne idée pour profiter du cache navigateur et ne pas charger encore et encore du css qui ne change pas.
ps2 suggestion : tu peux pousser le vice à mettre tes icônes dans un seul sprite afin de limiter le nombre de hits vers ton serveur.
@Draeli : ça ne vaut pas juste pour IE : pour les formulaires par exemple, tous les navigateurs actuel encadrent les champs avec une bordure (jaune pour chrome, noir pour opera et une ombre pour firefox). C’est moche mais bon, je désactive rarement ça lors du focus sur le formulaire.
Les reset sont utiles pour les thèmes qui ont des positionnements précis (comme le thème précédent que j’avais), mais pas pour des thèmes simples. Mais je remarque que grâce à IE, se passer d’un reset et c’est la catastrophe (sujet de l’article…), et ça c’est bien dommage.
Mais je connais bien la plupart des hacks pour IE et autres conneries. C’est bien pour ça que pour un récent site semi-pro que j’ai eu à faire pour quelqu’un, j’ai choisis de le faire en xHTML 1.1 au lieu de HTML5 : compatibilité IE 8 voire 7 oblige… (IE6 je m’y refuse, c’est mort). Mais ce n’est pas pour ça que ça me fait pas chier.
Pour les outils : oui, je sais : certains choses sont à refaire pour les outils. À vrai dire je ne pensais pas publier ça en ligne au départ, mais garder ça en local pour moi, c’est pour ça que j’avais fait ça à l’arrache.
Même chose pour les icônes dans le formulaire des commentaires : chaque icône est séparée^^".
Je n'ai qu'une chose à dire, ie c'est de la merde et sa restera de la merde.
@Julien et Nel : Avec IE14, ça ira p'tête mieux ;)
"C’est bien pour ça que pour un récent site semi-pro que j’ai eu à faire pour quelqu’un, j’ai choisis de le faire en xHTML 1.1 au lieu de HTML5 : compatibilité IE 8 voire 7 oblige", la pour le coup j'ai du mal à voir la justification profonde car tu peux très bien utiliser html5 en restant compatible (alors oui pour les vieux IE on doit mettre html5shiv dans le cas des balises spécifiques mais bon d'expérience je n'ai pas encore eu de surprise). IE6 je peux te comprendre (pour ma part je ne le fais plus), surtout vu le pourcentage de trafic qui est encore concerné et au coût temps uniquement pour régler des merdes spécifiques.
Bon courage pour la suite de tes outils :)
@Le Hollandais Volant : Arf :( Mais quelle est la justification de l'avoir juste à côté ?
A la rigueur tu peux mettre aux deux endroits :)
Je trouve ça juste peu logique d'avoir un accès rapide à quelque chose qui se trouve juste en dessous alors que parfois, on veut pouvoir sauter directement aux commentaires.
C'est un peu comme si il n'y avait pas de tables des matières.
Moi j'utilise IE7 et le site est comme d'habitude, pas de problème particulier :)
A quand les commentaires dans la partie "Au fil du web" ? Je pense que tu rates pas mal de conversations intéressantes en balançant des infos tout seul comme ça.
@Le Hollandais Volant :
Laisse tomber IE7.
Il y a un moyen en javascript de faire tourner html5 sur ie8/9, html5shyv.js je crois, léger temps de chargement en plus mais résultat très satisfaisants !
En fait, c'est IE qui a raison...
http://www.w3schools.com/tags/att_img_border.asp
Note: An image has no border by default (unless the image is inside an <a> element).
@Anon :
J'avais fait la meme remarque à timo d'ailleurs
@jeromebe :
Qui AVAIT raison :
"The <img> border attribute is not supported in HTML5. Use CSS instead.
The border attribute of <img> is deprecated in HTML 4.01."
Attention à w3schools : je vois souvent des critiques commes quoi leurs infos sont souvent un peu périmées / a coté de la plaque.
Je n'ai rien trouvé concernant les bordures d'images dans des liens sur le site officiel du w3c.
Mais ça me parait débile que le html impose du style a des éléments
Quoique c'est pareil pour les listes et leurs puces horribles par défaut...
Trop dur de désactiver ça et laisser le choix ?? x(
@Julien et Nel :
"Je n'ai qu'une chose à dire, ie c'est de la merde et sa restera de la merde."
Franchement, je disais pareil mais la version 10 est en train de me faire changer d'avis.
Les ptits effets css3 a la mode sont super fluide, mes pages rendent comme je le veux...
Ils font des efforts quand même, j'ai été bien surpris :)
Sur certain points c'est même mieux que firefox et chrome, je pense a l'animation des éléments before et after (impossible sous chrome),
et firefox j'ai de temps en temps de gros lags sur les effets modernes... (peut être dus aux extensions?)
Pour moi le pire, c'est pas IE. C'est ce putain de SAFARI que je hais du plus profond de mon âme.
@Anon:
Ce n'est pas parce que l'attribut border est remplacé par son équivalent CSS que le style appliqué par défaut à un <a><img/> <a> doit forcément changer.
Si la bordure était présente par défaut, c'était donc en l'absence du tag en question...
@jeromebe :
C'est vrai, j'ai mal réfléchi.
Du coup, je me demande, pourquoi seul IE obéis ? Alors que les autres nav implémentent pourtant les autres styles bizarres par défaut ?
O_o
@Anon :
Alors là aucune idée :D
@jeromebe :
@Anon : objection.
Si je regarde la spec du W3C (et pas w3scoold qui ne source pas ses infos (mais n’en reste pas moins bien utile)), je vois ça :
(source)
Et :
(source).
Ça dépend donc du navigateur. Autrement dit, en HTML4, IE fait le contraire de tous les autres.
En HTML5, l’attribut « border="" » est obsolète, tout comme tout ce qui est maintenant faisable en CSS à la place (font, width, height, blinck, etc.).
Je n’ai rien trouvé aux sujet des liens-images dans la doc du W3, mais encore une fois, IE fait le contaire de tout le monde.
Ça veut pas dire qu’il a raison, ça ne veut pas dire qu’il a tord, mais ça veut dire qu’il fait chier.
@Le Hollandais Volant :
Effectivement.
Comme tu dis, ni raison ni tort.
Maintenant, il serait temps que les recommandations du W3C soient plus claires et ne laissent plus ce genre de libertés.
Sur mon Windows 7, Internet Explorer ne fonctionne même pas (il se ferme au bout d'un dixième de seconde, rien trouvé pour le réparer). Une fois, Firefox a eu un problème, et j'ai du le réparer tout seul, je vous dit pas la merde quand on a pas accès à internet pour nous aider.
PS : Je cherchez pas, mais quand je suis avec mon Windows 7, j'ai pas mon Linux.
@NorbsDeForbsAndWensminster
On a atteint les sommets du rire. Enkulé de rire.
Perso, j'utilise uniquement Chrome et Safari. Ils sont excellents (désolé). Mais attendons maintenant Blink, qui doit remplacer, enfin, webkit.
Moi rien qu'à l'idée d'utiliser IE ça me donne des boutons, et rien qu'à l'idée d'utiliser Chrome, je préfère avoir des boutons hahaha :D
@Anon :
+1. Il y a souvent des choses intéressantes qui ressortent des commentaires.
Mais peut-être que Timo ne veut pas être confronté à ce petit problème ?...
@Amaury : Si j’ouvrais les commentaires dans mes liens, autant les publier sur le blog, ça serait plus logique.
Je peux en revanche faire des « en vrac » reprenant une sélection des liens de la semaine ou du mois.
Depuis quelques temps également, je poste sur le blog quelques réflexions que je débutant dans mes liens.
En effet, les comm. et tout le tintouin, c'est du blogging je trouve :)
Les liens, c'est vraiment pour se faire des marque-pages en ligne.
Et les partager éventuellement.
firefox avait le mm comportement jusqu'a recemment donc calmez vous un peu...
Les commentaires sont fermés pour cet article