[CSS en IE] width problemen

[Verwijderd]

Hallo

Ik zit met volgend probleem en kan onmogelijk een oplossing vinden.

Klein voorbeeld:

Ik heb een tabel met width 100% met 1 rij en 4 kolommen:

• Kolom 1 bevat een label
• Kolom 2 bevat een input veld
• Kolom 3 bevat een label
• Kolom 4 bevat een input veld

Mijn bedoeling is om de kolommen die labels bevatten even breed maken als de label zelf. Ik kan dit niet fixed maken aangezien onze web applicatie multilingual is en de lengte van de labels verschillen per taal. Dit is mij goed gelukt door die kolommen 1px breed te maken en gebruik te maken van "white-space:nowrap".

Mijn probleem ligt in de kolommen die de input velden bevatten. Ik wil ze zo breed maken als mogelijk zonder dat er een horizontale scrollbar verschijnt. Dit is mij gelukt door "width:100%;min-width:100%" te gebruiken als style voor de input velden. Mijn probleem is dat er een horizontale scrollbar verschijnt wanneer de inhoud van de input velden te lang wordt. IE gaat de input velden zo breed maken dat de volledige inhoud van de input veld zichtbaar is. Dit wil ik niet. Ik wil dat IE de input veld zo breed maakt als mogelijk (breedte van de TD cel) zonder dat er een horizontale scrollbar verschijnt.

Ik heb de indruk dat IE zich baseert op de inhoud van het input veld, alleen maar indien de tekst in het veld langer is dan de breedte van de TD cel waarin het veld zich bevindt. Indien de tekst minder breed is dan de breedte van de TD cel dan zal IE de input veld even breed maken als de TD zoals gewenst.

In Firefox is alles perfect. Als je kijkt op mijn testpagina met IE en Firefox dan zie je dat in Firefox geen horizontal scrollbar verschijnt, ongeacht de breedte van het venster. Firefox zal zich aanpassen, IE niet.


Test pagina: http://www.avalonfiles.com/test.htm

De html code van die pagina:

code:

<table border="0" width="100%">
    <tr>
        <td style="width:1px">
            <div style="white-space:nowrap">
                Dit is een label: 
            </div>
        </td>
        <td>
            <input type="text" style="min-width:100%;width:100%;" value="value value value value value value value value value value value value value value value value value value value value value value value value value value value "/>
        </td>
        <td style="width:1px">
            <div style="white-space:nowrap">
                Dit is een label:
            </div>
        </td>
        <td>
            <input type="text" style="width:100%;min-width:100%" value="value value"/>
        </td>
    </tr>
</table>

Bestaat er hiervoor een oplossing? Ik zou graag percentages willen blijven gebruiken.

Wat is jullie mening hierover?

Met vriendelijke groeten

Christophe Bonte

[Bosmonster]

Is een bug in Internet Explorer. Voor zover ik weet zijn daar geen oplossingen voor.

[Da Weef]

Als je de breedte van de input op 100% zet gaat het inderdaad mis in IE, dat is dus sowieso geen optie (width 100% verwijderen dus).

Er is wel een workaround met CSS. je kunt de input omsluiten met een div en dan op basis van de breedte van de div met javascript de breedte bepalen van de input:

code:

#inputdiv{
    width: 100%;}   

input{
    width: expression(document.getElementById('inputdiv').offsetWidth + "px"); }

EDIT: voorbeeld

[ Voor 8% gewijzigd door Da Weef op 14-08-2008 12:37 ]

[Verwijderd]

Super bedankt voor deze workaround !

[Da Weef]

Verwijderd schreef op donderdag 14 augustus 2008 @ 16:46:
Super bedankt voor deze workaround !

Volgens mij is ie trouwens niet heel robuust voor alle browsers, dus het is wel aan te raden om hem met conditional statement voor IE te gebruiken en voor alle andere browsers gewoon width van input op 100% zetten.

[Bosmonster]

Resizen gaat alleen niet in IE. No big deal, het is in ieder geval iets

[Da Weef]

Bosmonster schreef op donderdag 14 augustus 2008 @ 17:09:
Resizen gaat alleen niet in IE. No big deal, het is in ieder geval iets

ssssssshhht, gewoon op refresh klikken