Falsche Tabellenbreite => Scrollbars

[Neumai]

Hallo!

Im IE7 (und nur da) kämpfe ich gerade mit horizontalen Scrollbars. Ich habe das Problem auf eine simple Tabellenkonstruktion reduziert und hoffe, ihr könnt mir helfen, wie ich IE7 beibringe, die Breite richtig zu erkennen: Link zu Beispiel

Die Struktur soll eine Art Tabbed-Panel darstellen, oben links zwei Buttons, darunter der Content. Die Zellen der Buttons sollen so klein wie möglich sein, daher hat die Zelle rechts oben width=100%. In der Zelle darunter steht dann der Content, der eine gewisse Mindest-Breite hat. In IE6, FF2, FF3 wird die Breite richtig erkannt. Nur IE7 macht die Tabelle unnötig breit und erzeugt so horizontale Scrollbars bei entsprechender Fensterbreite.

Leider kann ich an der Struktur nicht viel ändern, weil die aus einer JSF-Taglib kommt. Ich kann aber beliebig mit CSS formatieren.

Hat jemand eine Idee?

Gruss,
Frank

PS: Wenns ein Bug im IE7 ist, würde ich mich auch über einen Link zu einem Bug-Report freuen.

 

[threadi]

Ist es Absicht, dass du fast gänzlich auf CSS verzichtest?

Wieso machst Du so ein Tab-Panel mit einer Tabelle? Mit tabellenlosem (X)HTML und CSS wäre es viel flexibler machbar.

 

[Furien]

Warum Layout mit Tabellen dumm ist:

Probleme definiert, Lösungen angeboten

 

[Neumai]

Hatte ich erwähnt, dass der HTML-Code aus einer JSF-Tag-Lib kommt? Oh ja, ich glaube schon.

Diese kann ich wirklich nicht ändern. Der Code für diese eine Komponente ist alleine an die 100kb gross und übersteigt sowohl mein Wissen als auch meine Berechtigung, da rumzupfuschen. Mein Arbeitsauftrag ist einfach: Fixe den Bug mit einer pragmatischen Lösung, änder die Tag-Lib nicht, am besten mit CSS, sonst JavaScript oder so... :-(

Aber weil's mich privat auch interessiert, Layout besser mit CSS als mit Tabellen zu machen, wär ich auch für ein paar Links in diese Richtung dankbar. (Die mir sagen, wie's geht, nicht was 'dolle böse' ist).
Und bitte kein selfhtml oder w3c.. das hab ich schon lange durch. Trotzdem fehlt mir noch das Wissen, welches Vorgehen man wählt, um z.B. so ein Tabellen-layout wie oben beschrieben, hinzubekommen.

Gruss,
Neumai

 

[Efchen]

Aber weil's mich privat auch interessiert, Layout besser mit CSS als mit Tabellen zu machen, wär ich auch für ein paar Links in diese Richtung dankbar. (Die mir sagen, wie's geht, nicht was 'dolle böse' ist).

In dem verlinkten Artikel von Seybold steht auch drin, wie es besser geht, nicht nur, dass es "böse" ist.

Und bitte kein selfhtml oder w3c.. das hab ich schon lange durch. Trotzdem fehlt mir noch das Wissen, welches Vorgehen man wählt, um z.B. so ein Tabellen-layout wie oben beschrieben, hinzubekommen.

Was ist an SelfHTML falsch? Das Problem ist Deine Aufgabenstellung. Du gehst falsch an die Sache ran, Du willst ein Tabellen-Layout umwandeln. Sowas geht nicht, deswegen kann Dir SelfHTML dazu nichts erzählen.

Layout mit CSS heißt Trennung von Inhalt und Layout. Du nimmst Deinen Inhalt und zeichnest ihn logisch mit HTML aus (auch fällt hier oft das Stichwort "Semantik"). Das heißt, Du benutzt für Deinen Inhalt das Tag, was Deinen Inhalt am besten beschreibt. Da gibt es <h1> für Überschriften 1. Ordnung, <p> für Textabsätze oder <address> für Adressen. Wichtige Worte oder Ausdrücke kennzeichnet man mit <em> oder wenns super-wichtig ist mit <strong>. Das ist HTML, wie es gedacht ist und Sinn macht. Und darüber erzählt Dir SelfHTML alles, was Du wissen musst.
Umsteigen von Tabellen-Layouts heißt für die meisten vor allem, dass sie endlich mal HTML lernen müssen! Beim Auszeichnen mit HTML ist das Aussehen unwichtig. Es geht hierbei nur um die Struktur, die Bedeutung des Inhalts. Trennung von Inhalt und Layout. Mit HTML nur Inhalt. Kein Layout/Design.

Layout/Design wird dann mit CSS gemacht. Und nur mit CSS. Wer HTML-Tags einsetzt, um bestimmte optische Effekte zu erzielen, der hats schlicht und einfach (noch) nicht verstanden. Mit CSS lassen sich für jedes Element beliebige Eigenschaften festsetzen. float z.B. ist wohl das beliebteste Mittel beim Layouten. Dazu muss man wissen, was Block-Elemente und Inline-Elemente sind und wie die sich verhalten.

Und noch ein Gerücht, das ich gleich aufräumen will: Genausowenig, wie man Layout mit Tabellen macht, macht man "Layout mit divs". Das Element <div> ist zum Gruppieren mehrerer Elemente zwecks gemeinsamer Formatierung. Um Inhalt auszuzeichnen gibt es idR immer ein anderes Tag, was besser geeignet ist.

So. Jetzt brauchst Du eigentlich kein Tutorial mehr, wie man es richtig macht, denn ich hab Dir im Prinzip alles gesagt. Der Rest ist rausfinden, welche CSS-Eigenschaften oder welche Tags es gibt und sie richtig anwenden. Mehr nicht.

Noch Fragen? :-) Gerne.

Gruß,
-Efchen