Input & background-attachment sur IE7
Bonjour,
Je me permets de vous déranger sur un problème qui ne laisse pas de m'étonner. Voilà, j'ai développé il y a quelques temps une application sur l'intranet de mon entreprise ; l'interface utilisateur de cette application est développée en html généré via php / mssql. Tout les utilisateurs sont sur IE 6 ; nous nous étions attachés à faire une interface un peu sympathique, avec un look & feel un peu "élaboré" (tout est relatif hein :mrgreen:). Or, la prod' a pour projet de migrer tout les utilisateurs sur IE 7. Je dois donc m'assurer que l'interface fonctionne correctement sous IE 7. Voilà mon souci : pour les input de type texte, j'avais procédé la manière suivante :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.input_el {
font:1em Verdana, Arial, Helvetica, sans-serif ;
margin:3px;
height:20px;
border:solid 0 #fff;
padding: 3px 8px;
background-attachment: fixed;
background-color: transparent;
background-image: url(textfield_bg.gif);
background-position: bottom;
background-repeat: no-repeat;
width:150px;
vertical-align:bottom;
} |
Les inputs étaient ensuite générés de la manière suivante dans les pages :
Code:
1
2
|
<input class="input_el" type="text" value = "" id="blabla_id" name="blabla" /> |
Sous IE6, le comportement était tel qu'attendu : affichage de l'image de fond, et lorsque le texte saisi était plus long que l'input, mon image de fond ne mouftait pas, ne se décalait pas.
Sous IE 7, là c'est le drame. Telle quelle, l'image de fond ne s'affiche même pas. Lorsque j'enlève la mention background-attachment: fixed, là ô miracle, l'image s'affiche bien ... Sauf que forcément, dès que le texte est plus long que l'input, l'image ne reste pas en place et se décale mochement en même que la saisie.
Les recherches que j'ai pu faire sur le net ne m'ont pas vraiment aidé car j'ai lu un peu tout et son contraire sur le sujet : que mon code n'aurait même pas dû marcher sous IE6 (:mrgreen:), que IE 7 supportait justement le background-attachement. J'ai trouvé des exemples pour contourner le problème avec des vilains scripts JS redécalant l'image au fur et à mesure du scroll ...
M'enfin, tout ça ne m'a pas vraiment éclairé sur le sujet ; est-ce vraiment une de ces fameuses merveilles de cohérence IE, ou est-ce moi qui ait loupé quelque chose dans le code ? (vous savez ce que c'est des fois, à force de chercher sur un truc, on loupe l'évidence :))
Any ideas ?
