Javascript et réglage marges avec Gecko

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !

Modérateur : Asumbaa

Répondre
Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Javascript et réglage marges avec Gecko

Message par Ursa Major » 02 sept. 2005, 13:37

Bonjour,

Je tombe sur un fonctionnement bizarre des navigateurs de la famille Gecko, dont mon préféré FF !

Le but est de régler dynamiquement les marges d'un bloc <DIV> avec un bout de javascript.

Il semble que, sous Gecko, cela ne marche pas uniquement avec la marge basse. Curieux...

Voici un petit bout de code pour mettre le défaut en évidence :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- Date de création: 02/09/05 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bug FireFox ? </title>
<script type="text/javascript">
<!--
function Modif(i) {
	if (i == 1) {
		document.getElementById("B").style.marginTop = document.getElementsByName("edTop")[0].value;
	}
	else {
		document.getElementById("B").style.marginBottom = document.getElementsByName("edBottom")[0].value;
	}
}
-->
</script>
</head>
<body>
<div style="border: 1px dotted #FF00FF;">Texte 1.</div>
<div id="B" style="border: 1px dotted #0000FF;">Texte 2.</div>
<div style="border: 1px dotted #FF00FF;">Texte 3.</div>
<div>
marginTop : <input type="text" name="edTop" onBlur="Modif(1)">
marginBottom : <input type="text" name="edBottom" onBlur="Modif(2)">
</div>
</body>
</html>
Ici, on tente de régler les marges hautes et basses du <DIV> qui a son id="B".
Le réglage ne marche pas uniquement pour la marge basse avec FF, Mozilla et Netscape, mais fonctinne très bien avec Opera et IE (un comble !)

Qu'en pensez-vous ?

jv2759
Tyrannosaurus Rex
Messages : 4161
Enregistré le : 12 févr. 2004, 14:29

Message par jv2759 » 02 sept. 2005, 15:40

Si je dit que j'ai corriger le probléme : utilise ceci et cela vas marcher :

Code : Tout sélectionner

<script type="text/javascript">
<!--
function Modif(i) {
   if (i == 1) {
      document.getElementById("B").style.marginTop = document.getElementsByName("edTop")[0].value;
   }
   else {
      document.getElementById("B").style.marginBottom = document.getElementsByName("edBottom")[0].value;
      document.getElementById("C").style.marginBottom = document.getElementsByName("edBottom")[0].value;
   }
}
-->
</script>

...

<div id="B" style="border: 1px dotted #0000FF;">Texte 2.</div>
<div id="C" style="border: 1px dotted #FF00FF;">Texte 3.</div>
Je te rassure, ce n'est pas normale, en fait j'ai tricher en récupérant le code d'un bug... Car ils y as bug ces certain...

Mais le plus inquitant, c'est que ce bug, as était marquer comme corriger, hors au vue de ce qui t'arrive, ils est évident qu'il n'en est rien dutout... Ils faudrait tester avec dp pour voir...

https://bugzilla.mozilla.org/show_bug.cgi?id=266992

Mais si cela ce produit aussi avec lui, alors ils serais pas mal de réouvrire le bug...
Inscrit sur la liste des abonner absent...

Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Javascript et réglage marges avec Gecko

Message par Ursa Major » 02 sept. 2005, 16:23

J'osais pas le dire, mais ça ressemble bien à un... bug !!!

Indication : quand on regarde avec l'inspecteur DOM, on retrouve bien les tags affectés des bonnes valeurs de margin...

Ce serait donc un problème d'affichage ?

Heu, et pardon pour la question de Dummy ; ça veut dire quoi ça :
Ils faudrait tester avec dp pour voir

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 02 sept. 2005, 16:30

DP = Deer Park = la version de développement de Firefox, dans laquelle ce bug pourrait bien être résolu :wink:

Bobe
Iguane
Messages : 742
Enregistré le : 28 juil. 2003, 21:29

Message par Bobe » 02 sept. 2005, 17:22

Le bug semble en effet corrigé dans Deer Park (plus précisément: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8b4) Gecko/20050901 Firefox/1.0+).
Je regarde si je trouve l’entrée correspondante dans le bugzilla.

edit: ah, c'est celui donné plus haut.
« La vie d’un geek est un combat perpétuel contre l’imperfection »

Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Javascript et réglage marges avec Gecko

Message par Ursa Major » 02 sept. 2005, 17:36

Merci pour les infos :)

J'ai essayé avec Deer Park alpha 2 : le bug a bien disparu.

Ceci dit, je pense que j'ai intérêt à implanter le workaround de jv2759, pour les autres navigateurs à base de moteur Gecko, même si peu de gens s'en servent.


Au fait (encore une question de nul ;) ) : on me dit que le bug est présent sur Safari. Safari utilise aussi le moteur Gecko ?

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 02 sept. 2005, 18:03

Non, Safari utilise KHTML (enfin, une version très modifiée de celui-ci), mais cependant il est effectivement très très proche de Gecko sur de nombreux points. (Je crois qu'il s'identifie comme like-gecko ou un truc du genre...) :wink:

Benoit
Administrateur
Messages : 4894
Enregistré le : 19 juil. 2003, 10:59

Message par Benoit » 02 sept. 2005, 18:03

Non, mais une bonne partie de la gestion des styles a été écrite par la même personne, ça peut expliquer des choses ;)
♫ Li tens s'en veit, je n'ai riens fais ;
Li tens revient, je ne fais riens. ♪

jv2759
Tyrannosaurus Rex
Messages : 4161
Enregistré le : 12 févr. 2004, 14:29

Re: Javascript et réglage marges avec Gecko

Message par jv2759 » 02 sept. 2005, 19:46

Ursa Major a écrit :Ceci dit, je pense que j'ai intérêt à implanter le workaround de jv2759, pour les autres navigateurs à base de moteur Gecko, même si peu de gens s'en servent.

SURTOUT PAS... Je disait cela sous forme de boutade... Car ce code et totalement incorect. Si tu fait cela, le jour ou qq'un sur ff 1.5 voudrat regarder ton code, plus rien ne marcheras...

Si vraiment tu ne peux pas faire autrement, alors essais de faire une detection de la version du naviguateur et envoyer la version altérer si et seulement si c'est baser sur du gecko<1.8... Mais franchement évite... Ils n'y as rien de pire que d'envoyer un code buger, car au final tu as plus de chace d'avoir des probléme que de voir ce dernier marchais... Je sais que ce n'est pas génial, mais il faut éviter...

Maintenant si tu veux absolument faire quelque chose, alors tu peux essayer de tricher, en changant de point de vue...

Par exemple tu veux ajouter une marge en dessou. Cela ne marche pas. Par contre le padding cela fonctione, tu peux mettre ton dive dans un div contenaire ou tu metra à lui du padding, ce n'est pas la même notion certe, mais cela fonctioneras visuelement de maniçére identique :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- Date de création: 02/09/05 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bug FireFox ? </title><style>
body, html{
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
</style>
<script type="text/javascript">
<!--
function Modif(i) {
   if (i == 1) {
      document.getElementById("B").style.marginTop = document.getElementsByName("edTop")[0].value;
   }
   else {
      document.getElementById("B_C").style.paddingBottom = document.getElementsByName("edBottom")[0].value;
   }
}
-->
</script>
</head>
<body>
<div id="A" style="border: 1px dotted #FF00FF;">Texte 1.</div>
<div id="B_C"><div id="B" style="border: 1px dotted #0000FF;">Texte 2.</div></div>
<div id="C" style="border: 1px dotted #FF00FF;">Texte 3.</div>
<div>
marginTop : <input type="text" name="edTop" onBlur="Modif(1)">
marginBottom : <input type="text" name="edBottom" onBlur="Modif(2)">
</div>
</body>
</html> 
Inscrit sur la liste des abonner absent...

Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Message par Ursa Major » 02 sept. 2005, 22:16

Merci, jv2759, mais un padding ce n'est pas vraiment la même chose qu'un margin :twisted:

A la suite de ton idée, j'ai codé un workaround assez simple. Reporté au petit exemple bidon de tout à l'heure cela donne ceci :

Code : Tout sélectionner

		document.getElementById("B").style.marginBottom = document.getElementsByName("edBottom")[0].value;
     	var sav = document.getElementById("C").style.marginTop;
     	document.getElementById("C").style.marginTop = 10; // workaround !
     	document.getElementById("C").style.marginTop = sav; // et on remet la bonne valeur d'attribut de l'élément "C"
Le principe est de faire bouger l'élément juste en dessous (ici "C") celui dont on veut réellement modifier la marginBottom. Mais on prend soin de sauvegarder la valeur de l'attribut de "C" avant. C'est plus propre 8)

Bon, d'accord, c'est un peu bourrin mais maintenant j'ai le réglage de marginBottom qui marche sur tous les navigateurs... En attendant FF 1.5 !

jv2759
Tyrannosaurus Rex
Messages : 4161
Enregistré le : 12 févr. 2004, 14:29

Message par jv2759 » 02 sept. 2005, 22:28

Ursa Major a écrit :Merci, jv2759, mais un padding ce n'est pas vraiment la même chose qu'un margin :twisted:
Cela dépend du point de vue.

Margin et padding fond référence à la même notion c'elle de marge...

margin faisant référence à une marge externe, donc une zone en dehort de la zone utiliser.

padding faisant lui référence à une marge interne...donc une zone considérer comme faisant partie...

Donc quand on inbrique des div, le padding de la boite externe et le margin de la boite interne...

Et franchement dans les fait, je ne sais pas ce qu'il y as de mieux, transformer le margin-bottom de l'un en margin-top de l'autre, ou le margin de l'un en padding pour un autre... ;)
Inscrit sur la liste des abonner absent...

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 02 sept. 2005, 22:30

Mais s'il y a un background et/ou une bordure au div, un padding n'est pas du tout équivalent à un margin :wink: (je crois bien que c'est le cas ici...)

Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Message par Ursa Major » 02 sept. 2005, 23:29

Mais s'il y a un background et/ou une bordure au div, un padding n'est pas du tout équivalent à un margin
Exact !

C pour ça que je me permets de triturer le marginTop (ou une autre marge) de l'élément juste en dessous. C pas grave, puisque je le remets ensuite à sa bonne valeur juste après...


Maintenant, si qq'un a une solution plus élégante, je suis preneur :)

De toutes façons, merci encore ; grâce à vous, j'ai déjà un workaround possible à mon problème.

jv2759
Tyrannosaurus Rex
Messages : 4161
Enregistré le : 12 févr. 2004, 14:29

Message par jv2759 » 03 sept. 2005, 00:13

calimo a écrit :Mais s'il y a un background et/ou une bordure au div, un padding n'est pas du tout équivalent à un margin :wink: (je crois bien que c'est le cas ici...)
Si puisque le div central je ne le touche pas... en fait c'est le div contenaire virtuel que je modifie, or ce dernier n'as pas de bordure, ni de background, donc si on lui fait du padding il ne vas rien modifier...
Inscrit sur la liste des abonner absent...

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 2 invités