Tabelle hat in jedem Browser anderes Aussehen

  • Hallo,

    in der Suchfunktion wusste ich nicht, was ich eingeben sollte, ebenso weiß ich nicht, in welches Forum mein Problem gehört - ich bitte, es mir nachzusehen...:-|

    Folgendes: Wenn ich im Quellcode (als HTML) mit TinyMCEeine Tabelle formatiere - links Text, rechts Bild - wird es in jedem Browser anders angezeigt. Wenn ich jedoch den selben Code mit Windows-Editor schreibe und anschließend lokal als HTML-Datei anzeigen lasse, sieht es genauso aus, wie ich es wollte.

    Was mache ich falsch? Was ist bei Wordpress so anders? Wie kann ich erreichen, dass alle gängigen Browser es gleich darstellen?

    Gruß, Wuseline

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Wenn ich dich richtig verstehe, erstellst du im zweiten Fall eine statische HTML Datei mit dem Windows-Editor und lässt sie dir auf deinem lokalen Rechner anzeigen?
    Während du im ersten Fall eine Seite mit TinyMCE erstellst die innerhalb TinyMCE anders aussieht als wenn du die Seite dir "normal" mit einem Browser anzeigen lässt?

    Diesen Effekt habe ich in manchen Bereichen auch.
    Der Grund liegt darin, daß Wordpress (bzw. TinyMCE) keine statischen HTML-Seiten verwendet.
    Je nach verwendetem Theme und Seitenvorlagen werden bestimmte Eintragungen die du in TinyMCE machst durch den Code des Themes der für das "Design" zuständig ist überschrieben.

    Du kannst das durch entsprechende Eintragungen in der style.css verhindern/ändern.
    Diese Datei findest du im linken Menürand über -> Design -> Theme Editor.
    Dort musst du oben rechts dein verwendetes Theme auswählen, und anschließend in der darunter befindlichen Liste "Theme Files" die Datei style.css (wenn nicht schon automatisch ausgewählt).
    Der Inhalt der Datei wird dann im Theme-Editor angezeigt.
    Damit deine Eintragungen beim nächsten Theme-Update nicht überschrieben werden, solltest du mit Child-Themen arbeiten. Sonst musst du nach einem Theme-Update dieselben Eintragungen wieder neu machen.

    Das eine Webseite in einem Browser anders aussieht als in einem andern Browser liegt daran wie der jeweilige Browser den Code interpretiert. Hier kann man nur darauf achten nur solchen Code zu verwenden, der von allen Browsern gleich interpretiert wird.
    Aber es ist nicht nur der Code den man selbst eingibt, sondern auch der Code des verwendeten Themes und des Seitentemplates - mit anderen Worten der gesamte Code der dargestellten Seite.
    Das war auch der Grund für mich, ein Standart-Theme zu verwenden, und keine Experimente mit exotischen Themen zu machen.

    Mit anderen Worten:
    Du hast nichts falsch gemacht, sondern die Frage lautet, welche Eintragungen musst du in der style.css ändern (eintragungen) damit die Ansicht der Tabellen deinen Vorstellungen entspricht.
    (Mit diesem Thema bin ich auch noch nicht ganz durch)

    Gruß Frank

    Einmal editiert, zuletzt von Frank9652 (1. März 2014 um 17:28)

  • Zitat

    [COLOR=#3E3E3E]Wenn ich dich richtig verstehe, erstellst du im zweiten Fall eine statische HTML Datei mit dem Windows-Editor und lässt sie dir auf deinem lokalen Rechner anzeigen?[/COLOR]
    [COLOR=#3E3E3E]Während du im ersten Fall eine Seite mit TinyMCE erstellst die innerhalb TinyMCE anders aussieht als wenn du die Seite dir "normal" mit einem Browser anzeigen lässt?[/COLOR]

    Ja, das ist richtig, wobei ich bei TinyMCE meistens im Quellcode schreibe. Bei visuell sieht es dann gut aus, im Browser anders und dazu noch verschieden in Chrome, Firefox und Internet Explorer.

    Mein Problem ist also die Einteilung der Tabellen. Soll meinen, ich definiere eine Gesamtbreite von, sagen wir 860px, die ich dann halbiert jeweils für die Zellen

    Code
    <td>...</td> 
    <td>...</td>

    verwenden möchte. Jeder Browser interpretiert das tatsächlich anders, wie du sagtest, obwohl der Code Standard ist und 1:1 im Quellcode von TinyMCE landet.

    Zitat

    [COLOR=#3E3E3E]sondern die Frage lautet, welche Eintragungen musst du in der style.css ändern (eintragungen) damit die Ansicht der Tabellen deinen Vorstellungen entspricht.[/COLOR]

    Ich habe mir die style.css eben angesehen (twentyeleven Childtheme), bzw. die Passage, die das Areal betrifft im Browser "untersucht". Kann es sein, dass es sich um diese Deklaration handelt?

    Code
    .entry-content td,.comment-content td {
        border-top: 1px solid #ddd;
        padding: 6px 10px 6px 0;
    }

    Und wenn ja, was kann ich dort als Standard, also für alle Browser gültig setzen?

    Oder bin ich da auf dem "Holzweg" und muss ganz anders vorgehen?

    Gruß, Wuseline

  • Wegen der Einstellungen in der Styles.css muss ich passen, da verstehe ich zu wenig.
    Dazu müssen andere Leute was sagen.

    Ich hatte es mit ach und krach hinbekommen, dass die Tabellenrahmen überhaupt sichtbar werden - finde jetzt aber diese Stelle nicht mehr. (Bei meinem Theme TwentyTen-Child waren alle Tabellenrahmen unsichtbar.)
    Cellpadding und Cellspacing habe ich bis heute noch nicht hinbekommen, deshalb sieht es auch ein bischen scheiße aus (steht noch auf meiner ToDo-Liste).

    Wenn die die Breite der gesamten Tabelle in Pixeln vorgibst, dann dürfte es nichts ausmachen ob die die Zellenbreite in Prozent oder auch in Pixeln angibst. - Ich würde aber an deiner Stelle mal beides testen.

    Du kannst ja mal diese Vorlage probieren

    <div align="center">
    <table border="1" cellpadding="5">
    <tbody>
    <tr>
    <td colspan="5" align="center" width="691" height="19"><strong>Text
    </strong>Text<strong></strong></td>
    </tr>
    <tr>
    <td width="302">Spalte1:</td>
    <td width="144">Spalte2:</td>
    <td width="90">Spalte3:</td>
    <td width="82">Spalte4:</td>
    <td width="73">Spalte5:</td>
    </tr>
    <tr>
    <td width="302"><span style="color: #0000ff;">Text1</span></td>
    <td width="144">Text2</td>
    <td width="90">Text3</td>
    <td width="82">Text4</td>
    <td width="73">Text5</td>
    </tr>
    </tbody>
    </table>
    </div>

    Die Vorlage müsste dann bei dir auch so aussehen wie bei mir.
    Ich habe die Vorlage aus DIESER Seite erstellt (damit du einen Vergleich hast)

    Wenn das so bei dir funktioniert, würde ich an deiner Stelle daraus eine Blankotabelle erstellen, die du bei Bedarf als Codeschnipsel einfügst, und dann je nach Gegebenheit abänderst.

    Gruß Frank

  • Hallo Frank,

    erstmal vielen Dank, dass du dich an den Überlegungen beteiligt hast.

    Habe es ausprobiert, aber es ging nicht. Die ganze Seite war "zerschossen" :-( und ich hatte den alten Code wieder reingetan.

    Nach langem Probieren und Rumspielen - ach ja, ich habe jetzt den CKEditor drauf - hatte ich dann doch endlich Erfolg. Alle drei Browser zeigen das Gleiche an *freu*

    Es war nicht mal etwas Weltbewegendes, sondern eine kleine Passage im Code, die ich jetzt separat gesetzt habe. Da muss man erstmal drauf kommen :smile:

    Puh, Problem gelöst - gutes Ende

    Gruß, Wuseline

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!