Forum Programmation.web [CSS] bug de gestion des marges négatives sous Firefox ?

Posté par (page perso) .
Tags : aucun
2
5
août
2009

Bonjour,



Je me retrouve confronté à un problème étrange de CSS sous Firefox, pour lequel je n'ai pas réussi à trouver d'informations. Le problème intervient lors de l'utilisation de marges négatives :




[?xml version="1.0" encoding="UTF-8"?]
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]
[html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"]
[head]
[style type="text/css"]
div
{
border: 1px solid red;
}

#container
{
margin: 128px;
background-color: green;
}

#content
{
margin-top: -64px;
}
[/style]
[title]Test page[/title]
[/head]
[body]
[div id="container"]
[div id="content"]
[p]plop[/p]
[p]plop[/p]
[p]plop[/p]
[/div]
[/div]
[/body]
[/html]


Telle quelle, la page affiche bien 2 divs avec celui imbriqué décalé vers le haut. En revanche, dès que j'essaie de supprimer mon style "border", ou bien de mettre à 0 la "border-width", les 2 divs se retrouvent alors superposés.



Quelqu'un a-t-il déjà observé ce comportement ? Est-ce un bug de Firefox ou bien de l'interface chaise-clavier ? Les validateurs XHTML et CSS ne râlent pas.



Pour info, j'utilise Firefox 3.0.12 sous Ubuntu 9.04.



Merci d'avance :o)



(et au passage, si quelqu'un sait comment inclure du code HTML dans un post sur les forums, je suis preneur : encadré d'un tag PRE ou pas, escapés en "lt;" et "gt;" ou pas je ne suis pas parvenu à avoir un message dont la visualisation était correcte...)

  • # Solution moisie

    Posté par . Évalué à 3.

    border: 1px solid transparent;

    --> []
    • [^] # Re: Solution moisie

      Posté par (page perso) . Évalué à 1.

      C'est pas faux. Mais ça a un inconvénient dans le vrai site (ça c'est une version épurée pour mettre en évidence le problème) : ça laissera un vide entre des images.

      Joli cache-misère sinon ;o)
      • [^] # Re: Solution moisie

        Posté par . Évalué à 2.

        La vraie solution c'est de ne pas utiliser de marges négatives.


        Note qui n'a rien à voir : Je vois (oui je vois !) que tu mets un prologue XML.
        Avec IE6 qui est utilisé par 15% (environ) des gens encore (genre à mon taf on y est) mettre ce prologue est intégriste.

        -Le prologue XML n'est pas obligatoire, contrairement au doctype.
        -IE6 ne lis pas le prologue XML, ça le fait passer en quirks mode.
        -L'absence de prologue n'aura aucune incidence sur les autres navigateurs.

        Pourquoi ! Pourquoi ! Pourquoi ! L'utiliser.

        Tout est plus simple sans. Les filles seront plus belles si tu ne le mets pas, La chance te sourira, tu rèussira tes examens, tu n'aura plus besoin d'utiliser des marges négatives à la çon, l'être aimé te reviendra...
        • [^] # Re: Solution moisie

          Posté par . Évalué à 1.

          D’accord avec la solution de ne pas utiliser des marges négatives. Ça n’est ni très élégant, ni visuellement correct (selon la taille de fonte, du texte risque de se retrouver à moitié dans le vert, etc.).

          Je cite la norme CSS:
          Negative values for margin properties are allowed, but there may be implementation-specific limits.

          Pas d’accord pour IE6, mais c’est un autre débat. IE6 est une antiquité, troué de partout et dysfonctionnel et il est vraiment temps de s’en débarrasser; la mise à jour devrait être obligatoire pour tout le monde.

          D’un point de vue général, c’est ton approche que je trouve bancale: pourquoi insérer un div 1 dans un div 2 si tu veux que div 1 sorte de div 2 ? Je jouerai plutôt sur des paramètres "position" en "absolute", ou utiliser des "float" en taille fixe, ou encore des "block" avec "vertical-align".
          • [^] # Re: Solution moisie

            Posté par . Évalué à 2.

            Pas d’accord pour IE6, mais c’est un autre débat. IE6 est une antiquité, troué de partout et dysfonctionnel et il est vraiment temps de s’en débarrasser; la mise à jour devrait être obligatoire pour tout le monde.

            Je suis d'accord avec toi sur le principe. J'ai exposé mon exemple du travail pour dire que l'on a pas toujours le choix. En fait je disais 15% de mémoire mais selon counter stat c'est plutôt 22% ! plus de 1/5 ! Maintenant comme le prologue n'apporte rien dans les faits, je vois vraiment pas pourquoi tant de gens insiste là dessus si ce n'est pour enquiquiner les gens sous IE6.

            Je ne sais pas quelle version d'IE est utilisé dans windowsCE Mais ça ne m'étonnerai qu'à moitié s'ils avaient recyclé un vieux IE6. Il me semble avoir lu quelque chose la dessus il y a trop longtemps pour que je sois formel.

            Pour l'aspect bancale de son approche, je te laisse seul juge ;)
            • [^] # Re: Solution moisie

              Posté par . Évalué à 1.

              D'accord pour le prologue.

              Pour les stats, ça dépend, n’oublions pas qu'on est sur linuxfr.org, communauté plus au fait des tendances informatiques. Dans la réalité des milieux non-informaticiens, IE6 atteint encore facilement 40% (chiffre vérifié). Heureusement qu’IE7, bien qu’imparfait, apporte néanmoins une prise en charge largement améliorée de CSS.

              Pour son approche, je reste sur mes propos; de toute façon, sans que l’on sache le résultat qu’il désire obtenir ou l’intégralité du code css, difficile d’émettre un verdict plus complet. Dans son cas, on dirait qu’il cherche à insérer un titre en haut de la div container (présupposition), donc une autre div me semble plus appropriée.
              • [^] # Re: Solution moisie

                Posté par . Évalué à 2.

                J'espère que tu as flash... /o\

                Pour les statistiques, je ne pensais pas qu'à Linuxfr uniquement mais à ça :
                [http://gs.statcounter.com/#browser_version-ww-daily-20080701(...)]
              • [^] # Re: Solution moisie

                Posté par (page perso) . Évalué à 1.

                Le but était d'avoir une structure de la forme :
                +--------------------+
                |         1          |
                +--------------------+
                |         2          |
                +--------------------+
                
                Avec :
                • la zone 1 de hauteur fixe comprenant un background translucide non-répété
                • la zone 2 de hauteur extensible comprenant un background répété verticalement
                Et le texte occupant l'espace Zone1 union Zone2 et étendant zone 2 au besoin. Je sais pas si c'est très clair, mais c'est pas simple à explique :op
                • [^] # Re: Solution moisie

                  Posté par . Évalué à 1.

                  C’est un peu ce que j’avais deviné. Puisque la boîte supérieure est en taille fixed, cela devrait grandement faciliter les choses. Ma solution:

                  - deux boîtes, l’une avec paramètre height fixe (disons height: 100px pour l'exemple), l'autre standard, toutes les deux en display: block et position: relative;
                  - dans la boîte du haut, tu crées une nouvelle boîte contenu avec position: absolute avec un paramètre top: 80px pour le décalage vers le bas (à ajuster selon tes besoins). N'oublie pas de jouer avec z-index si la boîte 1 venait à passer en-dessous de la boîte 2 (z-index: 1).

                  Fais signe si la solution marche, merci.
        • [^] # Re: Solution pas moisie

          Posté par (page perso) . Évalué à 2.

          À une époque, je faisais un «if ie» pour afficher le prologue xml et un doctype de vrai xhtml 1.1 pour les autres navigateurs.

          Maintenant, je m'en fiche. Ça me gonfle de mettre un if, et pour l'encodage du document, le prologue est plus simple que que de changer la conf du serveur ou de faire une balise meta toute moche.

          Envoyé depuis mon lapin.

        • [^] # Re: Solution moisie

          Posté par (page perso) . Évalué à 1.

          Salut,

          Pourquoi ! Pourquoi ! Pourquoi ! L'utiliser.

          A propos du prologue, je l'ai juste rajouté pour que la page ne mette pas de warning au validator afin de lui indiquer l'encoding (j'aurais aussi bien pu mettre un tag meta).

          Tout est plus simple sans. Les filles seront plus belles si tu ne le mets pas, La chance te sourira, tu rèussira tes examens, tu n'aura plus besoin d'utiliser des marges négatives à la çon, l'être aimé te reviendra...

          Ah ben dans ce cas :o)

          Plus sérieusement, j'ai réussi à contourner les 2 occurences de ce problème dans ma page :

          - dans l'un des cas en le remplaçant par un padding qui lui ne présente pas de comportement du type 'margins collapsing'.
          - pour l'autre des cas en revanche, je n'ai pas pu utiliser cette technique : j'ai donc du ruser pour que ma bordure transparente s'intègre dans la background-image.

          Pour ceux qui ont le goût du risque, la page sur laquelle je bosse est accessible ici : http://mrlem.org/dotclear/ (en construction, pas encore testé sur IE - glourps). Et le point précis pour lequel j'ai utilise cette margin négative est pour réaliser le fond de page extensible et à transparence progressive.

          (vivement que l'on puisse combiner différentes background images dans un même élément...)
          • [^] # Re: Solution moisie

            Posté par . Évalué à 2.

            vivement que l'on puisse combiner différentes background images dans un même élément...

            C'est vrai que c'est un besoin vachement simple à exprimer et qui survient souvent mais ça devient vite si compliquer avec le HTML...
            C'est d'autant plus rageant que Safari le fait.

            perso je n'hésite plus à faire 5 div (gâre à la divite!) coins haut gauche, haut droit, bas gauche, bas droit et div contenu. C'est lourd.

            C'est tout à fait le genre de détail qui montre à quel point les normes webs sont orientés présentation et non pas IHM. J'entend, c'est surtout fait pour de la documentation pas pour de l'application.
            • [^] # Re: Solution moisie

              Posté par . Évalué à 1.

              Ce sera intégré dans CSS3, qui s’annonce de mieux en mieux jour après jour (font-face, round-corner, text-shadow... enfin). La prise en charge complète par les navigateurs, ce sera sans doute pas tout de suite cependant.

              Et avec des divs bien pensés (et bien structurés), on arrive facilement à ses fins.
  • # Collapsing margins

    Posté par (page perso) . Évalué à 1.

    Bon, j'avance : cette 'feature' s'appelle 'margins collapsing' : reste plus qu'a comprendre comment traiter mon cas...

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.