Discussion :

[iubito]

Salut !

ça faisait longtemps ^^

Je ne comprends pas pourquoi ce bout de code ne veut pas marcher dans Firefox et Opera, alors que sous IE il marche très bien, et pourtant j'ai pas l'impression d'avoir fait du "spécifique IE".

Je veux mon image (ok ou erreur .gif) à gauche de mon div avec mon message d'erreur ou de succès un peu plus loin à droite.
Le div a un contour (c'est bon), un fond pâle (ça marche aussi), et puis l'image que j'ajoute en background, fixé à gauche, sans répétition, et là dans FF et Opera je n'ai pas l'image

Voici le code CSS, j'ai essayé de 2 manières, trituré dans tous les sens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
.messageErreur {
        border: 2px solid #f44; background: fixed #fdd url('erreur.gif') 15px center no-repeat;
        padding: 2px; padding-left: 40px;
        font-weight:bold; color:#800;
}
.messageOK {
        border: 2px solid #484;
        background-color: #efe;
        background-image: url('ok.gif');
        background-attachment: fixed;
        background-position: 15px center;
        background-repeat: no-repeat;
        padding: 2px; padding-left: 40px;
        font-weight: bold; color: #040;
}
</style>

et mon bout de code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<div class="messageErreur">Ici un message d'erreur</div>
<div class="messageOK">Ici le message de succès</div>

Si quelqu'un voit ce qui cloche...

[spirou]

Salut !!

Cela vient probablement du fait que tu as mis des quotes pour l'adresse de tes images dans ton css, essaies sans.

[iubito]

j'ai déjà essayé, des quotes simples ou doubles, rien, un fichier dans le même répertoire, un fichier bien présent sur le web...

[spirou]

Je viens d'essayer et en fait l'image est hors du bloc div, j'ai mis un background-position: 15px 50px; et là l'image est visible, bizarre...

Va falloir hacker.

[iubito]

ça marche pas mieux chez moi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-position: 15px 5px;

tu as mis quoi au juste ?

[spirou]

Le problème vient du fait que le background: position est appliqué sur le body et non sur ton div, ce qui fait que si ton div est plus bas que la hauteur de ton image tu ne la verras pas, je ne sais pas trop comment parer le problème.

[hunter]

salut

enleve

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

   background-attachment: fixed;

j'espere que ca peut t'aidé

[iubito]

salut

enleve

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

   background-attachment: fixed;

j'espere que ca peut t'aidé

effectivement c'est ce qu'il fallait !

[adiGuba]

Salut,

Pour l'explication, il me semble que le background-attachment: fixed est mal géré par IE puisque ces images doivent être fixe par rapport à la page et non pas par rapport à l'élément sur lequel elle sont positionné... Donc l'image est positionné selon le coin en haut à gauche de la page...

a++

[iubito]

ah ok !
Moi ça m'aurait paru logique (comme fait IE) que ce soit fixe par rapport à mon div, et non par rapport au body (ce que semblent faire FF et Opera) vu que je l'applique à un div... Parce que le jour où je met une hauteur et un overflow:scroll... je l'ai dans l'...