textarea wird bei Texteingabe breiter

Status
Nicht offen für weitere Antworten.

hpvw

Erfahrenes Mitglied
Ich habe folgendes Problem mit einer Textarea:
Mal abgesehen davon, dass das Layout im IE ohnehin etwas "zerrissen" ist (bei Firefox siehts so aus, wie ich es haben möchte) wird meine Textarea breiter (nur im IE), wenn ich Text eingebe. Bei Fenstergrößenänderung springt die Textarea dann wieder auf die ursprüngliche Breite zurück und mit dem nächsten Zeichen wird sie wieder breiter, nur einmalig von Ausgangsbreite zur breiteren Breite, nicht mit jedem Zeichen.
Der Code sieht so aus:
HTML:
<div class="windowContent" style="border-color:#963fa1;">
    <a href="JavaScript:doInsertnText('[ b]','[ /b]',false);"><img
        src="./images/editor/bold.gif" alt="Text Fett darstellen [ b][ /b]" title="Text Fett darstellen " width="21" height="20" border="0" style="border-width:1px; border-color:#963fa1; border-style:solid;"></a>
    <a href="JavaScript:doInsertnText('[ i]','[ /i]',false);"><img
        src="./images/editor/italic.gif" alt="Text kursiv darstellen [ i][ /i]" title="Text kursiv darstellen [ i][ /i]" width="21" height="20" border="0" style="border-width:1px; border-color:#963fa1; border-style:solid;"></a>
    <a href="JavaScript:insertOLnText();"><img
        src="./images/editor/orderedlist.gif" alt="Nummerierte Liste einfügen [ list][#][ /list]" title="Nummerierte Liste einfügen [ list][#][ /list]" width="21" height="20" border="0" style="border-width:1px; border-color:#963fa1; border-style:solid;"></a>
    <a href="JavaScript:insertULnText();"><img
        src="./images/editor/unorderedlist.gif" alt="Aufzählung einfügen [ list][*][ /list]" title="Aufzählung einfügen [ list][*][ /list]" width="21" height="20" border="0" style="border-width:1px; border-color:#963fa1; border-style:solid;"></a>
    <a href="JavaScript:insertLinknText();"><img
        src="./images/editor/link.gif" alt="Link einfügen [ url= ][ /url]" title="Link einfügen " width="21" height="20" border="0" style="border-width:1px; border-color:#963fa1; border-style:solid;"></a>
    <a href="JavaScript:insertMailLinknText();"><img
        src="./images/editor/email.gif" alt="E-Mail-Link einfügen [ mail= ][ /mail]" title="E-Mail-Link einfügen [ mail= ][ /mail]" width="21" height="20" border="0" style="border-width:1px; border-color:#963fa1; border-style:solid;"></a>
    <a href="JavaScript:doInsertnText('[ quote]\n','\n[ /quote]',false);"><img
        src="./images/editor/quote.gif" alt="Zitat einfügen [ quote][ /quote]" title="Zitat einfügen [ quote][ /quote]" width="21" height="20" border="0" style="border-width:1px; border-color:#963fa1; border-style:solid;"></a>
    <a href="JavaScript:doInsertnText('[ ]','',true);"><img
        src="./images/editor/nbsp.gif" alt="geschütztes Leerzeichen einfügen [ ] mit beliebiger Anzahl Leerzeichen als geschützte Leerzeichen zwischen den eckigen Klammern; mit geschützten Leerzeichen kann man den Zeilenumbruch zwischen zwei Wörtern verhindern oder einen größeren Abstand zwischen 2 Wörtern erzwingen." title="geschütztes Leerzeichen einfügen [ ] mit beliebiger Anzahl Leerzeichen als geschützte Leerzeichen zwischen den eckigen Klammern; mit geschützten Leerzeichen kann man den Zeilenumbruch zwischen zwei Wörtern verhindern oder einen größeren Abstand zwischen 2 Wörtern erzwingen." width="21" height="20" border="0" style="border-width:1px; border-color:#963fa1; border-style:solid;"></a>
    &nbsp;&nbsp;&nbsp;
    <a href="JavaScript:doInsertnText(' :) ','',true);"><img
        src="./images/smileys/smile.gif" alt=":)" title=":)" width="15"
        height="15" border="0"></a>&nbsp;&nbsp;
    <a href="JavaScript:doInsertnText(' ;) ','',true);"><img
        src="./images/smileys/zwinker.gif"alt=";)"  title=";)" width="15"
        height="15" border="0"></a>&nbsp;&nbsp;
    <a href="JavaScript:doInsertnText(' :D ','',true);"><img
        src="./images/smileys/bigsmile.gif" alt=":D" title=":D" width="15"
        height="15" border="0"></a>&nbsp;&nbsp;
    <a href="JavaScript:doInsertnText(' :P ','',true);"><img
        src="./images/smileys/bah.gif" alt=":P" title=":P" width="15"
        height="15" border="0"></a>&nbsp;&nbsp;
    <a href="JavaScript:doInsertnText(' :O ','',true);"><img
        src="./images/smileys/oh.gif" alt=":O" title=":O" width="15"
        height="15" border="0"></a>&nbsp;&nbsp;
    <a href="JavaScript:doInsertnText(' :( ','',true);"><img
        src="./images/smileys/sad.gif" alt=":(" title=":(" width="15"
        height="15" border="0"></a>
    <textarea name="nText" class="editor"
        style="border-color:#963fa1;
        scrollbar-highlight-color: #963fa1;
        scrollbar-shadow-color:    #963fa1;
        scrollbar-arrow-color:     #963fa1;"></textarea>
</div>
Die Farbangaben sind übrigends extra angegeben, da es aus einem Template für verschiedene Bereiche mit unterschiedlichen Farben verwendet wird.
Bis auf fehlende rows und cols bei der Textarea ist die Seite Valid HTML 4.01 Transitional.
Das css für die Textarea sieht so aus:
HTML:
    textarea.editor {
        font-size:12px;
        font-weight:normal;
        font-family:Courier New, monospace;
        background-color:#ffffff;
        border-style:solid;
        border-width:1px;
        border-bottom-width:1px;
        border-left-width:1px;
        border-right-width:1px;
        color:#000000;
        width:100%;
        height:200px;
        scrollbar-face-color:      #eeeeee;
        scrollbar-3dlight-color:   #eeeeee;
        scrollbar-track-color:     #eeeeee;
        scrollbar-darkshadow-color:#eeeeee;
    }
Das fürs div so:
HTML:
    div.windowContent {
        font-size:12px;
        font-weight:normal;
        background-color:#ffffff;
        color:#000000;
        text-align:left;
        padding:5px;
        margin-bottom:0px;
        margin-left:15px;
        margin-right:15px;
        margin-top:0px;
        margin-top:0px;
        border-top-width:0px;
        border-left-width:1px;
        border-right-width:1px;
        border-bottom-width:1px;
        border-style:solid;
    }
Ich habe das JavaScript auch schon entfernt, das hat jedoch nicht geholfen.
Die Pflichtattribute rows und cols habe ich auch schon eingefügt gehabt, vielleicht hat hier ja jemand einen Tipp, was ich da angeben muss, damit diese nicht beachtet werden. Wär ja schon Klasse ein valid-Dokument zu haben. Als ich sie drin hatte, war das Dokument valid, sah jedoch noch beschissener aus.
Bitte schimpft jetzt nicht nur auf den IE, sondern helft mir, ich bin echt verzweifelt und geschimpft habe ich selbst schon genug.
Gruß hpvw
 
Ich kann mir jetzt zwar nicht vorstellen, dass und warum ein Textarea grösser wird, wenn man dort Text eingibt,...aber wenn du dem Textarea statt width:100% eine fixe Breite gibst, sollte diese auch (in den meisten Browsern) fix bleiben(die anderen nehmen dann die cols-Werte).

Dein Textarea wird andernfalls immer so breit sein, wie dessen Elternelement....und das ist das <div>.
 
Du hast recht, bei einer fixen Breite bleibt diese auch bei Texteingabe konstant.
Habe es eben getestet.
Bei jeder prozentualen Angabe variiert die Breite bei Texteingabe.
Eigentlich möchte ich eine fixe Breite jedoch vermeiden.
Der Grundasatz ist für mich, dass jemand von einer großen Bildschirmauflösung auch was haben soll und die mit 800x600 aber nicht immer scrollen müssen.
Irgendwie ist das eine unbefriedigende Lösung.
Das Problem hatte ich vorher auch noch nie.
Mein IE ist übrigends 6.0.2800.1106. Einen anderen habe ich nicht zur Verfügung.
Bei fester Breite wird übrigends auch nicht das div breiter, also Denke ich, dass die Textarea bei Prozentangabe das div "auseinanderdrückt" und sich nicht umgekehrt an ein größer gewordenes div anpasst.
Vielleicht hat ja noch jemand eine Idee zu den Internas des IE.
Danke hpvw
 
Habe jetzt eine Lösung gefunden.
Ich habe in das div noch 'ne Tabelle gemacht, die ist im IE scheinbar "stabiler" als ein div.
Schade eigentlich, wo ich meine, mal beim w3c gelesen zu haben, das so Dinge, wie table,p , ol, ul, h1 etc. zur Inhaltlichen Strukturierung einer Webseite genutzt werden sollen, während span, div und css für die Gestaltung da sind und tabellen ja sowieso mit css auch aus divs gebaut werden können.
Ich dachte ich komme ohne diese Tabellenverschachtelung aus. IdR dauert es dadurch ja auch meist länger, bis die Seite angezeigt wird.
Dann werde ich die nächsten Seiten, die ich baue, wohl gleich wieder auf Tabellen basieren lassen und dieses olle div über Bord werfen.

Danke fatalus, Dein Hinweis mit dem Elternelement hat mich auf die richtige Fährte geführt.

Gruß hpvw
 
Status
Nicht offen für weitere Antworten.
Zurück