HTML Select in einer Tabelle

    Hallo,
    ich brauche eine dynamische Liste. Mit folgendem Code funktionert es einwandfrei im IE6. Mozilla (2.0.0.9) macht totalen Quatsch beim ändern der Fenstergröße.

    Hat jemand einen Tip?

    --------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>
    table and select
    </title>


    </head>

    <body style='positon:absolute; height:50%'>


    <table border='1' style='position:relative; table-layout:fixed; height:90%'>
    <tr>
    <td style='height:10%'>
    <p>Caption</p>
    </td>
    </tr>
    <tr>
    <td style='height:90%'>
    <div style="height:90%; position: relative;">
    <select id='IDListFields' size="500" style="height:70%; position: relative;">
    <option value="0">A</option>
    <option value="1">B</option>
    <option value="2">C</option>
    <option value="3">D</option>
    <option value="4">E</option>
    <option value="5">F</option>
    </select>
    </div>
    </td>
    <td style='height:90%'>
    <div style="height:70%; position: relative; border:solid red 1px">
    </div>
    </td>

    </tr>

    </table>
    </body>
    </html>

    Der Firefox macht also totalen Quatsch? Muss verbreitet sein. Opera und Safari machen den selben Quatsch. Vielleicht ist auch schlicht der Quelltext Quatsch und weil IE die Hälfte von den Befehlen eh nicht richtig kann, kommt was anderes? ^^

    Was genau hast Du eigentlich vor? Die ganzen Style-Angaben geben keinen Sinn. In der ersten Tabellen-Zeile fehlt eine Zelle. Und dann size="500" beim Select. Ich hätte dir auch sowas hingemalt wie Firefox, Opera und Safari.

    Wenn du das vom IE haben willst, werf alles raus was überflüssig ist.

    Zunächst einmal bin ich ein ziemlicher Fan von firefox! Zum anderen hätte ich von einem Senior-Mitglied eine etwas anders formulierte Antwort erwartet. Aber man kann ja nicht wissen, dass hier auch jemand was postet, der selbst schon ein wenig Erfahrung hat. Aber wahrscheinlich hab ich mich auch einfach nur falsch ausgedrückt. Wir lernen also, das Wort Quatsch darf man in einem Forum nicht verwenden.

    Was möchte ich eigentlich.
    Ich möchte eine Tabelle mit zwei Zeilen haben. Die erste Zeile soll eine feste Höhe von z.B. 1em habe. Die zweite Zeile soll den Rest des Browser-Fensters ausfüllen. In dieser zweiten Zelle möchte ich eine Liste haben, die sich mit dem Inhalt an die Höhe der Tabelle anpasst. Ich möchte nicht das Browserfenster scrollen und ich möchte keine IFrames verwenden. Die Liste soll selbstständig den Scrollbar anzeigen, wenn er benötigt wird. In meinem Beispiel sind daher fünf Einträge in der Liste, später werden es bis zu 200. Ich möchte also keine Liste mit scroll='5' oder so etwas.

    Wenn mir hier jemand zeigen kann, wie man so etwas in firefox programmiert, wäre ich sehr dankbar.

    Hem. Ich bezweifle das du das so überhaupt im Firefox zum laufen bekommen wirst. Wenn du Size=500 angibst, dann wird Firefox Platz für 500 Elemente schaffen, auch wenn du weniger einsetzt. Dadurch entsteht auch automatisch der Monster-Scrollbalken. Das verhalten vom IE mag wünschenswert sein, aber fällt wohl eher unter "Fehlerkorrektur", als unter Vorgehen nach Regeln.

    Manipulierbarkeit von Form-Elementen waren schon immer sehr eingeschränkt und vor allem von jedem Browserhersteller unterschiedlich interpretiert.

    Hier die Lösung für das Problem mit der Liste in einer Tabelle.
    Es liegt tatsächlich an SIZE. Wird SIZE später angegeben, klappt alles wunderbar.

    ---------------------------------------------------------------------------------------
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>
    table and select
    </title>


    </head>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- Für relative Positionierung muss das Elternobject absolute -->
    <!-- positioniert sein. Hier wird einfach BODY absolut positionert. -->
    <!-- Es wird nicht die volle Größe verwendet, damit man den Rand -->
    <!-- besser sehen kann. -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <body style='position:absolute; width:90%; height:90%; border:solid 1px green;'>


    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- Die Tabelle wird relative positionert. -->
    <!-- Rand und Höhe < 100% wieder nur zur besseren Erkennung der -->
    <!-- Größe. -->
    <!-- Wenn in Mozilla eine Tabelle an die Fenstergröße angepassst -->
    <!-- werden soll, so muß für die Höhe der Tabelle eine Höhenangabe -->
    <!-- und für die die festen Zeilen eine Höhenaben eingestellt. -->
    <!-- Die letze Zeile erhält die Höhe 100% -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <table border='1' style='position:relative; table-layout:fixed; height:80%;'>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- COLGEROUP muß nicht, sieht aber besser aus -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <colgroup>
    <col width='50px'/>
    <col width='50px'/>
    </colgroup>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- Erste Zeile mit einer festen Höhe von 1em -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <tr>
    <td style='position:relative; height:1em'>
    <p>a list</p>
    </td>
    <td style='height:1em'>
    <p>a div</p>
    </td>
    </tr>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- Zweite Zeile mit einer Liste in der ersten Zelle -->
    <!-- und einem DIV in der zweiten Zelle. -->
    <!-- Das DIV ist nur zum Vergleich da. -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <tr>
    <td style='position:relative; height:100%'>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- SELECT darf hier nur ein SIZE von 1 haben, da sonst die -->
    <!-- die Höhenangabe nicht richtig interpretiert wird. -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <select id='IDFieldList' size='1' style='height:80%'>
    <option value="0">A</option>
    <option value="1">B</option>
    <option value="2">C</option>
    <option value="3">D</option>
    <option value="4">E</option>
    <option value="5">F</option>
    </select>

    </td>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- DIV erhält genau die selben Style-Angaben wie SELECT -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <td style='position:relative; height:100%'>
    <div style='border:solid 1px red; height:80%'>
    nix
    </div>
    </td>

    </tr>

    </table>


    <script type='text/javascript'>
    <!--
    //=======================================================
    // Nach dem die Liste gezeichnet worden ist, kann nun
    // SIZE auf eine beliebige Größe angepasst werden,
    // ohne das Skallierungsprobleme gibt.
    //
    //=======================================================
    var
    list = document.getElementById("IDFieldList");

    list.size = '500';
    -->
    </script>


    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- Fazit: -->
    <!-- -->
    <!-- Mozilla kommt ein wenig durcheinander, wenn SIZE und HEIGHT -->
    <!-- angegeben werden. -->
    <!-- Wird SIZE später eingestellt, klappt alles wunderbar. -->
    <!-- Ob diese nun ein Bug ist oder nicht, darüber läßt sich -->
    <!-- sicherlich streiten. -->
    <!-- Ich denke, eine angegeben Höhenangabe sollte immer -->
    <!-- eingehalten werden. -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

    </body>

    </html>

    Einmal editiert, zuletzt von Hartje (5. November 2007 um 10:32)

    Hartje ist meine Vorname. Ich habe leider nichts mit der Fahrradfirma zu tun. Ist aber lustig, wenn man einen Lkw mit seinem Namen sieht.

    Meine eigenen Seiten schicke ich meist durch den validator aber nicht immer alle Testseiten.