[résolu (vraiment très)]"marge parasite" avec IE

bonjour à tous,
(j'ai tout de même cherché un peu ici et ailleurs avant de poster, sans doute mal, mais là je sèche...)
Je fais deux zones de texte :

div#droite1{
  float: right ;
  margin-top:50px ;
  width:150px;
  padding: 3px 3px   3px 3px ;
  background-color: rgb(76,171,251) ;
  border: outset 2px #000033;
  position: absolute ;
  top:0px ;
  right:10px;
  margin-left: 5px ;
  padding : 5px ;

et l'autre :

div#texte{
  float: right;
  text-align: left ;
  margin-top:10px ;
  padding: 3px 3px 3px 3px;
  padding-bottom: 10px;
  top:0px ;
  margin-left:100px ;
  margin-right:180px ;
  padding: 0;
}

Si pour "texte" je donne zéro ou quelques pixels "texte" passe sous "droite1", avec ie et firefox, normal.
Pour que ça marche avec firefox je donne

margin-right:180px ;

Mais là , avec ie, ça me fait une marge à droite (je me doute qu'elle fait 180 px, mais je n'ai rien pour mesurer sur l'écran ) et bien sûr un ascenseur horizontal, comme d'ailleurs même avec quelques pixels...

Et je vois pas où j'ai m...é

Une idée ?

Dans tous les cas, la bonne journée à tous,
cordialement,
Y
Modifié par yves_web (25 Jun 2008 - 15:24)

Hello yves_web ,

en supposant que tu parles d'IE6 et pas d'IE7 cela ressemble fort au double margin bug qui survient sur un élément en float lorsque celui-ci a un margin du même côté que le float.

2 solutions :

- si cela est possible remplacer le margin par un padding.

- sinon, rajouter un display:inline; à l'élément.

A+

Heyoan a écrit :
Hello yves_web ,

en supposant que tu parles d'IE6 et pas d'IE7 cela ressemble fort au double margin bug qui survient sur un élément en float lorsque celui-ci a un margin du même côté que le float.

2 solutions :

- si cela est possible remplacer le margin par un padding.

- sinon, rajouter un display:inline; à l'élément.

A+

Fuuuu ! Un double bug ??? Je ne me croyais pas si riche ! Peut-être avec ie7 vais-je atteindre le triple ?


Merci de ta réponse, je vais essayer ça de ce pas...
A+... heu... non !
A un de ces jours,
bonne journée,
Yves

En fait le double fait référence à la marge !

Et ce bug a été corrigé dans IE7.

Par contre, si cela corrige ton décallage, merci de passer ton sujet en [Résolu] ?

Ni l'un ni l'autre ne change quoi que ce soit...
Je crains que le problème ne soit ailleurs, car dans mon code j'ai :

<!-- début des zones de menu-->
<div class="menu">
       <div id="droite1">
       (...)
       </div>
       <div id="droite2">
          (...)
       </div>
       <div id="droite3">
         (...)
       </div>
 </div>

Et que j'ai relu des notes perso et que j'y ai lu qu'on ne met qu'une "id" par page...
Car dans ma css j'ai :

/* zones menu */
div#menu {
	float:right;
	width:160px;
	background-color: #rgb(153,153,255);
	}

et j'ai aussi :

div#droite1{margin-top:50px ;...
div#droite2{margin-top:250px ;...
div#droite3{margin-top:500px ;...

absolument identiques, sauf pour le margin-top
je me demande si je ne me suis pas mis dans une m... noire

Et que je vais me faire un café pour me remettre...
Merci,
bonne journée,
Yves

yves_web a écrit :
Ni l'un ni l'autre ne change quoi que ce soit...

En tout cas pour ton #texte qui est en float:right; et qui a également un margin-right je ne vois pas bien pourquoi la marge ne serait pas doublée dans IE6 ...

Il est peut-être temps de donner un lien vers une page de test ?


Edit: concernant l'id il ne faut pas en mettre 1 par page mais chaque nom d'id doit être unique (ce qui est le cas dans le code que tu donnes) .
Modifié par Heyoan (25 Jun 2008 - 12:03)

Heyoan a écrit :
En tout cas pour ton #texte qui est en float:right; et qui a également un margin-right je ne vois pas bien pourquoi la marge ne serait pas doublée dans IE6 ...

div#texte{
  /*float: right;*/
  text-align: left ;

Et... Ca marche !!...
Alors là, si tu passes par Paris, je te paye un coup !!
Comment je me suis cassé la tête !!
Un grand merci !!

Heyoan a écrit :

Il est peut-être temps de donner un lien vers une page de test ?

Je ne peut pas la donner ici car les pages ne sont pas encore publiques (pv)

Heyoan a écrit :

Edit: concernant l'id il ne faut pas en mettre 1 par page mais chaque nom d'id doit être unique (ce qui est le cas dans le code que tu donnes) .

Bon bin si en plus, j'ai pas à rectifier 25 pages, c'est en plus une bonne nouvelle... Sur le site où je travaille, j'ai pas droit aux ssi, donc pas de header/footer.shtml, ce qui fait que la moindre modif dans les menus implique la même modif dans toutes les pages avec les erreurs de copier coller que cela peut engendrer.

Encore merci ! En principe, j'essaye de ne pas venir sur un forum pour poser un question 1000 fois posée, et je me cogne les pages d'aide, mais là je séchais complètement...
Bien cordialement,
Yves

yves_web a écrit :
Et... Ca marche !!...

Super !

Du coup, cette fois-ci, tu considères bien que ce sujet est [Résolu] ?


Edit: sinon je n'avais pas fait attention mais plusieurs de tes déclarations sont pour le moins étonnantes :
- ta div#droite1 est à la fois en float et en position:absolute !
- dans ta div#texte qui est en float, l'attribut top ne sert à rien.
- ce n'est pas #rgb(...) mais rgb(...)

Peut-être que la (re)lecture du tuto : Comment positionner les éléments en CSS ? ne serait pas inutile !
Modifié par Heyoan (25 Jun 2008 - 13:38)

Heyoan a écrit :
Super !

Du coup, cette fois-ci, tu considères bien que ce sujet est [Résolu] ?

C'est ce que vais indiquer, ma réponse postée

Heyoan a écrit :

Edit: sinon je n'avais pas fait attention mais plusieurs de tes déclarations sont pour le moins étonnantes :
- ta div#droite1 est à la fois en float et en position:absolute !
- dans ta div#texte qui est en float, l'attribut top ne sert à rien.
- ce n'est pas #rgb(...) mais rgb(...)

Merci pour la relecture, tu sais souvent dès qu'un truc marche, je vais pas chercher plus loin

Heyoan a écrit :

Peut-être que la (re)lecture du tuto : Comment positionner les éléments en CSS ? ne serait pas inutile !

Ptet bin...
Juste histoire de ne plus avoir des déclarations pour le moins étonnantes
Et encore merci pour ton aide !
Bonne journée,
Yves