textarea { width: 100%; } IE fehler

cas · #1 (**permalink**) 17.02.2005, 10:13

hallo community
hoffe mir kann jemand weiterhelfen.

eine textarea soll 100% width sein.
bei einer eingabe in das textfeld, skaliert nun das eingabefeld beim IE 6 nach rechts.

kann man das umgehen?

code:
input,textarea {
width: 100%;
border: 1px solid #7F9DB9;
}

Boris · #2 (**permalink**) 17.02.2005, 10:25

Lass das - der IE5.5 und 5.x machen da nämlich noch richtig tolle Sachen aus Formularfeldern, die auf 100% definiert wurden

wahsaga · #3 (**permalink**) 17.02.2005, 10:40

Zitat:

Zitat von Adagio

Lass das - der IE5.5 und 5.x machen da nämlich noch richtig tolle Sachen aus Formularfeldern, die auf 100% definiert wurden ;)

jepp, was dieses problem angeht, habe ich die IEs auch schon vollkommen austicken gesehen ...

ob display:block stattdessen hilfreicher sein könnte, habe ich noch nicht ausprobiert. könnte mir aber vorstellen, dass da ohne breitenangabe dann die cols-definition der textarea probleme macht ...

ulle · #4 (**permalink**) 17.02.2005, 11:57

http://www.xhtmlforum.de/viewtopic.p...t=textarea+100

cas · #5 (**permalink**) 17.02.2005, 12:25

ich muss es einfach so haben, da gibts keine wahl.

habe was gefunden das funktioniert:
http://fplanque.net/2003/Articles/iecsstextarea/
scheint ein ziemlich arges problem zu sein.

ulle · #6 (**permalink**) 17.02.2005, 15:24

Zitat:

habe was gefunden das funktioniert:
http://fplanque.net/2003/Articles/iecsstextarea/
scheint ein ziemlich arges problem zu sein.

VORSICHT !!

Die hier empfohle Lösung :

Code:

<div style="width:100%">
  <form>
    <label for="t1">Try to type in here:</label>
    <textarea id="t1" style="width:100%">Try to type here!</textarea>
  </form>
</div>

- ist nicht sauber!!!

Textarea - hat Default-Border - BOX-Model ~ 100% + 4px

ulle · #7 (**permalink**) 18.02.2005, 11:55

Wie immer muß ich ja auf den Themen reiten bis ich zufrieden bin. Mit folgender Lösung kann ich sehr gut leben und hätte nun gerne Eure Erfahrung mit folgendem CODE-Schnippsel.

Getestet habe ich erfolgreich mit IE6 / FF auf WinXP pro SP2.

Bitte Cross-Browser Test/Feedback

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/ 

*			{ 
			margin:  0; 
			padding: 0;
			border-collapse:collapse; 
			border-spacing: 0; 
			} 


html, body 	{ 
			color:		#000000; 
			background:	#FF9922;
			line-height: 1.45;
			} 

body		{ 
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
			}

			
div			{
			margin:  2em;
			border:  1px solid #000000;
			padding: 1em;
			
			font-size: .8em;
			
			background-color: #FFFFFF;
			}

form		{
			/* width-Angabe im Eltern-Element (BOX-Model!)
			 * fuer dynamische Breite [textarea]
			 */
			width: 100%;
			}
			
fieldset	{
			/* fieldset - Stellvertretend fuer alle
			 * erlaubten Child-Elemente von [form] 
			 */
			margin:  0 auto;
			border:  0 none;
			padding: 0;
			}			

label		{
			/* border fuer [textarea]
			 * border-right wird bei aktiver Scrollbar durch
			 * dynamische [textarea] ueberschrieben - da sich
			 * die [textarea] auf 100% von [form] ausdehnt.
			 * Den border im label zu definieren verhindert
			 * ein Ausdehnen der Eltern-Elemente; z.b. [form]
			 */
			display: block;
			width: 	 auto;
			
			border:  1px solid #000000;

			/* Kontroll-Farbe fuer Label
			 */
			background-color: #FF0000;
			}			

textarea	{
			/* dynamische Breite [IE-BUGy]
			 * die witdh-Definition bezieht sich auf die letzte gesetzte
			 * width-Angabe in einem Eltern-Element; aehnlich IE-FLOAT-BUG;
			 * Ist keine gesetzt wird der BODY angenommen, Fehler tritt 
			 * erst mit aktiver Scrollbar auf !!
			 */
			width:  100%;  
			height: 10em;
			
			margin:  0 auto;
			border:  0 none;
			padding: 0;
			}			
			
/*]]>*/ 
</style> 

</head> 
<body> 

<div>
	<form action="#">
		<fieldset>
			<label><textarea cols="50" rows="20" name="text">text</textarea></label>
		</fieldset>
	</form>
</div>

</body> 
</html>

mazzo · #8 (**permalink**) 18.02.2005, 12:03

Opera7.54 zeigt alles perfekt an.
Der IE6 entfernt aber den rechten Border vom "label" sobald man was ins Textfeld eintippt, da rutscht dann der Scrollbalken ein, zwei Pixel nach rechts. Stört aber eigentlich nicht. Der äussere DIV-Border bleibt dabei erhalten.

ulle · #9 (**permalink**) 18.02.2005, 12:08

Danke - Opera ist ja schon was.....

Übrigens:

Code:

label      { 
         /* border fuer [textarea] 
          * border-right wird bei aktiver Scrollbar durch 
          * dynamische [textarea] ueberschrieben - da sich 
          * die [textarea] auf 100% von [form] ausdehnt. 
          * Den border im label zu definieren verhindert 
          * ein Ausdehnen der Eltern-Elemente; z.b. [form] 
          */

mazzo · #10 (**permalink**) 18.02.2005, 12:16

ja

hab ich direkt nach dem posten auch noch mal im Quellcode gelesen...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild zentrieren	JuKo	CSS	4	21.03.2018 00:35
Anfänger: Positionierung.	xam	CSS	3	19.05.2012 14:18
Darstellungsprobleme im IE	lea11011989	CSS	17	05.11.2010 09:44
rätselhafter Leerraum zwischen Content und Footer im IE	jhonnybravo	CSS	5	04.03.2010 11:47
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12