inputvelden scheef :-(

[Verwijderd]

Wanneer ik een invulformuliertje maak met adresgegevens krijg ik hem recht voor <IE6 maar voor IE6 staat ie dan weer scheef uitgelijnd. Heeft iemand hier een goed idee voor?
Ik ben er al achter dat IE6 een spatie groter "waardeert" dan IE 4 of IE 5, daardoor is een formulier wat in IE 4 of 5 zowel links als rechts 100% recht uitgelijnd is in IE 6 zo scheef als de toren van Pisa (die scheve).

[blender]

tabellen?

[Verwijderd]

ja ze staan al in tabellen...

probleem is dat wanneer ik bijvoorbeeld op regel 1 laat kiezen tussen man/vrouw (met checkboxjes), op regel 2 postcode & woonplaats in laat vullen en op regel 3 alleen een emailadres neerzet de layout in IE6 of IE5 vernaaid is.

het ziet er dan zo uit in IE5:

code:

ODhr OMevr XXXXXXXXXXX aanhef, naam
XXXX XX XXXXXXXXXXXXXX postcode, woonplaats
XXXXXXXXXXXXXXXXXXXXXX email

Wat ie er van maakt in IE 6 is dan iets als:

code:

ODhr OMevr XXXXXXXXXXX aanhef, naam
XXXX XX XXXXXXXXXXXXXXX postcode, woonplaats
XXXXXXXXXXXXXXXXXXXXXX email

snappie?

[IDtenT]

En in netscape?

tja misschien dan toch op een volgende regel doen?

of:
dat dhr/mevr in 1 tabel doen en d'r naast de gegevens?

[RRX]

Op zaterdag 05 januari 2002 14:46 schreef ZeroX15 het volgende:
[..]

code:

Zo moet het toch goed gaan?
+------------+----------------------+
|ODhr OMevr  |aanhef, naam      |
+------------+----------------------+
|  |postcode, woonplaats  |
+------------+----------------------+
|  |email           |
+------------+----------------------+

[Verwijderd]

Op zaterdag 05 januari 2002 15:11 schreef RRX het volgende:

[..]

code:

Zo moet het toch goed gaan?
+------------+----------------------+
|ODhr OMevr  |aanhef, naam      |
+------------+----------------------+
|  |postcode, woonplaats  |
+------------+----------------------+
|  |email           |
+------------+----------------------+

Volgens mij staat woonplaats dan niet goed... maar ik ga het ff proberen

[Verwijderd]

Op zaterdag 05 januari 2002 14:39 schreef blender het volgende:
tabellen?

En hoe los je het dan op als je formulier zo is samengesteld

<CENTER><TABLE BORDER="0" WIDTH="375"><TD>
<form method="post" action="../../cgi-bin/Test/Paul/form/MasterFeedback.cgi">
<FIELDSET><LEGEND><b>Stap Een: Verplichte Persoonlijke Informatie</b></LEGEND>
<input type="hidden" name="subject" value="Help Formulier!">
<input type="hidden" name="redirect" value="http://www.oldtimernederland.com/Test/Paul/bedankt.htm">
<font color="2F4E40">Je Naam (verplicht)
<INPUT type="text" name="name" value=""><br>
Je E-mail (verplicht)
<INPUT type="text" name="email" value=""><br><p>
</FIELDSET>
<P>
<FIELDSET><LEGEND><b>Stap Twee: Vul onderstaande velden in</b></LEGEND>
Factuurnummer
<INPUT type="text" name="x_factuurno" value=""><br>
Factuurdatum   
<INPUT type="text" name="x_factdatum" value=""><br>
Klantnummer   
<INPUT type="text" name="x_klantno" value=""><br>
Produkt           
<INPUT type="text" name="x_produkt" value=""><br>
Artikelcode     
<INPUT type="text" name="x_artcode" value=""><br>
</FIELDSET>
<P>
<FIELDSET><LEGEND><b>Stap Drie: Uitleg probleem</b></LEGEND>
Probleem (kort, 1 regel)
<INPUT type="text" name="x_probleem" value=""><br><p>
Toelichting
<textarea cols="40" rows="15" name="x_toelichting"></textarea><br><p>
</FIELDSET>
<P>
<FIELDSET><LEGEND><b>Stap Vier: Verzenden en Klaar</b></LEGEND>
<div align="center">
<input type=submit value="Verzenden">
  
<input type=reset value="Opnieuw">
</font>
</div>
</FIELDSET>
</form>
</TD></TABLE>
</CENTER>

[Willem]

Je kunt ook de size van de <input> fields meegeven in een class:

code:

<style text="text/css">
.melp {
  size: 200px;
}
</style>

<input type="text" class="melp">

snappie ?

[Verwijderd]

Op zaterdag 05 januari 2002 18:20 schreef peterbuyk het volgende:

[..]

En hoe los je het dan op als je formulier zo is samengesteld

Wat jou betreft vrij simpel... gewoon een tabel met meerdere cellen gebruiken. Hou onderstaande structuur maar aan:

code:

<TABLE border="1">
<TR>
    <TD><font color="2F4E40">Je Naam (verplicht)</TD>
    <TD><INPUT type="text" name="name" value=""></TD>
</TR>
<TR>
    <TD>Je E-mail (verplicht)</TD>
    <TD><INPUT type="text" name="email" value=""></TD>
</TR>
<TR>
    <TD><font color="2F4E40">Je achternaam (verplicht)</TD>
    <TD><INPUT type="text" name="name" value=""></TD>
</TR>
<TR>
    <TD>Je telefoonnummer (verplicht)</TD>
    <TD><INPUT type="text" name="email" value=""></TD>
</TR>
<TR>
    <TD><font color="2F4E40">Je gsmnummer (verplicht)</TD>
    <TD><INPUT type="text" name="name" value=""></TD>
</TR>
<TR>
    <TD>Je 2e E-mail (verplicht)</TD>
    <TD><INPUT type="text" name="email" value=""></TD>
</TR>
</TABLE>

Dan komt het wel goed... Maar ik zit dus met 2 of meerdere inputforms naast elkaar, en dan gaat het met uitlijning fout.

dus wanneer ik het volgende heb:

code:

<TABLE border="0" bgcolor="000000">
<TR>
<TD><INPUT type="text" name="zip" size="7"> <INPUT type="text" name="city" size="20"></TD>
</TR>
<TR>
<TD><INPUT type="text" name="email" size="32"></TD>
</TR>
</TABLE>

Weet iemand hier een oplossing voor?

[Thijsmans]

zoals willem169 al zei: zet het in de stylesheet, desnoods in de style v/d input zelf:

code:

<TABLE border="0" bgcolor="000000">
        <TR>
            <TD>                
                <INPUT type="text" name="zip" size="7" style="width:67px;">             
                <INPUT type="text" name="city" size="20">
            </TD>
        </TR>
        <TR>
            <TD>                
                <INPUT type="text" name="email" size="32">
            </TD>
        </TR>
    </TABLE>

[Verwijderd]

Op zondag 06 januari 2002 14:59 schreef Prammenhanger het volgende:
zoals willem169 al zei: zet het in de stylesheet, desnoods in de style v/d input zelf:

code:

<TABLE border="0" bgcolor="000000">
        <TR>
            <TD>                
                <INPUT type="text" name="zip" size="7" style="width:67px;">             
                <INPUT type="text" name="city" size="20">
            </TD>
        </TR>
        <TR>
            <TD>                
                <INPUT type="text" name="email" size="32">
            </TD>
        </TR>
    </TABLE>

werkt niet...

[Thijsmans]

't is maar net hoe je het bekijkt, maar ik vind hem zo toch aardig kloppen:


welke browser gebruik je?

[Verwijderd]

Het volgende stukje informatie is te vinden op http://htmlgoodies.earthweb.com/tutors/fieldlegend.html

It was done purely for aesthetics.
If you don't surround the form with a table cell,
the lined box runs the length of the browser screen.
If there's a way to stop the box from doing that without using a table cell,
I couldn't find it.
Even examples on the MSIE site showed a table being used to confine the width of the box.
My reference book suggests that the attributes ALIGN and WIDTH work with the FIELDSET flag.
I tried to get them to work time and time again. No dice.

[Verwijderd]

code:

<TABLE border="0" bgcolor="000000" width=300>

<TR>
<TD width=300>
<INPUT type="text" name="zip" size="7" style="width:67px;"><INPUT type="text" name="city" size="20">
</TD>
</TR>

<TR>
 <TD width=300><INPUT type="text" name="email" style="width:210px;"></TD>
</TR>

</TABLE>

Internet Explorer 5

[Verwijderd]

Op zondag 06 januari 2002 15:25 schreef peterbuyk het volgende:
Het volgende stukje informatie is te vinden op http://htmlgoodies.earthweb.com/tutors/fieldlegend.html

It was done purely for aesthetics.
If you don't surround the form with a table cell,
the lined box runs the length of the browser screen.
If there's a way to stop the box from doing that without using a table cell,
I couldn't find it.
Even examples on the MSIE site showed a table being used to confine the width of the box.
My reference book suggests that the attributes ALIGN and WIDTH work with the FIELDSET flag.
I tried to get them to work time and time again. No dice.

Leuk stukje, maar het ziet er niet uit wanneer je voor je form lange en korte woorden gebruikt.

code:

naam: [              ]
Adres: [                 ]
Postcode en woonplaats: [    ] [        ]
Email: [                 ]

Dat ziet er toch niet uit...? Komt niet echt professioneel over als je het mij vraagt.

[Thijsmans]

dan los je het met tabellen op:

code:

<TABLE>
        <TR>
            <TD>                
                <INPUT type="text" name="zip" size=7>
            </TD>
            <TD align="right">              
                <INPUT type="text" name="city" size="20">
            </TD>
        </TR>
        <TR>
            <TD colspan="2">                
                <INPUT type="text" name="email" size="32">
            </TD>
        </TR>
    </TABLE>

[Blue-eagle]

Is het nou ècht zo moeilijk om een absolute breedte op te geven aan een form element?

code:

..style="width:20px;">

Is toch niet geavanceerd ofzo? Het is al gezegd zelfs. IE 5.x en 6.0 doen het hier gewoon hetzelfde...

Ik zie het probleem even niet

[RRX]

http://212.120.104.227/test/formpje.html

code:

<table style="font-face: tahoma; font-size: 12px" width="400" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td width="125"> 
    <input style="vertical-align: bottom" type="radio" name="radiobutton" value="radiobutton">
    dhr. 
    <input type="radio" name="radiobutton" value="radiobutton">
    mevr. </td>
    <td width="125"> 
    <input style="width: 125px" type="text" name="textfield3">
    </td>
    <td>&nbsp;aanhef, naam</td>
  </tr>
  <tr> 
    <td> 
    <input style="width: 50px" type="text" name="textfield">
    <input style="width: 25px" type="text" name="textfield5">
    </td>
    <td> 
    <input style="width: 125px" type="text" name="textfield2">
    </td>
    <td>&nbsp;postcode, woonplaats</td>
  </tr>
  <tr> 
    <td colspan="2">
    <input style="width: 250px" type="text" name="textfield4">
    </td>
    <td>&nbsp;e-mail</td>
  </tr>
</table>

[Verwijderd]

Ik heb het nu zo opgelost

<P>
<CENTER><TABLE BORDER="0" WIDTH="375"><TD>
<form method="post" action="../../cgi-bin/Test/Paul/form/MasterFeedback.cgi">
<FIELDSET><LEGEND><b>Stap Een: Verplichte Persoonlijke Informatie</b></LEGEND>
<input type="hidden" name="subject" value="Help Formulier!">
<input type="hidden" name="redirect" value="http://www.oldtimernederland.com/Test/Paul/bedankt.htm">
<INPUT type="text" name="name" value="">
<font color="2F4E40">Je Naam (verplicht)<br>
<INPUT type="text" name="email" value="">
Je E-mail (verplicht)<br><p>
</FIELDSET>
<P>
<FIELDSET><LEGEND><b>Stap Twee: Vul onderstaande velden in</b></LEGEND>
<INPUT type="text" name="x_factuurno" value="">
Factuurnummer<br>
<INPUT type="text" name="x_factdatum" value="">
Factuurdatum<br>
<INPUT type="text" name="x_klantno" value="">
Klantnummer<br>
<INPUT type="text" name="x_produkt" value="">
Produkt<br>
<INPUT type="text" name="x_artcode" value="">
Artikelcode<br>
</FIELDSET>
<P>
<FIELDSET><LEGEND><b>Stap Drie: Uitleg probleem</b></LEGEND>
<INPUT type="text" name="x_probleem" value="">
Probleem (kort, 1 regel)<br><p>
Toelichting
<textarea cols="40" rows="15" name="x_toelichting"></textarea><br><p>
</FIELDSET>
<P>
<FIELDSET><LEGEND><b>Stap Vier: Verzenden en Klaar</b></LEGEND>
<div align="center">
<input type=submit value="Verzenden">
  
<input type=reset value="Opnieuw">
</font>
</div>
</FIELDSET>
</form>
</TD></TABLE>
</CENTER>
<P>