Jag har 200px width på en select och en input, ändå blir det olika bredd? Detta händer både i explorer och firefox. Varför?
<select name="status" style="width: 200px"></select>
<input type="text" name="name" style="width: 200px;" />
olika bredd på select och input?
14 svar · 650 visningar · startad av butiko
Det ska inte vara någon skillnad på fälten då din kod är korrekt.
Vad finns det för annan kod på sidan som kan ställa till det, vilket fält blir för stor/liten?
Post lite övrig kod också så man kan se vad som kan tänkas störa.
Jag har gjort en sida som bara innehåller en select och en text input, får samma fel.
<body>
<select style="width:200px">
<option>test</option>
</select>
<br />
<input style="width:200px" />
</body>
Deras bredd blir inte samma, gäller både i firefox oxh explorer (senaste versionerna). Har provat flera datorer med samma resultat. Riktigt skumt är det...
Copy-pastade din kod rakt upp-och-ner och de blev exakt lika breda i både Fx och IE.
(Fx 2.0.0.1 och IE 6.0.2900)
Får du samma bredd om du använder winxp-skinnet?
Va sjutton... är det nåt skumt i IE7 då...? Men jag har ju firefox 2 och får samma problem där. Har sparat ned en helt isolerad html-sida så det finns verkligen ingen kod som påverkar. Blir samma fel även på en ny mac med firefox.
Jag provade i IE7 igår och det fungerar utan problem.
Kan du inte posta en skärmdump så vi ser hur det ser ut hos dig?
Felet verkar finnas i min doctype. Konstigt för den är väl riktig och den är default i visual studio? Tar jag bort den får jag samma bredd på formulären.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I Firefox kan du få samma bredd med -moz-box-sizing:border-box (CSS3 är utan -moz-) men det hjälper inte IE7 eller Opera 9.
Ett annat alternativ är att ange border:none; padding:0, men då får du inte standardutseendet, och kantlinjen försvinner inte på <select> i IE7.
Eller så anger du olika bredd så det blir lika. Du kan ange border och padding så du vet hur mycket som skiljer.
Notera också att det är odefinierat i CSS 2.1 hur eller om CSS gäller för formulärkontroller.
zcorpan skrev:
Notera också att det är odefinierat i CSS 2.1 hur eller om CSS gäller för formulärkontroller.
Så det är alltså ett känt "fel"? Men hur kommer det sig att bredden blir lika när jag tar bort min doctype?
Därför att när du tar bort doctypen så får man automatiskt "quirks"-mode vilket innebär att browsern ger sig på att tolka allt du skriver som den själv tror att du menade. Typ "har man inte en doctype fattar man antagligen inget om web så det är bäst jag hjälper till". När du anger transitional så har du specificerat en blandning av HTML4 och XHTML1.1 och det ger (tydligen) den effekten på CSS-stylade form element. Precis som zcorpan säger så finns det ingen (strikt) definition på hur formelement ska bete sig när de stylas så det är väl därför du ser det du ser. Det finns andra DOCTYPER så du kan ju testa strict. Eller använda HTML4 istället? Det duger ju oftast om du inte skall XML-säkra din sida i någon avlägsen framtid :) (ajajaj känsligt område! = flamewar ;))
headbug skrev:
Därför att när du tar bort doctypen så får man automatiskt "quirks"-mode
Helt rätt, men resten behöver förtydligas lite ;)
Om webbläsaren ställer sig i "Quirks mode" kontra "annan mode" (de "andra" är "Standards mode" eller "Almost standards mode") är inte beroende av huruvida man föder dem XHTML 1.0 Transitional eller XHTML 1.0 Strict (samma gäller HTML 4.01 Transitional kontra HTML 4.01 Strict) ;)
Orsaken till att det blir olika tolkat om man tar bort <!DOCTYPE är att XHTML-dokument utan <!DOCTYPE som levereras som text/html tolkas i "Quirks mode" - samtidigt som XHTML 1.0-dokument *med* <!DOCTYPE men utan <?xml?>-deklaration tolkas i "annat än Quirks mode (dvs "Standards mode" eller "Almost standards mode" beroende av webbläsare och "variant").
I det exempel som tas upp i tråden blir det t.ex. breddskillnad mellan formulärelementen oavsett om man kör XHTML 1.0 Strict eller XHTML 1.0 Transitional eftersom ingendera ställer "moderna" webbläsare i "Quirks mode" ;)
Headbug skrev:
När du anger transitional så har du specificerat en blandning av HTML4 och XHTML1.1
Hmm...
Njae - riktigt så enkelt är det inte tyvärr...
HTML4 är ju som alla vet uppdelad i tre distinkta varianter - Strict, Transitional och Frameset. Så har det varit sedan december 1997.
XHTML 1.0 är (förenklat) en omskrivining av HTML4 från "SGML-syntax" till "XML-syntax"
XHTML 1.1 är i princip en omskriving av XHTML 1.0 Strict som baseras på XHTML Modularization.
Det finns alltså en relation mellan HTML 4.0 Strict och XHTML 1.1, och skillnaderna mellan vilka element och attribut som ingår i de två är i praktiken små.
XHTML 1.0 Transitional är ingen "blandning" - det är en omformulering av HTML 4.0 Transitional som var avsett som det bakåtkompatibla alternativet att använda under en övergångsperiod tills folk och verktyg lärt sig hantera CSS och HTML4 strict) när det skapades 1997!
- HTML4 Transitional < == > XHTML 1.0 Transitional (sånärsom på syntax och "leveransregler")
- HTML4 Strict < == > XHTML 1.0 Strict < = (ungefär) = > XHTML 1.1 (sånärsom på syntax och "leveransregler")
PSS gäller att - HTML4 Frameset < == > XHTML 1.0 Frameset
Quirks mode kontra standards mode är liksom en annan sak och inte (helt) beroende på vilken taggmängd man väljer att hålla sig till (genom valet av <!DOCTYPE ). Och i fallet XHTML beror det också av hur man levererar sina sidor (dvs om man skickar dem HTTP-mässigt som som text/html eller application/xhtml+xml)
Mer läsning: http://www.sitepoint.com/forums/showthread.php?t=393445 och http://hsivonen.iki.fi/doctype/
/Red - Ursäkta avsteget från ämnet - men jag kunde inte hålla mig
Alltid skönt med någon som reder ut begreppen :)
:birp