Frage stellen
Mein Problem ist leider um einiges schwieriger und bin mal gespannt, ob es jemand lösen kann.
Ziel:
- tabellarische Darstellung mit 3 Spalten.
- In jedem td einer tr kann der content unterschiedlich lang werden.
- jede tr-zeile soll links und rechts abgerundete ecken haben
Problem:
- tr erlauben keine divs innendrin, welche ich in die Ecken positionieren könnte (float) und auch keine absoluten divs, welche ich vor die tr legen könnte mit den passenden rounded corners
Meine Lösung:
- innerhalb der ersten td und der letzten td ein div mit höhe 100% reinsetzen, welches jeweils den Zelleninhalt und die linken bzw rechten ecken darstellt.
- funktioniert im FireFox und Safari 1a. Nur im IE7 natürlich nicht, da er trotz td height:100% und tr height:100% das div eben nicht auf volle td höhe streckt, sondern nur bis content-länge, so dass die abgerundeten ecken mal links mal rechts mitten in der tr hängen (je nachdem auf welcher Seite im td der content zu kurz ist).
So, Mist.
Hat jemand ne Idee, wie man den IE7 dazu bringt, dass er die tr mit rounded corners darstellt? Sprich: ein div innerhalb einer td immer auf größe 100% streckt? Ich bin auch gerne für andere Lösungen empfänglich.
habe mal das Html+CSS in ein Primitv-Beispiel ausgelagert (siehe unten).
Wie man sieht werden die Ecken (hier rot dargestellt) im FireFox korrekt in die Ecken positioniert, im IE wird aber der innere div leider nicht entsprechend gestreckt.
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<style type="text/css">
table {border:0; margin:0; padding:0;}
table tr {height: 100%; padding:0; margin:0;}
table tr td {height: 100%; padding:0; margin:0;}
.col1, .col3 {background: #60AFFF; width: 30%;}
.col2 {background: #2687EA; width: 40%;}
.box {height: 100%; position: relative; z-index: 2; zoom: 1;}
.boxcontent {display:block; padding: 0.5em; min-height: 20px; }
.boxbackground {bottom:0pt; left:0pt; position:absolute; right:0pt; top:0pt; z-index:-1; }
.boxbackground * {overflow: hidden; position: absolute; }
.rounded-corner-top-right, .rounded-corner-top-left,
.rounded-corner-bottom-right, .rounded-corner-bottom-left {font-size: 1; width: 8px; height: 8px;}
.rounded-corner-top-right, .rounded-corner-top-left {top: 0pt;}
.rounded-corner-bottom-right, .rounded-corner-top-right {right: 0pt;}
.rounded-corner-top-left, .rounded-corner-bottom-left {left: 0pt;}
.rounded-corner-bottom-right, .rounded-corner-bottom-left {bottom: 0pt;}
.rounded-corner-top-right {background: red url(../top-right.gif) no-repeat top right;}
.rounded-corner-bottom-right {background: red url(../bottom-right.gif) no-repeat top right;}
.rounded-corner-top-left {background: red url(../top-left.gif) no-repeat top left;}
.rounded-corner-bottom-left {background: red url(../bottom-left.gif) no-repeat top left;}
</style>
</head>
<body>
<table>
<tr>
<td class="col1">
<div class="box">
<div class="boxcontent">
Inhalt Zelle links<br>
Der länger ist und dazu führt, dass die rounded corners rechts dann mitten in der tr erscheinen (nur im IE7).
</div>
<div class="boxbackground">
<div class="rounded-corner-top-left"></div>
<div class="rounded-corner-bottom-left"></div>
</div>
</div>
</td>
<td class="col2">Inhalt mittlere Zelle (ohne runde Ecken)</td>
<td class="col3">
<div class="box">
<div class="boxcontent">
Inhalt Zelle rechts
</div>
<div class="boxbackground">
<div class="rounded-corner-top-right"></div>
<div class="rounded-corner-bottom-right"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="col1">
<div class="box">
<div class="boxcontent">
Inhalt Zelle links
</div>
<div class="boxbackground">
<div class="rounded-corner-top-left"></div>
<div class="rounded-corner-bottom-left"></div>
</div>
</div>
</td>
<td class="col2">Inhalt mittlere Zelle (ohne runde Ecken)</td>
<td class="col3">
<div class="box">
<div class="boxcontent">
Inhalt Zelle rechts.<br>
Der länger ist und dazu führt, dass die rounded corners rechts dann mitten in der tr erscheinen (nur im IE7).
</div>
<div class="boxbackground">
<div class="rounded-corner-top-right"></div>
<div class="rounded-corner-bottom-right"></div>
</div>
</div>
</td>
</tr>
</table>
inspired by http://www.hedgerwow.com/360/dhtml/css_stretched_box/demo.php
</body>
</html>