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 blobmaster . Évalué à 3.
--> []
[^] # Re: Solution moisie
Posté par mrlem (site web personnel) . Évalué à 1.
Joli cache-misère sinon ;o)
[^] # Re: Solution moisie
Posté par blobmaster . Évalué à 2.
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 Grégory SCHMITT . Évalué à 1.
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 blobmaster . Évalué à 2.
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 Grégory SCHMITT . Évalué à 1.
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 blobmaster . Évalué à 2.
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 mrlem (site web personnel) . Évalué à 1.
- 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 Grégory SCHMITT . Évalué à 1.
- 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 yellowiscool . Évalué à 2.
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 mrlem (site web personnel) . Évalué à 1.
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 blobmaster . Évalué à 2.
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 Grégory SCHMITT . Évalué à 1.
Et avec des divs bien pensés (et bien structurés), on arrive facilement à ses fins.
# Collapsing margins
Posté par mrlem (site web personnel) . Évalué à 1.
[^] # Re: Collapsing margins
Posté par Grégory SCHMITT . Évalué à 1.
http://www.w3schools.com/css/tryit.asp?filename=trycss_visib(...)
Néanmoins, pas sûr que ce soit la bonne solution…
[^] # Re: Collapsing margins
Posté par mrlem (site web personnel) . Évalué à 1.
En fait, pour expliquer mon problème, je faisais référence à http://css-discuss.incutio.com/?page=CollapsingMargin
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.