Bonsoir,
Depuis quelques temps je remanie un site pour le rendre plus propre (point de vue interne, mais pas seulement). Entre autres modifications, je m’étais occupé à simplifier le HTML pour qu’il se tienne à la structure des pages, et à supprimer tous ces tripes DIV imbriqués aux ID et noms de classes barbares que j’avais... mais voilà, trop empressé, j’avais trop vite oublié la raison pour laquelle l’architecture ne suivait pas tout à fait un idéal : c’était pour corriger des bugs d’IE5.5 et IE6.
Grosse panique quand j’ai vu le rendu des modifications mise en ligne il y deux jours... j’ai été complétement paniqué en pensant à l’horreur que mes 10% de visiteurs sous IE6 pouvaient voir.
IE5.5, heureusement, on peut laisser tomber.
J’ai bien pataugé, et surtout sur un bug, dont je me suis souvient que c’était lui à l’époque qui m’avait fait ajouter tous ces DIV imbriqués là où un seul aurait dut être nécessaire : un bug avec les floats.
En particulier un qui faisait qu’un float:right à coté d’un float:left, pouvait tomber en bas même s’il avait pourtant suffisament la place nécessaire à droite pour flotter à droite.
Comme je séchais complétement après avoir essayé tous les trucs standards que je connaissais pour corriger les bugs d’IE, je me suis mis à chercher sur le web pour trouver cette page : IE6 Float drop bug
Deux des solutions proposées ont fonctionné, mais surtout une, et de plus simplifiée a été suffisante.
Détails :
Cette page propose :
ou
Aussi bien la première que la seconde ont fonctionné, mais en ayant même put simplifier encore, et en ne retenant que la seconde, plus propre et conforme à CSS.
un simple
a suffit.
Voilà, à ajouter à votre liste des trucs contre les les bugs d’IE6 avec les floats
. Suggestion : pour la propriété margin-left: essayez de prendre la plus petite possible, en commçant à -1px, puis -2px, etc, jusque qu’à ce que la valeur margin:left soit suffisante.
Si j’avais connu ce truc à l’époque, ... une simple marge négative de 2 ou 3 pixels.
Pour voir un example à l’oeuvre : http://www.les-ziboux.rasama.org/role-declinaisons-en-arabe.html
Si vous utilisez FireFox ou Opera, faites un clique-droit, « Inspecter l’élément ». Dans l’abre des éléments, à partir de body, descendez dans “<div id="content-width">” puis dans “<div id="required-for-ie6">” (c’est le seul DIV que j’ai dut laisser pour IE6/IE7, il enveloppe #content... IE8 n’a posé aucun soucis). Dans les propriétés CSS de #required-for-ie6, vous trouvez un margin-left:-2px. Si vous le supprimez, sous IE6, la barre #options dégringole tout en bas de #required-for-ie6.
Modifié par hibou57 (08 Jul 2010 - 01:33)
Depuis quelques temps je remanie un site pour le rendre plus propre (point de vue interne, mais pas seulement). Entre autres modifications, je m’étais occupé à simplifier le HTML pour qu’il se tienne à la structure des pages, et à supprimer tous ces tripes DIV imbriqués aux ID et noms de classes barbares que j’avais... mais voilà, trop empressé, j’avais trop vite oublié la raison pour laquelle l’architecture ne suivait pas tout à fait un idéal : c’était pour corriger des bugs d’IE5.5 et IE6.
Grosse panique quand j’ai vu le rendu des modifications mise en ligne il y deux jours... j’ai été complétement paniqué en pensant à l’horreur que mes 10% de visiteurs sous IE6 pouvaient voir.
IE5.5, heureusement, on peut laisser tomber.
J’ai bien pataugé, et surtout sur un bug, dont je me suis souvient que c’était lui à l’époque qui m’avait fait ajouter tous ces DIV imbriqués là où un seul aurait dut être nécessaire : un bug avec les floats.
En particulier un qui faisait qu’un float:right à coté d’un float:left, pouvait tomber en bas même s’il avait pourtant suffisament la place nécessaire à droite pour flotter à droite.
Comme je séchais complétement après avoir essayé tous les trucs standards que je connaissais pour corriger les bugs d’IE, je me suis mis à chercher sur le web pour trouver cette page : IE6 Float drop bug
Deux des solutions proposées ont fonctionné, mais surtout une, et de plus simplifiée a été suffisante.
Détails :
Cette page propose :
* html #middle {
overflow-x: auto; overflow-y: hidden;
width: expression(document.body.offsetWidth - 400);
}ou
* html #sidebar {
display: inline;
margin-left: -10px;
}Aussi bien la première que la seconde ont fonctionné, mais en ayant même put simplifier encore, et en ne retenant que la seconde, plus propre et conforme à CSS.
un simple
#my_left_float {
margin-left: -Npx;
}a suffit.
Voilà, à ajouter à votre liste des trucs contre les les bugs d’IE6 avec les floats
. Suggestion : pour la propriété margin-left: essayez de prendre la plus petite possible, en commçant à -1px, puis -2px, etc, jusque qu’à ce que la valeur margin:left soit suffisante.Si j’avais connu ce truc à l’époque, ... une simple marge négative de 2 ou 3 pixels.
Pour voir un example à l’oeuvre : http://www.les-ziboux.rasama.org/role-declinaisons-en-arabe.html
Si vous utilisez FireFox ou Opera, faites un clique-droit, « Inspecter l’élément ». Dans l’abre des éléments, à partir de body, descendez dans “<div id="content-width">” puis dans “<div id="required-for-ie6">” (c’est le seul DIV que j’ai dut laisser pour IE6/IE7, il enveloppe #content... IE8 n’a posé aucun soucis). Dans les propriétés CSS de #required-for-ie6, vous trouvez un margin-left:-2px. Si vous le supprimez, sous IE6, la barre #options dégringole tout en bas de #required-for-ie6.
Modifié par hibou57 (08 Jul 2010 - 01:33)