Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Browserübergreifend exakte Platzierung von Tabellenrahmen
zurück: Größenangabe mit width="xx%" geht nicht in Outlook weiter: Tabelle: Padding horizontal/vertikal unterschiedlich, wie? Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Feedback Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
Eberh@rd
Ergonomie-Junkie


Verfasst am:
08. Jan 2013, 17:59
Rufname:

Browserübergreifend exakte Platzierung von Tabellenrahmen - Browserübergreifend exakte Platzierung von Tabellenrahmen

Nach oben
       

Hi Forum,

ich habe hier eine Tabelle und versuche die Tabellenrahmen browserübergreifend exakt an einer Grafik auszurichten, die in der Tabelle enthalten ist, allerdings mit niederschmetternden Resultaten.

Es ist eine einfache Tabelle mit drei Spalten, wobei die mittlere Spalte mittels "rowspan" in zwei übereinander liegende Zellen aufgeteilt ist.

In der linken und in der rechten Spalte ist jeweils eine Grafik mit zwei gleichgroßen Farbfldern enthalten.

Nun sollen die Tabellenrahmen der zwei mittleren Tabellenzellen mit den Rändern der Bitmap-Farben in Übereinstimmung gebracht werden. Allerdings setzt jeder Browser die Tabellenrahmen woanders (entweder außerhalb der Grafik, oder innerhalb der Grafik oder beides gemischt).

Hier ist der Code:
Code:
<html>

<body>
<table style="border-collapse: collapse;" cellpadding="0" cellspacing="0" width="100%">
<tbody>

<tr>
<td style="height: 222px;" rowspan="2" height="222" width="200">
<img src="http://666kb.com/i/caioxpiaxhzo6tczv.png"
height="222" width="200"/>
</td>

<td style="border-top: 1px solid green; border-bottom: 1px solid red; height: 111px;"
height="111" bgcolor="#33CCFF">&nbsp;
</td>

<td rowspan="2" width="200">
<img src="http://666kb.com/i/caioxpiaxhzo6tczv.png"
height="222" width="200"/>
</td>
</tr>

<tr>
<td style="border-bottom: 1px solid blue; height: 111px;"
height="111" bgcolor="#FF9900">&nbsp;</td>
</tr>

</tbody>
</table>
</body>
</html>
Das macht der Internet Explorer daraus: http://666kb.com/i/caiphyse8ogbpggln.png

Die oberen und unteren Tabellenrahmen sind bündig mit den Rändern der Bitmaps (gut), aber der Tabellenrahmen zwischen den beiden Tabellenzellen in der mittlere Spalte ist zwei Pixel höher als die Mitte der Grafik (schlecht).

Dies wird von Firefox angezeigt: http://666kb.com/i/caiplzr2k77gojlsb.png

Der untere Tabellenrahmen ist bündig mit dem Rand der Bitmap (gut), der obere Tabellenrahmen liegt außerhalb der Bitmap (schlecht), und der Tabellenrahmen zwischen den beiden Zellen in der mittlere Spalte ist einen Pixel höher als die Mitte der bitte (schlecht).

Opera zeigt dies an: http://666kb.com/i/caipm8slop1toiyvf.png

Der untere Tabellenrahmen ist außerhalb der Bitmap (schlecht), der obere Tabellenrahmen ist bündig mit der Bitmap (gut), und der Tabellenrahmen zwischen den beiden Tabellenzellen in der mittlere Spalte ist ebenfalls wieder einen Pixel höher als die Mitte der Bitmap (schlecht).

Die Frage ist also, gibt es irgendeine Möglichkeit, die Tabelle (browserübergreifend) so zu gestalten, dass a) der Rahmen zwischen den beiden Tabellenzellen in der mittlere Spalte genau auf halber Höhe der Grafik ist, und dass b) die oberen und unteren Tabellenrahmen bündig mit den Rändern der Grafik sind?

Riesen Dank vorab,
Grüße Eberh@rd



InternetExplorer.png
 Beschreibung:
 Dateigröße:  3.92 KB
 Angeschaut:  756 mal

InternetExplorer.png



Firefox.png
 Beschreibung:
 Dateigröße:  3.95 KB
 Angeschaut:  756 mal

Firefox.png



Opera.png
 Beschreibung:
 Dateigröße:  3.79 KB
 Angeschaut:  756 mal

Opera.png


womaninweb
(X)HTML und CSS Junkie


Verfasst am:
08. Jan 2013, 19:49
Rufname:
Wohnort: Aachen

AW: Browserübergreifend exakte Platzierung von Tabellenrahme - AW: Browserübergreifend exakte Platzierung von Tabellenrahme

Nach oben
       

Hallo Eberh@rd,

nach einigen Probieren komme ich zu dem Schluss, dass die linke und rechte Spalte auch einen Rahmen oben und unten benötigt. Ist irgendwie auch logisch: die Rahmen werden auf die Höhe bzw. Breite immer hinzugerechnet. Leider ist die Interpretation der Browser aber dabei recht unterschiedlich. Die einen verschieben nach oben, die anderen nach unten. Mit einem Rahmen oben und unten macht es der Opera, der Firefox und Chrome korrekt. Für den IE wirst du wohl einen conditional comment setzen müssen - aber beim IE ist man ja Kummer gewohnt.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Eberh@rd
Ergonomie-Junkie


Verfasst am:
09. Jan 2013, 13:38
Rufname:


AW: Browserübergreifend exakte Platzierung von Tabellenrahme - AW: Browserübergreifend exakte Platzierung von Tabellenrahme

Nach oben
       

Eberh@rd am 09. Jan 2013 um 10:16 hat folgendes geschrieben:
Hallo womaninweb und vielen Dank für Deine Antwort,

da ich mit den Tabellenrahmen auch weiterhin kein konsistentes Ergebnis über alle Browser erhalten habe, probiere ich es jetzt jetzt stattdessen mit DIV's in der mittleren Tabellenzelle.

Die bisherigen Ergebnisse erscheinen schon einigermaßen vielversprechend.

Ich melde mich dann mit dem abschließenden Resultat wieder.

Beste Grüße Eberh@rd.

o.k. ich habs geschafft, Klopf auf Holz™
Code:
<div height="1" style="height: 1px; font-size: 1px; max-height: 1px; line-height: 1px;">
<p style="font-size: 1pt; margin-top:0pt; margin-right:0pt; margin-bottom:0pt; margin-left:0pt; background: #D4D4D4;">
<font size="1">
<span style="font-size: 1pt;">
<img style="display:block;" src="http://666kb.com/i/cajepbho4e1p05f5g.gif" height="1" width="1">
</span>
</font>
</p>
</div>
Mit dem obigen Code bekomme ich in allen Browsern und in allen E-Mail-Clients dieser Welt eine konsistente Darstellung! Die Höhe der DIV's kann dann durch entsprechende Anpassung der Maßangaben sowie des enthaltenen transparenten GIF beliebig eingestellt werden.

Danke fürs hilfreiche Mitdenken,

Beste Grüße Eberh@rd
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Word VBA