nicht angemeldet
Problem mit display:table-cell in Safari... ungewollte Abstände erscheinen zwischen und unter den Zellen
0 0 0 
JürgenB
0 
Matthias Apsel
0 
Gunnar Bittersmann
Problem mit display:table-cell in Safari... ungewollte Abstände erscheinen zwischen und unter den Zellen
Problem mit display:table-cell in Safari... ungewollte Abstände erscheinen zwischen und unter den Zellen
Hallo zusammen,
mit Freude habe ich kürzlich den Aufbau einer Seite von Tabellen auf Divs umgestellt und dabei auf display:table/table-row/table-cell zurückgegriffen. Das funktioniert insgesamt sehr fein, auch die Zellenhöhen und - breiten in Abhängigkeit der Bildschirmgröße etc..
Ein Problem bleibt, wie folgt:
Öffne ich einen solchen Aufbau wie im angegebenen Beispiel auf http://www.andreaswalther.de/div_tablecell_problem.html in Firefox, dann passt alles prima, die 'div-cells' hängen nahntlos aneinander; wechsle ich auf Safari, ergeben sich zwischen zwischen und unter ihnen Abstände, die ungewünscht sind und die ich nicht in den Griff bekomme.
Hat jemand eine Idee und kann weiterhelfen? Ich freue mich über jeden Rat!
Der entsprechende sourcecode gleich anschließend.
Danke und viele Grüße, awa
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #222222;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
div.table {
display: table;
border-collapse:collapse;
}
div.tr {
display:table-row;
vertical-align:middle;
}
div:tr_scr {
display:table-row;
overflow-x:hidden;
vertical-align:middle;
}
div.td {
display:table-cell;
border:none;
padding:0px;
overflow: scroll;
vertical-align:middle;
}
</style>
</head>
<body>
<div style="width:100vw; min-height:30vw; max-height:30vw; border:none;">
</div>
<div style="width:100vw;
overflow-x:hidden; overflow-y:hidden; border:none; background-color:#eeeeee;">
<div class="td">
<img src="Bilder/hellgrau.jpg" style="max-width:20vw; min-width:20vw;" height="10px">
</div>
<div class="td"valign="top" align="center">
<img src="Bilder/dunkelgrau.jpg" name="Arbeit31" style="max-width:60vw; min-width:60vw;" height="10px">
</div>
<div class="td">
<img src="Bilder/hellgrau.jpg" style="max-width:20vw; min-width:20vw;" height="10px">
</div>
</div>
</body>
</html>
-
Hallo
Krass. Du willst ernsthaft eine schwarze Seite mit einer grauen Linie erstellen. Wer soll die denn besuchen?
Dein HTML (XHTML ist bereits vor 10 Jahren offiziell begraben worden) und dein CSS sind inzwischen so veraltet wie Tabellenlayouts.
Um die die Problematik aufzeigen zu können benötigen wir eine Beispielseite mit konkretem Inhalt.
Deshalb nur soviel: Elemente, die mit display: table-cell angeordnet werden verhalten sich auch im HTML selbst erstellte Tabellen. Und das ist anders als das von Block-Elementen. Daher rühren deine Probleme.
Verwende aktuelles HTML / CSS und dir bleiben solche Probleme erspart.
Gruss
MrMurphy
-
Hallo MrMurphy,
vielen Dank für Deine Einschätzung! Mit der Seite, die ich gepostet hatte, war ich der Idee gefolgt, das Problem im Kern zu zeigen, weil ich annahm, es ließe sich so leichter nachvollziehen. Im Kontext findet es sich hier:
www.andreaswalther.de.
Diese Seite funktioniert gut auf Firefox, auf Safari zeigt sich dann gleich vielfach das angesprochene Problem.
In der Tat arbeite ich mit einem Dreamweaver CS4 von 2008, das kommt also ziemlich genau hin, 10 Jahre. Das HTML-Seminar, das ich einmal besucht hatte, liegt dann allerding nochmal neun Jahre weiter zurück... wüsstest Du ggf. ein gutes Buch zur Einarbeitung in aktuelles HTML/CSS zu empfehlen?
Viele Grüße, awa
-
Hallo,
www.andreaswalther.de.
Diese Seite funktioniert gut auf Firefox, auf Safari zeigt sich dann gleich vielfach das angesprochene Problem.
ich habe mir die Seite unter MacOS mit dem Safari und mi dem Firefox angesehen. Ich habe keinen Unterschied gesehen.
Mir ist aber aufgefallen, dass das oberste Foto farblich mit der Schrift übereinstimmt und im Kontrast mein MacBook überfordert. Ich wurde mit einer schwarzen Seite begrüßt.
Gruß
Jürgen
-
-
-
Hallo awa,
mit Freude habe ich kürzlich den Aufbau einer Seite von Tabellen auf Divs umgestellt und dabei auf display:table/table-row/table-cell zurückgegriffen.
Das ist löblich. Allerdings ersetzt du jetzt das Grammophon durch eine Magnetbandkassette, obwohl es längst bessere Möglichkeiten gibt.
Bis demnächst
Matthias--
Rosen sind rot.-
@@Matthias Apsel
mit Freude habe ich kürzlich den Aufbau einer Seite von Tabellen auf Divs umgestellt > Das ist löblich.
Inwiefern?
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory -
Hallo Matthias,
vielen Dank für Deine Rückmeldung! Wenigstens stimmt schonmal die Richtung... ;) Gut zu wissen, dass es noch sehr viel besser bzw. zeitgemäßer geht. Ich werde mich weiter einarbeiten.
Viele Grüße, awa
-
Hallo awa,
unser wiki ist ein geeignetes Werk um aktuelles HTML und CSS zu lernen.
Bis demnächst
Matthias--
Rosen sind rot.
-
-
-
@@awa
mit Freude habe ich kürzlich den Aufbau einer Seite von Tabellen auf Divs umgestellt
Die Freude kann ich nicht nachvollziehen. Tabellenlayout mit
divist genauso sinnfrei wie Tabellenlayout mittable. Du hättest einfach das Tag ergänzen können zu<table role="none presentation">und es gut sein lassen.Vernünftig wäre es gewesen, nicht
divs zu verwenden, sondern passende HTML-Elemente für Seitenstruktur und Inhalte. Vernünftig wäre es gewesen, nicht Tabellenlayout nachzubauen, sondern responsive, was sich den Gegebenheiten des Ausgabegeräts anpasst.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Sagtest du nicht was von „kürzlich“? Dann ist schon der Anfang nicht richtig.
Ich habe dazu kürzlich was geschrieben, wobei jeder der dort angesprochenen Punkte für dich relevant ist.
Was das Layouten betrifft: Beschäftige dich mit CSS Grid. Anleitungen dazu geben Rachel Andrew in Grid by example und Jen Simmons in ihrem YouTube-Kanla Layout Land. Im Wiki findest du weitere Links.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo LLAP,
vielen Dank für Deine Rückmeldung und herzlichen Dank für die konkreten Hinweise und die Links, ich gehe dem nun gerade nach. Wüsstest Du ggf. ein solides Standwerk State of the Art HTML/CSS zu empfehlen?
Viele Grüße, awa
-