Marge ignorée dans une liste décalée par un objet avec "float"
7 réponses
Claude Schneegans
Bonjour,
J'ai disons une table, ou une image, ou n'importe quoi qui a le style
"float:left"
Lorsque dans le texte qui coure à droite de cet objet on a une liste UL,
sa marge de gauche
est ignorée, et ce chez tous les navigateurs (comment ils font pour tous
reproduire le même bogue,
ça ça me les coupe, mais enfin bon)
Voir par exemple : http://www.contentbox.com/claude/test/test.htm
Voir la deuxième liste qui devrait être comme la première décalée à droite.
J'ai lu qqpart que le fait d'ajouter "overflow: auto" à la liste UL
réglait le problème...
chez tous SAUF IE. (qu'est-ce que l'overflow a à voir là dedans est un
autre mystère, mais enfin re-bon)
Dans mon exemple, la troisième liste a l'air correcte, sauf dans IE.
Est-ce que qqun aurait une explication, et encore mieux, une solution ?
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Gilles ---
Bonjour à Claude Schneegans qui, ce mardi 17/03/2009, a écrit ce qui suit :
Bonjour,
J'ai disons une table, ou une image, ou n'importe quoi qui a le style "float:left"
Lorsque dans le texte qui coure à droite de cet objet on a une liste UL, sa marge de gauche est ignorée, et ce chez tous les navigateurs (comment ils font pour tous reproduire le même bogue, ça ça me les coupe, mais enfin bon)
Voir par exemple : http://www.contentbox.com/claude/test/test.htm Voir la deuxième liste qui devrait être comme la première décalée à droite.
J'ai lu qqpart que le fait d'ajouter "overflow: auto" à la liste UL réglait le problème... chez tous SAUF IE. (qu'est-ce que l'overflow a à voir là dedans est un autre mystère, mais enfin re-bon)
Dans mon exemple, la troisième liste a l'air correcte, sauf dans IE.
Est-ce que qqun aurait une explication, et encore mieux, une solution ?
Pour mieux comprendre comment les divers interpréteurs gèrent ton code, il peut être utile, pendant la phase de mise au point, de matérialiser l'emplacement des divers conteneurs à l'aide d'un peu de CSS, comme ça :
De la sorte, tu peux repérer lesd endroits où IE (ou FF ...) a positionné la cellule de ton tableau et le conteneur des listes à puces.
Pour les listes à puces n° 2 et 3, tu vas avoir une surprise.
Personnellement, mais je ne suis pas grand spécialiste de ce genre de problème, j'aurais tendance à créer un tableau à deux colonnes, et à placer les listes n° 2 et 3 dans la colonne de droite, comme ceci :
---------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <style> TD{border:1px solid red} UL{border:1px solid green} </style> </head> <body> <UL> <LI>Aliqua stratum in centra benedicto,</LI> <LI>recondus terrestra duis al ordina tuamem,</LI> <LI>nerus philema lux in gratia gratianem.</LI> </UL> Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut suscipe melioram veritas.Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut suscipe melioram veritas. <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="2"> <TR> <TD style="width:300">Aliqua stratum in centra benedicto, recondus terrestra duis al ordina tuamem, nerus philema lux in gratia gratianem. Iusto odio dignissim qui blandit praesent luptatum duis dolore te felavit nulla facilisi. Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut suscipe melioram veritas. </TD> <TD> <UL> <LI>Aliqua stratum in centra benedicto,</LI> <LI>recondus terrestra duis al ordina tuamem,</LI> <LI>nerus philema lux in gratia gratianem.</LI> </UL> <UL> <LI>Aliqua stratum in centra benedicto,</LI> <LI>recondus terrestra duis al ordina tuamem,</LI> <LI>nerus philema lux in gratia gratianem.</LI> </UL> </TD> </TR> </TABLE> Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut suscipe melioram veritas. </body> </html> ----------
Bon courage. :-)
-- Gilles --- http://www.leblaisois.fr
Bonjour à Claude Schneegans qui, ce mardi 17/03/2009,
a écrit ce qui suit :
Bonjour,
J'ai disons une table, ou une image, ou n'importe quoi qui a le style "float:left"
Lorsque dans le texte qui coure à droite de cet objet on a une liste UL, sa marge de gauche
est ignorée, et ce chez tous les navigateurs (comment ils font pour tous reproduire le même bogue,
ça ça me les coupe, mais enfin bon)
Voir par exemple : http://www.contentbox.com/claude/test/test.htm
Voir la deuxième liste qui devrait être comme la première décalée à droite.
J'ai lu qqpart que le fait d'ajouter "overflow: auto" à la liste UL réglait le problème...
chez tous SAUF IE. (qu'est-ce que l'overflow a à voir là dedans est un autre mystère, mais enfin re-bon)
Dans mon exemple, la troisième liste a l'air correcte, sauf dans IE.
Est-ce que qqun aurait une explication, et encore mieux, une solution ?
Pour mieux comprendre comment les divers interpréteurs gèrent ton code, il peut être
utile, pendant la phase de mise au point, de matérialiser l'emplacement des divers
conteneurs à l'aide d'un peu de CSS, comme ça :
De la sorte, tu peux repérer lesd endroits où IE (ou FF ...) a positionné la cellule
de ton tableau et le conteneur des listes à puces.
Pour les listes à puces n° 2 et 3, tu vas avoir une surprise.
Personnellement, mais je ne suis pas grand spécialiste de ce genre de problème,
j'aurais tendance à créer un tableau à deux colonnes, et à placer les listes n° 2 et
3 dans la colonne de droite, comme ceci :
----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
TD{border:1px solid red}
UL{border:1px solid green}
</style>
</head>
<body>
<UL>
<LI>Aliqua stratum in centra benedicto,</LI>
<LI>recondus terrestra duis al ordina tuamem,</LI>
<LI>nerus philema lux in gratia gratianem.</LI>
</UL>
Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia
felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut
suscipe melioram veritas.Dolore illum ex commodio consequat, qui nostra magna senza
pomodoro ut studia felicitas in minim veniam. Portuna lorem ipsum dolor sit amer,
quid mestra ut suscipe melioram veritas.
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="2">
<TR>
<TD style="width:300">Aliqua stratum in centra benedicto, recondus terrestra duis al
ordina tuamem, nerus philema lux in gratia gratianem. Iusto odio dignissim qui
blandit praesent luptatum duis dolore te felavit nulla facilisi.
Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia
felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut
suscipe melioram veritas.
</TD>
<TD>
<UL>
<LI>Aliqua stratum in centra benedicto,</LI>
<LI>recondus terrestra duis al ordina tuamem,</LI>
<LI>nerus philema lux in gratia gratianem.</LI>
</UL>
<UL>
<LI>Aliqua stratum in centra benedicto,</LI>
<LI>recondus terrestra duis al ordina tuamem,</LI>
<LI>nerus philema lux in gratia gratianem.</LI>
</UL>
</TD>
</TR>
</TABLE>
Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia
felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut
suscipe melioram veritas.
</body>
</html>
----------
Bonjour à Claude Schneegans qui, ce mardi 17/03/2009, a écrit ce qui suit :
Bonjour,
J'ai disons une table, ou une image, ou n'importe quoi qui a le style "float:left"
Lorsque dans le texte qui coure à droite de cet objet on a une liste UL, sa marge de gauche est ignorée, et ce chez tous les navigateurs (comment ils font pour tous reproduire le même bogue, ça ça me les coupe, mais enfin bon)
Voir par exemple : http://www.contentbox.com/claude/test/test.htm Voir la deuxième liste qui devrait être comme la première décalée à droite.
J'ai lu qqpart que le fait d'ajouter "overflow: auto" à la liste UL réglait le problème... chez tous SAUF IE. (qu'est-ce que l'overflow a à voir là dedans est un autre mystère, mais enfin re-bon)
Dans mon exemple, la troisième liste a l'air correcte, sauf dans IE.
Est-ce que qqun aurait une explication, et encore mieux, une solution ?
Pour mieux comprendre comment les divers interpréteurs gèrent ton code, il peut être utile, pendant la phase de mise au point, de matérialiser l'emplacement des divers conteneurs à l'aide d'un peu de CSS, comme ça :
De la sorte, tu peux repérer lesd endroits où IE (ou FF ...) a positionné la cellule de ton tableau et le conteneur des listes à puces.
Pour les listes à puces n° 2 et 3, tu vas avoir une surprise.
Personnellement, mais je ne suis pas grand spécialiste de ce genre de problème, j'aurais tendance à créer un tableau à deux colonnes, et à placer les listes n° 2 et 3 dans la colonne de droite, comme ceci :
---------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <style> TD{border:1px solid red} UL{border:1px solid green} </style> </head> <body> <UL> <LI>Aliqua stratum in centra benedicto,</LI> <LI>recondus terrestra duis al ordina tuamem,</LI> <LI>nerus philema lux in gratia gratianem.</LI> </UL> Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut suscipe melioram veritas.Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut suscipe melioram veritas. <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="2"> <TR> <TD style="width:300">Aliqua stratum in centra benedicto, recondus terrestra duis al ordina tuamem, nerus philema lux in gratia gratianem. Iusto odio dignissim qui blandit praesent luptatum duis dolore te felavit nulla facilisi. Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut suscipe melioram veritas. </TD> <TD> <UL> <LI>Aliqua stratum in centra benedicto,</LI> <LI>recondus terrestra duis al ordina tuamem,</LI> <LI>nerus philema lux in gratia gratianem.</LI> </UL> <UL> <LI>Aliqua stratum in centra benedicto,</LI> <LI>recondus terrestra duis al ordina tuamem,</LI> <LI>nerus philema lux in gratia gratianem.</LI> </UL> </TD> </TR> </TABLE> Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut suscipe melioram veritas. </body> </html> ----------
Bon courage. :-)
-- Gilles --- http://www.leblaisois.fr
Claude Schneegans
>>il peut être utile, pendant la phase de mise au point, de
matérialiser l'emplacement des divers conteneurs à l'aide d'un peu de CSS, comme ça :
Vi vi vi, c'est exactement ce que j'ai fait, avant de me décourager et venir demander de l'aide. ;-) Mais dans mon example, je simplifie au maximum.
>>j'aurais tendance à créer un tableau à deux colonnes, et à placer les listes n° 2 et 3 dans la colonne de droite, comme ceci :
Ouais, ça c'est la méthode forte ! Mais ça vient briser l'idée d'un texte flottant autour d'un objet.
>>il peut être utile, pendant la phase de mise au point, de
matérialiser l'emplacement des divers conteneurs à l'aide d'un peu de
CSS, comme ça :
Vi vi vi, c'est exactement ce que j'ai fait, avant de me décourager et
venir demander de l'aide. ;-)
Mais dans mon example, je simplifie au maximum.
>>j'aurais tendance à créer un tableau à deux colonnes, et à placer les
listes n° 2 et 3 dans la colonne de droite, comme ceci :
Ouais, ça c'est la méthode forte !
Mais ça vient briser l'idée d'un texte flottant autour d'un objet.
>>Désolé, mais sur ce domaine je manque d'expérience.
En fait, j'avais trouvé ce groupe qui me semblair approprié : microsoft.public.fr.ccs Mais il a l'air plutôt désert. ;-/
MCI
Bonjour !
Lorsque dans le texte qui coure à droite de cet objet (flottant) on a une liste UL, sa marge de gauche est ignorée
Nope ; la marge (de gauche) est à gauche de l'objet flottant (et s'ajoute à l'éventuelle marge intrinsèque au flottant). Le contenu est donc, ensuite "collé" à l'objet flottant. On pourrait dire que l'objet flotte sur le contenu, et non sur la marge. S'il le contenu qui enveloppe le flottant et une liste, il faut voir si les marqueurs sont "inside" ou non.
-- @-salutations -- Michel Claveau
Bonjour !
Lorsque dans le texte qui coure à droite de cet objet (flottant) on a
une liste UL, sa marge de gauche est ignorée
Nope ; la marge (de gauche) est à gauche de l'objet flottant (et
s'ajoute à l'éventuelle marge intrinsèque au flottant). Le contenu est
donc, ensuite "collé" à l'objet flottant. On pourrait dire que l'objet
flotte sur le contenu, et non sur la marge.
S'il le contenu qui enveloppe le flottant et une liste, il faut voir si
les marqueurs sont "inside" ou non.
Lorsque dans le texte qui coure à droite de cet objet (flottant) on a une liste UL, sa marge de gauche est ignorée
Nope ; la marge (de gauche) est à gauche de l'objet flottant (et s'ajoute à l'éventuelle marge intrinsèque au flottant). Le contenu est donc, ensuite "collé" à l'objet flottant. On pourrait dire que l'objet flotte sur le contenu, et non sur la marge. S'il le contenu qui enveloppe le flottant et une liste, il faut voir si les marqueurs sont "inside" ou non.
-- @-salutations -- Michel Claveau
Claude Schneegans
>>la marge (de gauche) est à gauche de l'objet flottant
Euh... c'est une façon de voir les choses, si la marge n'appartenait pas à l'objet. Mais la marge de gauche appartient à l'objet et en fait partie. Elle ne peut donc pas se trouver à sa gauche. Elle appartient à l'objet, pas à celui autour duquel il flotte (celui-ci a déjà sa propre marge de droite.) Donc si l'objet a une marge, elle doit s'appliquer de la même façon, que l'objet soit seul à gauche, ou qu'il flotte à droite d'un autre. En d'autres termes, si l'objet flotte, il flotte AVEC sa marge.
Dans mon exemple, les boulets sont en retrait quand le texte ne flotte pas, et on n'a plus de retrait quant il coure autours de la table, ce n'est absolument pas normal.
En ajoutant "overflow: auto" à la liste UL, le texte y compris les boulets paraît normal. Je ne comprends pas non plus ce que la propriété "overflow: auto" peut avoir comme influence sur le phénomène.
C'est quand même curieux que 5 navigateurs présentent exactement le même bogue, et que 4 permettent de contourner le même bogue avec le même artifice qui n'a aucun rapport.
Ça me rappelle quand j'étais prof, et que certains copieurs avaient les mêmes erreurs dans leur copies d'examen ;-))
>>la marge (de gauche) est à gauche de l'objet flottant
Euh... c'est une façon de voir les choses, si la marge n'appartenait pas
à l'objet.
Mais la marge de gauche appartient à l'objet et en fait partie. Elle ne
peut donc pas se trouver à sa gauche.
Elle appartient à l'objet, pas à celui autour duquel il flotte (celui-ci
a déjà sa propre marge de droite.)
Donc si l'objet a une marge, elle doit s'appliquer de la même façon, que
l'objet soit seul à gauche, ou qu'il flotte à droite d'un autre.
En d'autres termes, si l'objet flotte, il flotte AVEC sa marge.
Dans mon exemple, les boulets sont en retrait quand le texte ne flotte
pas, et on n'a plus de retrait quant il coure autours de la table, ce
n'est absolument pas normal.
En ajoutant "overflow: auto" à la liste UL, le texte y compris les
boulets paraît normal.
Je ne comprends pas non plus ce que la propriété "overflow: auto" peut
avoir comme influence sur le phénomène.
C'est quand même curieux que 5 navigateurs présentent exactement le même
bogue, et que 4 permettent de contourner le même bogue avec le même
artifice qui n'a aucun rapport.
Ça me rappelle quand j'étais prof, et que certains copieurs avaient les
mêmes erreurs dans leur copies d'examen ;-))
>>la marge (de gauche) est à gauche de l'objet flottant
Euh... c'est une façon de voir les choses, si la marge n'appartenait pas à l'objet. Mais la marge de gauche appartient à l'objet et en fait partie. Elle ne peut donc pas se trouver à sa gauche. Elle appartient à l'objet, pas à celui autour duquel il flotte (celui-ci a déjà sa propre marge de droite.) Donc si l'objet a une marge, elle doit s'appliquer de la même façon, que l'objet soit seul à gauche, ou qu'il flotte à droite d'un autre. En d'autres termes, si l'objet flotte, il flotte AVEC sa marge.
Dans mon exemple, les boulets sont en retrait quand le texte ne flotte pas, et on n'a plus de retrait quant il coure autours de la table, ce n'est absolument pas normal.
En ajoutant "overflow: auto" à la liste UL, le texte y compris les boulets paraît normal. Je ne comprends pas non plus ce que la propriété "overflow: auto" peut avoir comme influence sur le phénomène.
C'est quand même curieux que 5 navigateurs présentent exactement le même bogue, et que 4 permettent de contourner le même bogue avec le même artifice qui n'a aucun rapport.
Ça me rappelle quand j'étais prof, et que certains copieurs avaient les mêmes erreurs dans leur copies d'examen ;-))
