Bredde på tekstfelt

Ja, godt spørgsmål. Det har jeg også spekuleret over.
Prøv at sæt en div rundt om, som er 150 i width, også kald tekstefeltet's width 100% og se hvad den siger.

<div style="width:150px;">
    <input type="text" style="width:100%;" />
</div>

<div style="width:150px;">
    <input type="button" value="Test" style="width:100%;" />
</div>

<div style="width:150px; background-color:blue"></div>

Hej, det har jeg allerede prøvet. Det giver samme resultat.

<input type="text" style="width:148px;padding:0px;border:1px solid #000;" />

Gid browsere var ens... nåh, nok om det ...

Din html parses fint - hvis du vil have den parset forkert
skal du "huske" at sætte denne ind før din doctype:
<?xml version="1.0" encoding="iso-8859-1"?>
... ligesom jeg har :D ... det er dog ikke smart hvis du
bruger padding og margin i dit design da IE går i quirks...

For at køre xhtml skal xhtml dokumenter leveres som
content-type: application/xhtml+xml ... ie understøtter
dog ikke xhtml så den skal ikke have den content-type...

Jeg har denne i min php fil så Firefox får den rigtige content-type:

<?php if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'firefox')!== false){
header("Content-type: application/xhtml+xml");} ?>

Læs evt. oleboles artikler om xhtml:
http://www.eksperten.dk/artikler/537
http://www.eksperten.dk/artikler/538

Ja ok. Jeg ved ikke helt, hvad jeg synes om den løsning, men det virker da fint.

Hvad gør jeg, hvis jeg vil sætte bredden til 100%? Så bliver det 2px for bredt på grund af rammen.

[ Ja ok. Jeg ved ikke helt, hvad jeg synes om den løsning, men det virker da fint. ]
... Iflg. css reglen skal border lægges til uden til selve elementet ... og ja hvis elementet så er 100% så bliver det 2 px størrer end det element det er lagt i ... w3c's retningslinjer for css box'modellen... og dem overholder browserne jo blot ...

[ Hvad gør jeg, hvis jeg vil sætte bredden til 100%? Så bliver det 2px for bredt på grund af rammen. ]
- Ja, så må man desværre droppe border da den skal uden på de 100% bredde iflg. boxmodellen :/
<div style="width:150px;position: background-color:blue"><input type="text" style="width:100%;padding:0px;background:#ddd;border:0px;" /></div>


... enten det eller en "border div" ...
<div style="width:150px;position: background-color:blue"><div style="border:1px solid #000;"><input type="text" style="width:100%;padding:0px;border:0px;"

/></div></div>

hov den position: var en fejl :D

og ditto med blå baggrund ... :P

Det må jeg så bare lade være med. Hvorfor bliver feltet lavere end normalt?

[ Det må jeg så bare lade være med. Hvorfor bliver feltet lavere end normalt? ]
- Fordi jeg fjerner padding (definerer padding og dermed fastsætter padding) så browserne kan blive enig om hvormeget padding der skal være i elementet --- padding tilføjes til elementets definerede str. margin er uden til element...
- Hvis nu jeg i nedenstående havde skrevet padding:2px; havde den fået 2px ekstra indvendig mellemrum lagt på - på alle 4 sider... og den ville så være over 150px igen - derfor 2px til top og bund ... samt 0px til højre og venstre...

<input type="text" style="width:148px;padding:2px 0px;border:1px solid #000;" />

Her er et link til box - modellen:
http://www.w3.org/TR/REC-CSS2/box.html

og tak for point forresten :)

den korte forklaring fra linket:

[ The box width is given by the sum of the left and right margins, border, and padding, and the content width. The height is given by the sum of the top and bottom margins, border, and padding, and the content height. ]

- så hvis du har en width: 100px; en border 2px en padding på 3px og en margin på 1 px bliver elementet "fyldsmæssigt" 112px bred og synsmæssig 110px bred da margin lægges til uden til elementet...

Perfekt. Tak skal du have.

ok, så lidt :)
- spam over and out :)