nicht angemeldet
Hallo,
Das witzige bei der ganze Angelegenheit, ich verwende keine Doctypes, weil ich eigentlich die Standardeinstellungen der Browser bevorzuge bzw. eher noch nicht die exakte Bedeutung erfasst hatte.
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/.
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.
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">
Das mit der Frage bezüglich der Höhe und Breite hatte ich hier im Forum aufgeschnappt. Die untere Frame-Seite des folgenden von mir kreirten Rohlings http://home.t-online.de/home/wterme/Chasebase.de/index2.htm wurde z.B. kompakter dargestellt, sodass der Hintergrund im unteren Bereich zu sehen ist (was nicht sein soll) -> Tabelle von der unteren Seite wird bei Opera im GG. zu NS/IE mit weniger als 60 Pixel Höhe interpretiert.
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.
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.
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;}
bgproperties="FIXED" <-- Das kann meines Wissens herausfliegen, da sich das Hintergrundbild sowieso fortsetzt und ein Scrollen sowieso unmöglich ist.
Wozu ist das Hintergrundbild eigentlich nötig...?
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.
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...
Anders herum könntest du die Tabelle natürlich auch mit height:100% formatieren und die weiße Liniengrafik einbeziehen... oder oder oder.
Man kann das Problem leicht umgehen, indem ich für diese Seite einfach nur einen simplen schwarzen Hintergrund definiere oder einfach die Tabellenhöhe knallhart auf 60 Pixel festlege, dann gibs dahingehend keine Differenzen in der Darstellung IE/NS zu Opera.
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).
Fazit: Opera interpretiert Tabellenhöhe bei nicht festgelegten Werten anders als Netscape oder mein Favorit IE (anderes Rendering?).
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.
An sich will ich indirekt wissen, ob eine Doctype-Definition erforderlich und inwiefern sich diese Sache auf Opera vornehmlich auswirkt und wie ich bewirken kann, dass unbestimmte (keine konkreten Angaben in Pixel) Tabellenhöhen von allen Browsern auch identisch interpretiert werden.
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.
Verzeihe, wenn ich zu durcheinander geschrieben habe, ;) es gibt viele Verbesserungsmöglichkeiten.
Grüße,
Mathias