[CSS] IE houd <input> achtergrond niet op z'n plek

[blue-gene]

Ik heb een invoerveldje met een achtergrond, zie voorbeeldje:
http://www.daniel.ejoty.nl/temp/

Wanneer ik hier ga typen en de inhoud langer word dan de breedte van het invoerveld schuift de hele inhoud naar links terwijl je doortypt, zoals het hoort.
Maar in Internet Explorer gaat de achtergrond ook mee.

Hieronder de CSS van het voorbeeld.

Cascading Stylesheet:

form input.textfield {
    width: 139px;
    height: 15px;
    background: url("images/textfield_bg.png") left top no-repeat;
    margin: 0;
    padding: 3px 5px 0 5px;
    font-size: 10px;
    border: 1px solid #4a4a4a;
}

Normaal gesproken vind ik wel een goede oplossing voor een IE bug, maar bij deze kan ik er maar weinig over vinden.
Een oplossing die ik heb kunnen vinden was: de achtergrond niet aan de <input> geven maar aan een <div> eromheen of aan het <form> waar de <input> inzit.
Probleem is alleen dat in IE de margin van een <input> altijd net wat anders, dan bij bijvoorbeeld Firefox.
Daarbij vind ik het een beetje lelijk, ik vind een nette pagina namelijk erg belangrijk.

Misschien weet iemand een andere mogelijkheid om dit probleem op te lossen?
Het probleem doet zich voor in zowel versie 6 als 7.

[curry684]

Uhm je kunt dit wel een IE-bug noemen, maar volgens mij handelt die dit correcter af dan Firefox? Een background heeft namelijk als default attachment 'scroll', wat betekent dat de achtergrond meescrollt met de content van het element. Omdat je feitelijk naar rechts scrollt door teveel te typen is het dus correct dat de achtergrond naar links wegscrollt. In je CSS kun je de volgende rule opnemen:

Cascading Stylesheet:

background-attachment: fixed;

Hiermee dwing je de achtergrond op dezelfde plek te blijven ondanks scrollen. En knap genoeg gaat Firefox compleet de fout in als ik dit op jouw pagina uitprobeer via realtime CSS manipulation, dus geen idee of de Firefox bug (!) hier geen specifieke workaround behoeft.

[DelTorro]

Met:

curry684 schreef op zondag 13 januari 2008 @ 02:54:

Cascading Stylesheet:

background-attachment: fixed;

gaat 't in Firefox inderdaad niet goed. Ik zou daarom background-attachment: fixed; alleen opnemen voor IE6 door middel van een conditional comment. Zie online voorbeeld.

edit: Niet alleen voor IE6 maar ook voor IE7 opnemen.

[ Voor 7% gewijzigd door DelTorro op 13-01-2008 13:43 ]

[7.01D]

DelTorro schreef op zondag 13 januari 2008 @ 13:29:
Met:

[...]


gaat 't in Firefox inderdaad niet goed. Ik zou daarom background-attachment: fixed; alleen opnemen voor IE6 door middel van een conditional comment. Zie online voorbeeld.

edit: Niet alleen voor IE6 maar ook voor IE7 opnemen.

Zowel Fx2 als IE7 geven bij mij helemaal geen achtergrond weer bij het gebruik van background-attachment: fixed;. IE6 heb ik niet getest.

[blue-gene]

Uhm je kunt dit wel een IE-bug noemen, maar volgens mij handelt die dit correcter af dan Firefox? Een background heeft namelijk als default attachment 'scroll'

Opera en Netscape doen hetzelfde als Firefox, dan zou ik toch zeggen dat het toch een foutje van IE is, het zou kunnen dat een input background standaard een attachment fixed hoort te krijgen?

7.01D: Klopt, in IE6 werkt het wel.

Dus een oplossing voor IE6, maar bij IE7 werkt het in geen van de gevallen.

[curry684]

blue-gene schreef op maandag 14 januari 2008 @ 17:16:
[...]

Opera en Netscape doen hetzelfde als Firefox, dan zou ik toch zeggen dat het toch een foutje van IE is.

Gelukkig hebben we daarom W3C-standaarden en geen democratie van browsers zodat degene met de grootste bek gelijk krijgt, anders had IE altijd gelijk namelijk gezien z'n marktaandeel. En volgens het W3C is de default background-attachment voor eender welk element toch echt 'scroll', dus doen Opera en Netscape het 'fout'.

Ik zet met opzet 'fout' hier tussen haakjes, omdat je met wat moeite de foute interpretatie nog wel kunt verdedigen door te stellen dat er feitelijk niet gescrolld wordt en er geen scrollbars zijn, maar puristisch gezien is dat gewoon bullshit: bij overflow gaat een input-box scrollen, en dan moet de background meescrollen net als in een body, een div of een tablecell.

[TomSwinnen]

Ik heb dezelfde fout bij IE7 en zit al een uur of 2 te Googl'en achter een degelijke oplossing. Nog niets gevonden, iemand die wel de oplossing weet?

[Cartman!]

De enige 'oplossing' die ik gevonden heb is een div om je input zetten en de div de background geven, ranzig maar werkt wel crossbrowser...