awa: Problem mit display:table-cell in Safari... ungewollte Abstände erscheinen zwischen und unter den Zellen

Beitrag lesen

SELF-Forum

Problem mit display:table-cell in Safari... ungewollte Abstände erscheinen zwischen und unter den Zellen

awa (Versionen)
– Informationen zu den Bewertungsregeln

problematische Seite

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>
Beitrag melden
–
Informationen zu den Bewertungsregeln