CiJay86: Tabelle mit bestimmter Höhe

Beitrag lesen

Hi,

Solange du zumeist nur Tabellen für das Layout benutzt und width und padding nicht primär mit CSS vergibst, merkst du die Unterschiede auch nicht in vollster Auswirkung.
Der MSIE interpretiert bis zur Version 6 das CSS-Boxmodell nicht standardgemäß, er bezieht das padding in die Breite der Box mit ein, siehe http://www.fabrice-pascal.de/artikel/ie5boxmodel/. Im MSIE 6 wird nur standardgemäß gerendert, wenn eine voller DOCTYPE (Dokumenttypdeklaration) am Dokumentanfang angegeben ist, ansonsten schaltet er in den Quirks-Modus, in welchem er weiterhin gemäß diesem fehlerhaften Boxmodell anzeigt.
http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html zeigt, welche DOCTYPEs welchen Modus auslösen (natürlich sollte dein Dokument dem entsprechend, das wäre bei dir vermutlich HTML 4.01 Transitional).
Opera 7 ahmt diesen Fehler nach (!), wenn kein DOCTYPE beziehungsweise ein unvollständiger angegeben ist, siehe http://www.opera.com/docs/specs/doctype/.

Danke für diese Information. Was diese Grundlagen technischer Hinsicht betrifft, bin ich als Hobbybastler nicht bewandert genug.

In der Regel solltest du bemüht sein, in allen Browsern - Mozilla hat übrigens auch verschiedene Rendermodi - den standardkonformen Modus anzuschalten, weil du dann meist auf eine einheitliche Darstellung hoffen kannst. Im MSIE 4-5.x müsstest du allerdings im ersten Link genannte Workarounds zur Umgehung des Problems anwenden usw., aber das ist vorerst wahrscheinlich nicht relevant.

Wenn es zu Komplikationen kommen sollte, werde ich dahingehend handeln.

Für das beschriebene Problem ist der DOCTYPE aber meines Wissens nicht wichtig, weil bei Tabellen das width/padding-Problem eigentlich nicht vorhanden ist. Da der MSIE auch zusätzlich noch einen komischen Scrollleisten-Bug hat, wenn der standardkonforme Modus angeschaltet ist, würde ich dir explizit zum Quirks-Mode raten. Das hieße entweder kein DOCTYPE (wie jetzt auch schon), oder: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Scrolleisten-Bug ? Was exakt ?

Zunächst einmal würde ich dir raten, das Markup aufzuräumen, konkret schmeiße erst einmal die font-Element heraus. Im Stylesheet hast du die Schriftgröße bereits in der Einheit px festgelegt - das ist wichtig, denn das font-Element kann nur relative Werte vergeben! Somit würde <font size="1"> je nach eingestellter Standardschriftgröße immer unterschiedlich angezeigt, dies kann ein Grund für die vonn dir beobachteten Differenzen sein.

Frage vorweg: Bin ich richtig in der Annahme, dass du auf den footerfame.htm eingegangen bist ?

Im oberen Frame hatte ich explizit das Problem, dass in der Tabelle die Schriftfarbe (nur Farbe) beim IE6 trotz vordefinierten CSS nicht angezeigt wurde, darum habe ich - meiner eigentlichen Annahme zunächst nach - dazu entschlossen nur zur Sicherheit diese deiner Meinung nach überflüssige Markup reinzunehmen. Werde das von dir angesprochene mal austesten und meinen Bedürfnissen anpassen!

Zur Grössendefinition: Ich habe in einer extra platzierten CSS-Datei der <font size="1"> Tag eine feste Pixelformatierung zugeordte (1-3, mehr verwende ich wenn dann nicht). Opera hat dies genau wie NS korrekt erfasst, daher rührt mein Problem sicher nicht.

Dürfte eher die schwammige Interpretation der Tabellenhöhe sein, gemäss dem von dir angesprochen Punkt des Innenabstand!

Ich weiß nicht, ob die Netscape 4.x unterstützen willst, ich würde dir raten, nahezu alle Formatierungen mit Styles vorzunehmen, dadurch hast du in der Regel mehr Kontrolle und hast vor allem eine größere Sicherheit, dass die Regeln wirken, da du Möglichkeiten hast, welche du mit HTML-Formatierungen per se nicht hast.

Danke für den Rat!

Du hast bereits im Stylesheet die margins für body abgeschaltet, ich würde das ausdehnen und explizit auch padding deaktivieren, zusätzlich auch die des html-Elements (dürfte im Quirks-Mode irrelevant sein, aber sicher ist sicher):
html,body {margin:0; padding:0;}

Wird gemacht!

bgproperties="FIXED" <-- Das kann meines Wissens herausfliegen, da sich das Hintergrundbild sowieso fortsetzt und ein Scrollen sowieso unmöglich ist.

Denke ich auch!

Wozu ist das Hintergrundbild eigentlich nötig...?

Nachdem ich die Testseite hochgeladen hatte, frage ich mich das auch, vor allen Dingen, wenn man das Hintergrundmotiv eh nicht sieht ;-) Rührt eher daher, dass ich für diesen Footerframe was anderes gebastelt habe und beim Umändern mir das abhanden kam. Kommt sicher weg ! ;-)

Zuerst einmal die obere Tabelle, folgendes dürfte reichen:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td><img src="line1000.gif" height="1" width="100%" alt=""></td></tr>
</table>
... das könntest du natürlich auch ohne »blinde Tabelle« lösen, mit <div style="margin:0; padding:0">...</div> würde vermutlich dasselbe bezwecken.

Mit den folgenden Styles kannst du das Markup ziemlich verkleinern:
td {color:white; background-color:black; text-align:center;}
table {border-style:none; border-spacing:0; border-collapse:collapse; height:59px}
div {margin:0; padding:0;}
(Die border-Eigenschaften für table sind nicht unbedingt nötig.)

Beispielmarkup *ohne Scripts*:

<div><img src="line1000.gif" height="1" width="100%"></div>

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="59">
<tr>
<td width="28%"><b>Datum:</b>  Sonntag, 16. Februar 2003</td>
<td width="44%"><b>LAST NEWS: </b><marquee width="325">Chasebase.de in neuer Aufmachung (Februar 2003)!  <a href="http://home.t-online.de/home/wterme/Chasebase.de/news.htm" target="headframe">Click!</a></marquee></td>
<td width="28%"><i>Du bist Besucher-Nr.:</i><br><img src="countergrafik.png"></td>
</tr>
</table>

Hintergrundfarbe und Hintergrundbild von body könntest du auch im Stylesheet (im lokalen, welches nur für die Datei gilt, also im style-Element im head) festlegen.
In wie weit du leftmargin="0" rightmargin="0" usw. verwendest, hängt natürlich davon ab, ob du Netscape 4.x und andere prä-CSS-Browser noch unterstützen willst.

Prinzipiell so viel unterstützen wie möglich, aber ohne auf bestimmte Darstellungsfinessen, die umgesetzt sind, zu verzichten.

Danke für die ausführlichen Tip!

Unabhängig von den kosmetischen Änderungen, bei welchen HTML-Formatierungen durch Styles ersetzt werden, zeigt das Beispiel folgendes: Schalte die Innenabstände der Tabelle ab, damit du viel Spielraum hast. Ich würde es nicht zulassen, dass sich die Höhe der Tabelle selbst regelt, die Faktoren, die das beeinflussen könnten, sind zu zahlreich, wenngleich alles festgelegt sein sollte. Eventuell gebe allen td-Elementen zusätzlich eine line-height (http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#line_height), damit die Zeilenhöhe fest ist. Die Tabellenhöhe würde ich fixieren, sodass die Zeilen darin bis auf die Maximalhöhe anwachsen können, ohne die Tabelle zu vergrößern (deshalb kein padding). Das Problem ist nämlich, dass beispielsweise das marquee-Element in manchen Browsern zweizeilig angezeigt wird, Opera 7 ignoriert es anscheinend vollkommen...

Zeilenhöhe sollte aber eigentlich auch exakt definiert sein (so würde ich es jetzt machen) ?

Anders herum könntest du die Tabelle natürlich auch mit height:100% formatieren und die weiße Liniengrafik einbeziehen... oder oder oder.

Wie meinst ? ;-). Wenn ich die Liniegrafik in das Tabellenkonstrukt einbeziehe, meckern doch die Browser, dass die erste Zeile einspaltig ist und die 2. beispielsweise 3.spaltig ? Oder meinst du was völlig anderes ? ;-)

Das würde ich dir sogar raten (in dem Fall eher 59 Pixel, weil die weiße Grafiklinie oben einen Pixel einnimmt, sofern sie außerhalb der Tabelle untergebracht wird).

So mache ich das dann ;-)!

Im Grunde genommen sollten sie diese einfache Übung gleich anzeigen, mit dem Rendermodus sollte es nichts zu tun haben (meiner Mutmaßung nach). Ich tippe konkret eher auf die Schriftgröße (wegen den font-Elementen), auf die vertikale Ausrichtung der Counter-Grafik (vielleicht mit vertical-align:bottom herumspielen), auf die line-height (jedoch eher unwahrscheinlich) und auf das marquee-Element, welches nur im MSIE funktioniert.

Siehe oben, das dürfte keine großen Auswirkungen haben. Auf Opera <7 sowieso nicht, bei den anderne Browsern dürfte es momentan auch keine Unterschiede (für den speziellen Frame) machen.

Danke!

Verzeihe, wenn ich zu durcheinander geschrieben habe, ;) es gibt viele Verbesserungsmöglichkeiten.

Als Hobbybastler ist man oft noch weit entfernt von einem perfekten Allfunktionstüchtigen Quelltext. Du hilst mir weiter! Ich bedanke mich für deine - mit manchmal zu langem Text ;-) - grosse Aufmerksamkeit.

Grüße,
Mathias

CYA
Christian