[IE6] Input vervormd wanneer ik er iets in typ

[Verwijderd]

Foto 1 - Situatie voor het typen:



Foto 2 - Situatie na het typen:



Heb gans het internet “Gegoogled”, maar niets te vinden...

Weet enkel dat het probleem ligt aan het feit dat de grootte van de input is bepaald door een percentage. Als je het in pixels uitdrukt, heb ik het probleem niet, maar das is in dit geval niet mogelijk. Deze “picker” moet alle maten aankunnen...

Iemand een idee? Ben hier zowat een zenuwinzinking nabij!

[UltimateB]

Live voorbeeld? Dan valt er wat meer over te zeggen?

[TeeDee]

Verwijderd schreef op donderdag 30 augustus 2007 @ 12:01:
Heb gans het internet “Gegoogled”,

Dat zal wel meevallen toch?

Kan je geen max-width in percentage aangeven? Het verschil in grootte is zoals ik zie de 'xxx'.

[Padschild]

Stuur eens wat code (HTML en CSS), wat heb je gebruikt en al geprobeert?

[BasieP]

TeeDee schreef op donderdag 30 augustus 2007 @ 14:02:
[...]

Dat zal wel meevallen toch?

Kan je geen max-width in percentage aangeven? Het verschil in grootte is zoals ik zie de 'xxx'.

dat gaat nooit lukken, sowieso is max-width nog niet overal ondersteund (raad maar waar) en bovendien zou dat ding gewoon never nooit niet mogen meesizen met de inhoud van dat ding.

* BasieP wil ook code zien. Hier kan zelfs de beste guru niks mee

[ Voor 6% gewijzigd door BasieP op 30-08-2007 14:43 ]

[TeeDee]

BasieP schreef op donderdag 30 augustus 2007 @ 14:43:
[...]

dat gaat nooit lukken, sowieso is max-width nog niet overal ondersteund (raad maar waar) en bovendien zou dat ding gewoon never nooit niet mogen meesizen met de inhoud van dat ding.

Hmm, je hebt gelijk. Voortaan niet meer via Google cache deze bekijken en vluchtig doornemen .

* BasieP wil ook code zien. Hier kan zelfs de beste guru niks mee

[Verwijderd]

Sorry dat ik geen live situatie of code had gepost, maar had gehoopt dat iemand deze bug zou herkennen.

Wat ik al heb geprobeerd: Layout geven door een achterdeurtje (zoom: 1;), position op relative gezet, ...

Live pagina: http://maxvoltar.com/got/ie6input/

Ik zou nog graag het volgende willen zeggen: JA, het is een sh*tload aan code, maar na enkele maanden kan ik ermee leven... Wat we hiermee wouden bereiken is een menusysteem dat we om het even waar in de layout kunnen plaatsen zonder dat ie breekt + dat we er gelijk welke content in kunnen plaatsen.

[ Voor 10% gewijzigd door Verwijderd op 31-08-2007 09:29 ]

[BasieP]

maxvoltar

…is working on a blog and some other things. Design- & Appletalk coming your way soon!

tim [at] maxvoltar [dot] be

daar kunnen we geen drol mee natuurlijk. Een testcase is wel grappig wanneer we de JS code ook kunnen zien zonder ons best te hoeven doen

verder mag je id's maar 1x op een pagina gebruiken, jij gebruikt ze per box, dus totaal 5x.
Dat is sowieso al fout.

[ Voor 17% gewijzigd door BasieP op 31-08-2007 10:54 ]

[Verwijderd]

Javascript heeft hier niets mee te zien, in de applicatie gebruikt het menu JS, maar voor deze testcase is dit niet nodig aangezien daar geen problemen mee zijn.

Dat is ook de rede dat er 5x hetzelfde ID staat, heb snel een pagina ineen geflanst waar hetzelfde menu in 5 verschillende maten staat (om snel bugs in IE op te merken)

[Verwijderd]

Na wat googelen vond ik iets in de w3c-specificaties over replaced elements (http://www.w3.org/TR/CSS21/conform.html#replaced-element) en intrinsieke afmetingen, plus de consequenties voor width's en marges.

Als ik het goed begrijp gebeurt het volgende: input's en img's zijn inline elements die in principe geen width kunnen hebben, maar omdat ze replaced zijn, kan er alsnog een width aan worden toegekend. In het geval van een percentage wordt dit echter niet gerelateerd aan het containing block, maar aan de intrinsieke width.

Ik neem aan dat de intrinsieke width de breedte is, die een input text krijgt als je 'm zonder breedtespecificatie invoegt.

* BartDG hoort het graag als hij iets verkeerd begrepen heeft.

[Verwijderd]

Waarom is het dan, in mijn 7 jaar websites bouwen, de eerste keer dat ik zoiets funky tegenkom?

Ik heb altijd al de breedte van een input kunnen bepalen door volgend rekensommetje:

Total Width = Width + Padding Left + Padding Right + Border Left + Border Right

Daarom: de breedte van deze inputs is ingesteld op 100%, en daarnaast is een safetynet van 6px opgesteld om een padding van 2x 2px + een border van 2x 1px op te vangen.
Elke browser doet dit correct (ook IE6), maar van het moment dat je in IE6 begint te typen, houdt ie zich niet meer aan het rekensommetje...

[Verwijderd]

Helpt het als je de width op auto zet ipv 100%?

[Verwijderd]

Verwijderd schreef op vrijdag 31 augustus 2007 @ 15:48:
Helpt het als je de width op auto zet ipv 100%?

Dit geeft de input fields de default breedte dat de browser ze geeft. Dus ook geen oplossing :-)

Iemand zin om ff de heer Gates een bezoekje te gaan brengen? Hij zou misschien alle uren die ik al heb verloren aan het oplossen van IE6-bugs kunnen terugbetalen...

[Verwijderd]

Ik krijg je probleem maar niet gereproduceerd in een "uitgeklede versie". Heb je een idee welke combinatie van elementen en styles dit veroorzaakt?

[Verwijderd]

Het is geen combinatie van elementen. Het gebeurd telkens als je de breedte van een input bepaald met een percentage (in dit gevan 100%). Enkel IE6 vertoond deze bug.

[Padschild]

Verwijderd schreef op maandag 03 september 2007 @ 09:33:
Het is geen combinatie van elementen. Het gebeurd telkens als je de breedte van een input bepaald met een percentage (in dit gevan 100%). Enkel IE6 vertoond deze bug.

IE6 kan volgensmij niet zo lekker overweg als je procenten gebruikt, waarbij ook paddings en dergelijke worden ingesteld. Dan krijg je namelijk '100% + padding + border + margin' als breedte.

Verder snap ik niet precies waar deze fout kan zitten, wat komt doordat je nog steeds geen code post. Een live pagina is voor ons lastig omdat we dan zelf moeten gaan kijken hoe alles werkt. Geef gewoon even stukken code die alleen betrekking hebben op dat stukje, waarbij je html, css en eventueel js meeneemt. Misschien doordat je gaat zoeken welke code betrekking heeft op dit stukje, kom je zelf al tot de oplossing

[Verwijderd]

IE6 kan volgensmij niet zo lekker overweg als je procenten gebruikt, waarbij ook paddings en dergelijke worden ingesteld. Dan krijg je namelijk '100% + padding + border + margin' als breedte.

Er is rekening gehouden met de 100% + padding + border

Verder snap ik niet precies waar deze fout kan zitten, wat komt doordat je nog steeds geen code post. Een live pagina is voor ons lastig omdat we dan zelf moeten gaan kijken hoe alles werkt. Geef gewoon even stukken code die alleen betrekking hebben op dat stukje, waarbij je html, css en eventueel js meeneemt. Misschien doordat je gaat zoeken welke code betrekking heeft op dit stukje, kom je zelf al tot de oplossing

HTML:

<div class="picker">
    <span class="button"></span>
    <div class="pickercontent-wrapper">
        <div class="pickercontent-container">
            <div class="pickercontent">
                ...content van menu hierzo...
            </div><!-- pickercontent -->
        </div><!-- pickercontent-container -->
    </div><!-- pickercontent-wrapper -->
    <div class="pickerlabel">
        <input class="text full" type="text" name="duedate" value="12/06/07" id="duedate" />
    </div><!-- pickerlabel -->
</div><!-- picker -->

Cascading Stylesheet:

div.picker div.pickerlabel input.text.full {
    float: left;
    width: 100%;
}

Alsjeblieft :-)

En het "live" voorbeeld was eigenlijk niet echt live hoor. Meer een soort van statische pagina's met verschillende mogelijkheden...