Wolfgang Berger: Tabelle mit Colspan hat unerwartete Größe

Es geht um folgende Seite:
http://www.uni-ulm.de/~s_wberge/mvg/index_neu.html

Netscape 6 zeigt sie wie erwartet an. Der IE allerdings zieht die Navigationsspalte links zu breit auf. Opera 5 macht die Navigationsspalte in die Einträge zu breit.

Das Grundgerüst besteht aus einer Tabelle mit 2 Spalten und 2 Zeilen. In der ersten Zeile sind die Spalten mit colspan="2" verbunden. Lasse ich die erste Zeile weg. Sieht alles aus wie erwartet.

Nun habe ich schon versucht, die Breite mit <colgroup> vorzudefinieren. Das bringt aber auch nichts.

Wo liegt mein Fehler.

Danke für eure Hilfe
Wolfgang

  1. hi,

    Es geht um folgende Seite:
    http://www.uni-ulm.de/~s_wberge/mvg/index_neu.html
    Wo liegt mein Fehler.

    beseitige bitte zuersyt die html-fehler http://validator.w3.org/check?uri=http%3A%2F%2Fwww.uni-ulm.de%2F~s_wberge%2Fmvg%2Findex_neu.html&charset=iso-8859-1+(Western+Europe)&doctype=HTML+4.01+Transitional
    vorher macht es keinen grossen sinn, sich auf die suche nach den ursachen für (vermeintliche) darstellungsfehler zu gehen.

    gruss,
    wahsaga

    1. beseitige bitte zuersyt die html-fehler

      Danke, für den Hinweis. Nun ist die Seite HTML 4.01 konform. Allerdings bleibt das Problem noch bestehen.

      Ich habe unter
      http://www.uni-ulm.de/~s_wberge/mvg/index_reduziert.html

      eine abgespeckte Version eingestellt.

      Nehme ich im Kopf die Tabelle heraus, stimmt die Breite der Navispalte.
      (Darüber befindet sich der Kommentar: OHNE DIESE TABELLE FUNKTIONIERT
      ES NICHT)
      Wie kann ich aber festlegen, dass die erste Spalte genau 120px hat, egal wieviel in der ersten Zeile mit colspan=2 steht ?

      Gruss
      Wolfgang

  2. Hallo Wolfgang,

    http://www.uni-ulm.de/~s_wberge/mvg/index_neu.html

    Das Grundgerüst besteht aus einer Tabelle mit 2 Spalten und 2 Zeilen. In der ersten Zeile sind die Spalten mit colspan="2" verbunden. Lasse ich die erste Zeile weg. Sieht alles aus wie erwartet.

    Diese Tabelle ist vermutlich unnötig, den Abstand kannst du durch margin-top lösen, dazu brauchst du keine leere Zelle (das ist sowieso schlechter Stil).

    Ich habe das Layout einmal umgemodelt:
    http://home.t-online.de/home/dj5nu/fanhost/gerst.html

    Jetzt existieren nur noch zwei Tabellen, die erste #kopf mit drei Spalten, darunter #spalten mit zwei Spalten. #navi ist die linke Zelle, welche eine Breite und eine Höhe zugewiesen bekommt, damit ist die Breite begrenzt. Darin befindet sich eine ul-Liste für die Links. Die Liste und deren li-Elemente sind mit CSS formatiert. (Du kannst dort auch meinetwegen ein weiteres table-Element, ich halte es für unnötig.)

    Den JavaScript-Code habe ich erst einmal herausgenommen, du solltest die Dropdown-Navigation sowieso zugänglich gestalten, also es als normales Formular mit vollem action-Attribut benutzen und serverseitig weiterleiten.

    Einige Dinge, die du beachten solltest:

    • IDs anstatt Klassen - wenn ein Element nur einmal im Dokument vorkommt, ist eine Klasse unpassend
    • Nachkommenselektoren statt verschachtelte Klassen/IDs, vgl. </archiv/2003/6/50210/#m275275>. <td class="navi">...<td class="menu_td"><a class="navigation" href="localhost">Jugend</a> ist völlig unnötig, die td-Elemente sind mit dem Selektor #navi td und die a-Elemente mit dem Selektor #navi a adressierbar.
    • Die Einheit pt vermeiden, besser px, noch besser em/%, siehe Archiv
    • Die Grafiken kann mein Opera nicht lesen, wenn ich sie neu abspeichere mich anderer Palette, geht es. Verwende immer eine passende Palette anstatt der Websafe-Palette, beispielweise lassen sich drei von vier Grafiken auf 16 Farben reduzieren.
    • Die Qualität der Logografik ist ziemlich schlecht, nimm lieber eine passendere Palette oder gleich JPEG
    • Du musst margin und padding explizit auf 0 setzen, wenn du den Abstand zwischen Inhalt und Fensterrand komplett abschalten willst
    • Für den Absatz mit den Kontaktadressen steht das address-Element zur Verfügung
    • Bei kleinen Überschriften ragt der Titelschriftzug über den roten Hintergrund hinaus

    Grüße,
    Mathias

    1. Hallo,

      Ich habe das Layout einmal umgemodelt:
      http://home.t-online.de/home/dj5nu/fanhost/gerst.html

      Grmbl, warum sagt denn niemand, dass der Link 404 ist...
      Richtige URL: http://home.t-online.de/home/dj5nu/fanhost/gers.html

      Grüße,
      Mathias