textarea med width 100% stretchar ut div

9 svar · 295 visningar · startad av PepeJeria 20 apr. 2004

PepeJeriaMedlem sedan feb. 2003774 inlägg

Frågan20 apr. 2004 15:12#1

Kan någon förklara varför den andra div:en blir lite längre än 300px? Den innehåller en textarea med width:100%;

Får samma effekt i både IE och Mozillla, men inte Opera 7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
div
{
	width:298px;
	border:1px solid green;
}

div textarea
{
	width:100%;
	height:50px;
}
</style>
</head>

<body>
300px:
<div></div>
Borde också vara 300px:
<div>
	<textarea rows="10" cols="10"></textarea>
</div>
</body>
</html>

Kan även beskådas här

dectgapMedlem sedan sep. 20021 655 inlägg

20 apr. 2004 15:44#2

Det beror på att textarean har en border.
Textareans bredd (exklusive kantlinjen) är 298px. Lägg sedan till den kantlinje som textarean har som standard, så blir textarean lite bredare (302px, gissar jag).

PepeJeriaMedlem sedan feb. 2003774 inlägg

20 apr. 2004 15:58#3

men om jag lägger till border:none på textarean så stretchar den ändå till div:en

silfverMedlem sedan apr. 200312 679 inlägg

20 apr. 2004 16:12#4

Det här funkar för mig:

	<textarea rows="10" cols="10" style="margin: 0px; border: 0px;"></textarea>

Edit: Du kan ju lätt skriva in det i din CSS där. :OO

PepeJeriaMedlem sedan feb. 2003774 inlägg

20 apr. 2004 16:19#5

Att ta bort borden hjälpte, men det blir ändå 2px (bordern) för brett I IE. Margin till 0 gjorde ingen skilland.

Det intressanta är att om jag tar bort DOCTYPE:n så att Quirks mode triggas så fungerar det i IE, men jag vill självklart använda mig av Standards compliance mode.

Uppdaterade testcaset:
http://member.webforum.nu/5113/testcase.html

silfverMedlem sedan apr. 200312 679 inlägg

20 apr. 2004 16:21#6

PepeJeria skrev:

Att ta bort borden hjälpte, men det blir ändå 2px (bordern) för brett I IE. Margin till 0 gjorde ingen skilland.

Det intressanta är att om jag tar bort DOCTYPE:n så att Quirks mode triggas så fungerar det i IE, men jag vill självklart använda mig av Standards compliance mode.

Uppdaterade testcaset:
http://member.webforum.nu/5113/testcase.html

Vad använder du för ie? Jag använder 6.0 och det ser bra ut i både det och i firefox.

PepeJeriaMedlem sedan feb. 2003774 inlägg

20 apr. 2004 16:24#7

6.0.2800.1106

Ta en skärmdump och zomma in så ser du det tydligare.

silfverMedlem sedan apr. 200312 679 inlägg

20 apr. 2004 16:27#8

Inte går det två pixlar utanför hos mig. :e
Eller? Haha, jag har jämfört "textarean" med kantlinjen, inte det strecket som går över. My bad!

PeeerMedlem sedan mars 20025 907 inlägg

20 apr. 2004 16:28#9

Sätt padding: 0px; i div textarea så ser det normalt ut

PepeJeriaMedlem sedan feb. 2003774 inlägg

20 apr. 2004 16:38#10

Tack för hjälpen alla, padding:0; på textarean + border:none; fixade problemet.

Tänkte inte på det som detectgap sa, width:100%; räknar ju inte med bordern.

Ang, paddingen på textarean kan man ju tycka att det hade varit mer logiskt om det varit margin istället...