Kijk uw projecten eens na!

Onlangs pas heb ik deze bug ontdekt dat als je een achtergrond-afbeelding zet via CSS op een input field type text, dat in IE6 & IE7 (inderdaad, bug zit er nog steeds in) de achtergrond-afbeelding wegschuift als er meer data in het veld invoerd wordt als dat het visueel kan bevatten. Moeilijke uitleg, maar zal ik je even tonen:

background image normal state

En dit gebeurd in normaal gezien als je meer inhoud ingeeft:

background image normal state

Maar dit gebeurd in IE6 & IE7 met dezelfde hoeveelheid:

background image error state

Je ziet de achtergrond-afbeelding gewoon wegschuiven naargelang je meer data in het veld invoert.

Live voorbeeld

Hier een live voorbeeld, bekijk het eens met Opera, FireFox en dan met IE6 of IE7 en test het maar eens uit.

Oplossing

Het zou geen nut hebben hierover te berichten tenzij er een oplossing zou bestaan. Na een beetje experimenteren en logisch nadenken kwam ik met volgende oplossing:

Dit is je CSS:

#member form input{
background: #E9DFC6 url(images/input_box.gif) no-repeat 0 0;
}

En daar zit de fout al voor IE6 & IE7, je zegt dat de achtergrond-afbeelding altijd links boven moet staan background: #E9DFC6 url(images/input_box.gif) no-repeat 0 0;, dus als je meer data ingeeft als voorzien door de width, dan zal logisch gezien de afbeelding zich steeds opnieuw links boven verplaatsen en dus verschuiven. Logisch toch?, wel voor IE6 & IE77, andere browsers gaan een stapje verder en weten dat ze dit niet moeten doen daar het begrip achtergrond-afbeelding nutteloos wordt als ze dit zouden doen.

Uit logisch perspectief lijkt het alsof de moderne browsers hier in de fout gaan.

De oplossing ligt erin om IE6 & IE7 dezelfde logica te laten volgen maar dan uit een andere hoek, namelijk:

#member form input{
background: #E9DFC6 url(images/input_box.gif) no-repeat bottom right;
}

Nu zal de achtergrond-afbeelding zich altijd weer opnieuw rechts onder plaatsen als er meer data ingevoerd wordt als visueel voorzien door de width:

background image normal state

Ook hier weer een live voorbeeld dat je met verschillende browsers kan testen, deze versie bevat de correctie voor het bovenste input field.

Een andere oplossing zou zijn om de achtergrond-afbeelding te zetten op een parent element, maar dit is voor elk een beslissing om zelf te nemen.

En jij?

Heb jij dit al tegen gekomen, en zitten jouw projecten met hetzelfde probleem, misschien zonder dat je het weet? Ik zou zeggen kijk ze eens na!