[XHTML] width van een input [form] - Softwareontwikkeling

donderdag 9 december 2004 20:47

Acties:

Verwijderd

Topicstarter

Heey jongens, ik heb een probleem en ik kom er nu al een uurtje of 3 niet uit. Ik ben bezig om wat dingen over te zetten van html 4.01 naar xhtml 1.0 en nu gaat nergens wat mis totdat ik mijn formulieren nogmaals bekeek.

Ik zal hieronder even het formuliertje plaatsen zoals ik het heb.

code:

<table width="280" height="219" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="80" height="32" class="txt5">gebruikersnaam</td>
<td width="200" height="32"><input name="gebruikersnaam" type="text" id="gebruikersnaam" style="width:200px" /></td>
</tr>
<tr>
<td width="80" height="32" class="txt5">e-mailadres</td>
<td width="200" height="32"><input name="email" type="text" id="email" style="width:200px" /></td>
</tr>
<tr>
<td width="80" height="31" class="txt5">voornaam</td>
<td width="200" height="31"><input name="voornaam" type="text" id="voornaam" style="width:200px" /></td>
</tr>
<tr>
<td width="80" height="31" class="txt5">achternaam</td>
<td width="200" height="31"><input name="achternaam" type="text" id="achternaam" style="width:200px" /></td>
</tr>
<tr>
<td width="80" height="31" class="txt5">geslacht</td>
<td width="200" height="31"><select name="geslacht" id="geslacht" style="width:200px">
<option selected="selected">- maak een keuze -</option>
<option value="man">man</option>
<option value="vrouw">vrouw</option>
<option value="niet opgeven">niet opgeven</option>
</select></td>
</tr>
<tr>
<td width="80" height="31" class="txt5">geboortedatum</td>
<td width="200" height="31"><select name="dag" id="dag"  style="width:47px">
<option value="--">--</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>
<select name="maand" id="maand" style="width:100px">
<option>--</option>
<option value="januari">januari</option>
<option value="februari">februari</option>
<option value="maart">maart</option>
<option value="april">april</option>
<option value="mei">mei</option>
</select>
<input name="jaar" type="text" id="jaar" style="width:47px" value=" --" /></td>
</tr>
<tr>
<td width="80" height="31" class="txt5">nieuwsbrief</td>
<td width="200" height="31"><select name="nieuwsbrief" id="nieuwsbrief" style="width:200px">
<option selected="selected">- maak een keuze -</option>
<option value="ja">ja</option>
<option value="nee">nee</option>
</select>
</td>
</tr>
</table>

Misschien is niet alles relevant, maar ik plaats het maar helemaal, dan ben ik er ook zeker van dat jullie er iets mee doen. De <form> tag staat overigens over de gehele pagina, dus dat is niet het directe probleem.

Maar goed, waar gaat het nou over?

Ik heb in mijn formulieren de volgende dingen meegegeven style="width:200px" de width kan hier en daar verschillen, maar het gaat om die width dus. Deze is wanneer ik de xhtml-tekst, bovenaan de pagina, niet plaats niet correct.De breedte van dat input-ding wordt dan een stuk of 5 pixels meer. Heel erg rottig, aangezien ik flink wat heb gesneden om het goed te krijgen.

Ik weet niet of jullie enige dingen mee hebben gemaakt en een mogelijke oplossing weten. Ik weet alleen dat mijn <tr> op die plek 200px is en dat dus een formulier wat ik aangeef als 200px ook daadwerkelijk 200px moet zijn. Maar dat is dus niet. Select dingen doen het overigens wel goed. Erg vreemd dus. Maar goed.. ik zal jullie nog even datgene geven wat bovenaan mijn pagina staat. Mochten jullie meer info willen, dan kan ik die altijd wel geven, maar ik denk niet dat dat nodig is.

code:

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Ik hoop dat jullie me kunnen helpen

hoe krijg ik die input-dingen nou op de juiste groote?

alvast bedankt!!

[ Voor 25% gewijzigd door Verwijderd op 09-12-2004 20:55 ]

donderdag 9 december 2004 21:03

Acties:

Genoil

ik ga er even vanuit dat je IE6 gebruikt. doordat je een correct (x)html doctype bovenaan de pagina zet, probeert IE6 zo goed mogelijk de W3 standaard-manier van pagina's tonen te volgen, ipv de manier waar Microsoft vanouds de voorkeur voor had (dat noemen ze "quirksmode" ). Met name op het gebied van de afmetingen en paddings van elementen zitten daar cruciale verschillen in, die waarschijnlijk de oorzaak van je probleem vormen.

Hier meer daarover: http://www.quirksmode.org/css/box.html

donderdag 9 december 2004 21:17

Acties:

Verwijderd

Topicstarter

hmm ja Genoil.. ik zie wat je bedoelt, maar ik geef toch echt een 'width' mee met mijn input-dingen en het vreemde vind ik ook nog dat de select-dingen wel correct zijn. Dus ik snap er echt niets van.

Overigens heb ik al wat verder gekeken. Zowel in Firefox als IE zijn de input-dingen die 200px groot moeten zijn 204px. Wanneer ik ze 196px geef zijn ze 200px, dus ik weet niet waar het fout gaat

die quirksmode hebt ook niet veel.

donderdag 9 december 2004 21:29

Acties:

hlz

Geef ze maar eens de volgende css-code mee:

code:

1	border-width: 0px;

wedden dat ze dan wel 200px breed zijn. En op een witte achtergrond niet meer zichtbaar

Het heeft dus wel degelijk te maken met het boxmodel waar Genoil het al over had. Zou dat maar eens even goed bestuderen.

donderdag 9 december 2004 21:36

Acties:

Verwijderd

Topicstarter

hmm ik lees net:

In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.

dus als de border 1 is .. en de passing 1.. dan is dat 2 .. dus in totaal 4.. als ik dus mijn boxjes gewoon 196 mee geef ipv 200 .. dan zal hij het gewoon goed moeten doen dus.. lijkt me?

(ik heb niet echt zin in moeilijke css oplossingen op dit moment)

donderdag 9 december 2004 21:43

Acties:

hlz

Volgens mij is de default border 2px en de padding 0px. Maar goe, met 196px wordt het totaal inderdaad 200px breed... behalve in winIE 5.5 en lager.

donderdag 9 december 2004 21:48

Acties:

Verwijderd

Topicstarter

hmm ja vaag zeg.. ik zit dus nu inderdaad wat dingen te proberen. En nu kom ik op het 'probleem' dat het in FireFox wel goed is.. maar in IE6 zijn die dingen nog 202 als ik 196 pixels instel.. godverdorie .. ik haat xhtml nu al

nog maar effe verder zoeken

vrijdag 10 december 2004 00:03

Acties:

crisp

Devver

Pixelated

Dat heeft niets met XHTML te maken, ook met een HTML DTD en IE in standards mode houd IE6 het w3c boxmodel aan

Intentionally left blank

vrijdag 10 december 2004 00:07

Acties:

Verwijderd

bovendien moet je dus alles zelf instellen, de defaults kunnen best per browser verschillen.

en als je xhtml nu al haat: mooi moment om het te droppen

want ik wed erop dat je het toch serveert als html

vrijdag 10 december 2004 09:54

Acties:

hlz

crisp schreef op vrijdag 10 december 2004 @ 00:03:
Dat heeft niets met XHTML te maken, ook met een HTML DTD en IE in standards mode houd IE6 het w3c boxmodel aan

Inderdaad, alleen in quirksmode of zonder doctype gaat het w3c boxmodel niet op in IE6.

vrijdag 10 december 2004 12:19

Acties:

Verwijderd

Inderdaad, alleen in quirksmode of zonder doctype gaat het w3c boxmodel niet op in IE6.

Geen doctype triggert quirks mode.

vrijdag 10 december 2004 13:12

Acties:

hlz

Verwijderd schreef op vrijdag 10 december 2004 @ 12:19:
Geen doctype triggert quirks mode.

denk dat het wel duidelijk is zo...

vrijdag 10 december 2004 13:50

Acties:

Rexomnium

Vincam aut moriar

Je kunt het best een div in die form zetten met een margin van een aantal pixels. Dan kun je je form gewoon op het vaste aantal zetten en heb je geen last meer van het verkeerd interpreteren van het boxmodel

We zijn allemaal vaandeldrager in een optocht van gekwetsten.

vrijdag 10 december 2004 14:10

Acties:

Verwijderd

of bijvoorbeeld een fieldset, zou ik eerder aanraden