Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Netzwerke>Tabellengrösse bei Safari, Firefox und IE nicht gleich....

Tabellengrösse bei Safari, Firefox und IE nicht gleich....

aikonch13.05.0815:43
Ich habe da mal was gebastelt das ein Bild in einer Tabelle zusammenquetscht und in Firefox und Safari klappt dies auch bestens, drucke ich es aus hat es genau 12 * 12cm, also CD Hüllen Format. Doch in Safari ist das ganze Grösser....ich möchte das dies in allen 3 Browser problemlos funktioniert, wie kann ich eine "automatische" Auswahl machen, sprich wenn Safari dann eben andere height und weight Werte verwenden?

Das ganze ist in PHP, bzw. basiert dann natürlich auf normalem HTML Code....
0

Kommentare

tomthecat
tomthecat13.05.0816:01
Link? Code?
0
aikonch13.05.0816:10
ist "leider" geschützt, der ausgegebene Code sieht z.Bsp. so aus:

<table width=448 style='border-width:1px; border-style:solid; padding:0px; margin:0px;'><td><img width=448 height=1 src=bilder/leer.gif>
        <table border=0 width=415><tr><td rowspan=2 align=left valign=middle><img height=440 width=1 src=bilder/leer.gif><img height=440 width=310 src='showpic.php3?filmid=3311&nr=1'></td><td align=center valign=top><br><p style='font-family:Arial Black; font-size:14px;'><b>DTS 5.1<BR></B></p><tr><td valign=bottom align=center><p style='font-family:Arial Black; font-size:14px;'><b>FSK 16<BR><BR>90min</B></p><BR></td></tr></table></table>
0
tomthecat
tomthecat13.05.0816:20
1. Ich würde wenn schon alle weiten im style-Tag versorgen:
style="width:448px"
2. Die werte sollten alle wenn möglich in anführungszeichen sein. Ausserdem müsste definiert sein was es für Werte sind 448 pixel? 448 Eier?
3. Wenn du schon so genau und dann für den Druck arbeiten willst gib im Style doch gleich mm an. Das sollte funktionieren:
style="width:120mm", habe ich aber nicht getestet, aber im Safari gehts.
0
tomthecat
tomthecat13.05.0816:21
Sorry zu 2.:
In anführungszeichen natürlich nur, wenn du es nicht in den Style-Tag schreibst.
0
aikonch13.05.0823:02
Hmm, leider scheint das Safari nicht sonderlich zu interessieren....sprich auch die Style Angabe 120mm hilft nicht, es wird dennoch grösser....
0
sierkb14.05.0813:40
aikonch
Ich habe da mal was gebastelt das ein Bild in einer Tabelle zusammenquetscht und in Firefox und Safari klappt dies auch bestens, drucke ich es aus hat es genau 12 * 12cm, also CD Hüllen Format. Doch in Safari ist das ganze Grösser....ich möchte das dies in allen 3 Browser problemlos funktioniert, wie kann ich eine &x22;automatische&x22; Auswahl machen, sprich wenn Safari dann eben andere height und weight Werte verwenden?
Das ganze ist in PHP, bzw. basiert dann natürlich auf normalem HTML Code....


Wie wär's, wenn Du Dich mal in HTML und CSS reinkniest und mal das Potential ausschöpfst, welches Dir diese Technologie bietet?
Die bietet Dir nämlich u.a. Folgendes: je nach zugreifendem Endgerät ein passendes Stylesheet bzw. passende Style-Regeln, welche die Tabelle entweder für den Bildschirm in der Größe rendern, die Du auf dem Bildschirm gerne hättest und welche dieselbe Tabelle mit entsprechender Bemaßung (z.B. Zentimeter oder Millimeter) anders rendern, wenn Du sie ausdruckst?

Aus dem obigen HTMl-Code würde ich alle Informationen, die irgendwie mit dem Aussehen und der Größe Deiner Tabelle zu tun haben, rausnehmen und in ein entsprechendes CSS-Stylesheet packen, die gehören nämlich in CSS rein und nicht ins HTML. Außerdem würde ich zwei Stylesheet-Dateien erstellen: eine für das Medium Bildschirm und eine für das Medium Print und diese im HTML-Header entsprechend referenzieren:

<link rel="stylesheet" href="default.css" type="text/css" media="all"/>
<link rel="stylesheet" href="print.css" type="text/css" media="print"/>

In der Datei default.css stehen dann alle Maße und Informationen bzgl. Größe, Aussehen, Position der Tabelle drin, die die Tabelle bei allen Medienzugriffen haben soll (media="all"), Du könntest auch media="screen" angeben, um die Informationen auf den Bildschirm (screen) alleine zu begrenzen. In der Datei print.css stehen dann alle Informationen drin, die die Seite bzw. Tabelle haben soll, wenn ein reines Printausgabe-Medium (z.B. ein Drucker) drauf zugreift. Ich würde dann in dem Fall sinnvollerweise Angaben in cm, mm oder pt (Point) für die Größe und Position der Tabelle machen und nicht Pixel (px), die eigentlich nur für die Screenausgabe sinnvoll sind.

Das Beispiel
<link rel="stylesheet" href="aural.css" type="text/css" media="aural"/>
würde z.B. sagen: nimm dieses Stylesheet, wenn ein aurale Ausgabe erfolgt (z.B. Voice-Browser, Sprachausgabe)


Mehr dazu z.B. unter



Wenn Du auf diese Weise Inhalt und Layout schön trennst, dann hast Du in der HTML-Datei idealerweise eine kleine Tabelle stehen, die um EINIGES kleiner und schlanker ist als das eigenartige und fehlerhafte Konstrukt, welches Du hier gepostet hast.
Ränder (border), Abstände nach innen, Abstände nach außen, Farben, Größen, Positionen etc. gehören alle ins CSS und nicht ins HTML!

Abgesehen davon ist der Code, den Du oben gepostet hast, völlig fehlerhaft -- ein Wunder, dass die Browser überhaupt was anzeigen. Lass' ihn mal unter validieren. Nur valider Code (valide = gültig, korrekt, fehlerfrei) kann von den Browsern auch fehlerfrei, korrekt und im Sinne des Erstellers angezeigt werden. Invalider und fehlerhafter Code muss vom Browser erraten werden und trifft selten das, was man als Ergebnis eigentlich erwartet.
Bügele also erstmal Deine Fehler im Code aus. Behilflich dabei ist Dir ein Validator (z.B.der Referenz-Validator des W3C, ) und auf dem Weg dorthin z.B. auch Tidy von . Tidy gibt's auch als nützliches Firefox-Plugin namens HTML Validator: .
Ab PHP5 gibt's sogar Tidy als PECL Extension, die lediglich per PHP-Konfiguration eingeschaltet werden muss.


Erstmal sauberen, validen Code schreiben. Dann klappt's auch mit den erwarteten browserübergreifend wirkenden Ergebnissen. Ansonsten kann es nix werden...
0
aikonch14.05.0813:46
sierkb, vielen Dank werde ich mir mal anschauen, allerdings sieht das nach ein bisschen viel Aufwand aus für etwas das ich mehr oder weniger als "Quick and dirty" Lösung benötige....ich bin kein Webseitenbauer
0
sierkb14.05.0814:21
aikonch
sierkb, vielen Dank werde ich mir mal anschauen, allerdings sieht das nach ein bisschen viel Aufwand aus für etwas das ich mehr oder weniger als &x22;Quick and dirty&x22; Lösung benötige....ich bin kein Webseitenbauer


Dann solltest Du Dir die Grundlagen wenigstens zu dem Thema aneignen, wenn Du Dein Problem in den Griff bekommen möchtest. Der HTML-Code jedenfalls ist, so wie Du ihn oben zitiert hast, schon mal fehlerhaft. Schon allein damit grenzt es fast an Zufall, wenn ein Browser da irgendwas Brauchbares herauslesen kann. Insofern verwundert Dein geschildertes Problem auch nicht.

Eine Tabelle ist grundsätzlich so aufgebaut:

<table> <!-- Tabelle
<tbody> <!-- Tabellen-Body, optional, sollte aber nicht fehlen
<tr> <!-- Tabelle-Zeile
<td></td> <!-- Tabellen-Zelle
</tr>
</tbody>
</table>

Eine Tabelle hat mindestens eine Tabellenreihe (table row, kurz: <tr>) und mindestens eine Tabellenzelle (<td>).

So, und nun vergleiche mal mit Deinem Konstrukt, was bei Dir evtl. fehlen könnte...
Mindestens eine Angabe für <tr> fehlt da, Du klatschst da gleich ein <td>-Element in ein <table>-Element rein. Schau es Dir mal genau an. Sowas mag kein Browser bzw. das ist schon mal ein Garant dafür, dass da nix browserübergreifend sauber dargestellt werden *kann*. Wie gesagt: Setze Deine Seite einem Validator wie dem vom W3C, http://validator.w3.org/ vor. Der zeigt Dir gnadenlos alle Fehler auf, und die würde ich Stück für Stück beseitigen. Erst, wenn diese Fehler beseitigt sind, dann würde ich mich dranmachen und schauen, ob irgendein Browser sonst noch irgendwie rumzickt. Fehlerhaften Code goutiert kein Browser.

Es sei Dir gesagt: aus mancher "Quick und Dirty"-Lösung wurde und wird ganz schnell eine ziemlich nervenaufreibende Sache, wenn man meint, pfuschen zu können. Arbeite lieber gleich sauber und ordentlich, und dann hast Du am Ende weniger Probleme und Nacharbeiten. Es ist ein weit verbreiteter Irrglaube, dass auf diesem Feld "Quick & Dirty" sich auszahlt, anstatt gleich sauber zu arbeiten. Das dicke Ende und die Nacharbeit ist oft größer, wenn man unsauber arbeitet. Erst recht ist das der Fall, wenn die Webseite unter möglichst vielen Browsern/Endgeräten gleich aussehen soll bzw. fehlerfrei angezeigt werden soll. Valider, korrekter, fehlerfreier Code ist der wichtigste Grundstein dafür, das ist schon mindestens dreiviertel der Miete.
Ansonsten ist's reine Zeitverschwendung, wenn man trotzdem nicht hören will.
0
aikonch14.05.0814:48
Hast ja recht, bin mich mal bei selfhtml und hier am einlesen....denn bisher verstehe ich wohl den Grundgedanken von CSS, aber nicht wie man das genau umsetzt....mal sehen....;)

Das oben ein TR usw. fehlt hat schon seinen Sinn, denn verwende ich diesen stimmt der Abstand oben und unten nicht mehr überrein welcher das Bild hat, ok ich kann ihn dann auch unten ebenfalls hinzufügen aber dann wird der Rand zu gross...kurz hatte gebastelt damit es so raus kommt wie eben und die Ausgabe ist "perefekt" nur eben nicht in Safari....
0
sierkb14.05.0814:58
@aikonch:
Das oben ein TR usw. fehlt hat schon seinen Sinn

Nein, das hat keinen Sinn! Das ist grundlegend falsch! Und es wird nicht richtiger, wenn Du es jetzt schönredest. Du darfst Dich nicht wundern, wenn's in Safari Probleme gibt, wenn Du dann auch noch *bewusst* sowas falsch machst bzw. Du das Ganze bewusst auch noch begründest! Schreib's richtig, und wenn's was bzgl. irgendwelcher Abstände und Positionierungen zu positionieren gibt, dann mache das ebenfalls mit CSS. Ansonsten sind die Ergebnisse browserübergreifend unvorhersagbar und eher dem Zufall überlassen, ob's hinhaut oder nicht!

Durch Deine "Bastelei" und "Quick&Dirty"-Aktion und das Schönreden derselben (ohne aber zu wissen, was Du genau tust), verschlimmerst Du die Sache eher bzw. kommst der Problemlösung kein Stück näher. mache es richtig, korrekt und vernünftig, und Du wirst sehen, dass ist der einzige Weg, etwas Quick zu machen. Die saubere Lösung ist um Einiges schneller und kürzer geschrieben als Dein bisher eingeschlagener Weg, und sie verbraucht zudem auch noch weniger Bandbreite bzw. weniger Ressourcen des Browsers! Je weniger ein Browser korrigierend raten muss, umso schneller stellt er die Inhalte dar.
0
aikonch14.05.0815:14
sierkb, ja ich habe verstanden.... Mache mich ja nun daran und bin fleissig am lesen...mal sehen wohin dies führt....hehe
0
Stranger21.05.0800:39
vielleicht muss er im notfall auch auf css hacks zurückgreifen, damit safari mit einem anderen wert angesprochen wird als ff
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.