Page 1 sur 1

petit souci CSS avec FF !?

Publié : 09 avr. 2006, 22:33
par HP
bon j'accuse personne mais je teste une nouvelle interface sous IE et Firefox
je voulais une zone prévisualisation en "pseudo" frame (faut dire que les overflox ça ressemble à s'y méprendre, et hop, je me dis un backround fixe, ça serait sympa :

Code : Tout sélectionner

/*Preview*/
#Previewframe {
   padding : 0.5em;
   margin: 0 0 1.5em 0;
   height: 14em;
   overflow: auto;
   background: #FFFFFF url(img/preview.png) fixed no-repeat top left;
   border: 1px solid #006699;
}
on doit donc avoir une petite image signifiant que cette fausse frame contient un aperçu (parce que y a quand même 3 "fausses frames" sur la même page)
et ça marche sous IE (inouïe, enfin moi je m'y attendais pas) et pas sous Firefox ... pourquoi ?

Publié : 09 avr. 2006, 22:46
par HP
j'ai voulu faire "trop bien", y a pas besoin du fixed sous Firefox pour que l'image garde sa place pendant le scroll ...
si j'enlève le fixed, ça marche plus sous IE au moment du scroll.

Voilà, voilà ...
j'arrête le CSS pour aujourd'hui ...
:lol:

Publié : 09 avr. 2006, 23:22
par FF_Olivier
Essaie ceci :

Code : Tout sélectionner

<div id="previewBackground">
  <div id="previewText">
    <p>bla bla bla</p>
  </div>
</div>

Code : Tout sélectionner

#previewBackground {
  margin: 0 0 1.5em 0;
  border: 1px solid #006699; 
  height: 14em;
  overflow: auto;
  background: #FFFFFF url(img/preview.png) no-repeat top left;
}
#previewText {
  padding : 0.5em;
}
En consacrant une <div> au fond et l'autre au texte, ça devrait aller car plus besoin de fixed.

Publié : 09 avr. 2006, 23:42
par HP
j'essaierai ...
mais imbriquer 2 divs juste pour aider IE !? je sais pas ...

Publié : 09 avr. 2006, 23:59
par FF_Olivier
Euh, en effet, je viens d'essayer, ça ne marche pas, dans IE, désolé :oops:
Pourtant, j'avais vu une méthode il n'y a pas longtemps, je vais chercher encore un peu.

Publié : 10 avr. 2006, 00:02
par HP
FF_Olivier a écrit :Pourtant, j'avais vu une méthode il n'y a pas longtemps, je vais chercher encore un peu.
sinon, laisse tomber IE,
je verrai si mon CSS passe bien dans Opéra,
mais comme c'est une zone d'administration, ça me fait traîner les pieds :lol:

[EDIT]
ça passe dans Opéra ...
l'image de fond accompagne bien le scroll (sans avoir besoin du fixed)
Image

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

Publié : 10 avr. 2006, 00:16
par FF_Olivier
Voilà, j'ai :) ! Ca marche sous FF et sous IE (pour Opera, je ne sais pas) :

Code : Tout sélectionner

#previewBackground {
  height: 14em;
  margin: 0 0 1.5em 0;
  border: 1px solid #006699;
  background: #FFFFFF url(img/preview.png) no-repeat top left;
}
#previewFlow {
  height: 14em;
  overflow: auto;
}
#previewText {
  padding : 0.5em;
}

Code : Tout sélectionner

<div id="previewBackground">
  <div id="previewFlow">
    <div id="previewText">
      <p>Un très long paragraphe</p>
    </div>
  </div>
</div>
C'est en fait 3 <div> qu'il faut imbriquer. Je sais, c'est lourd mais ça marche ;) !