nicht angemeldet
Hallo Andreas,
kann man eigentlich mit CSS eine 'transparente' Hintergrundfarbe zuweisen? Also für Rahmen soll das ja gehen,
Die Betonung liegt auf "soll". Die CSS-Spezifikation 2.1 sagt, dass border-color auf alle Elemente angewendet werden kann, dass "transparent" ein erlaubter Wert ist, siehe http://www.w3.org/TR/CSS21/box.html#propdef-border-color und http://www.w3.org/TR/CSS21/tables.html#table-layers.
In einer Diskussion weiter unten https://forum.selfhtml.org/?t=96479&m=587021 wurde festgestellt, dass der IE 6 damit Probleme hat. Leider ist nach meinen Tests auch Firefox 1.0 (Windows XP) nicht ohne Fehl und Tadel. Opera 7.54 erfüllt am besten die Spezifikation (von diesen 3 von mir getesteten Browsern).
In SelfHTML, siehe http://de.selfhtml.org/css/eigenschaften/rahmen.htm#border_color steht unter anderem:
"... oder der Wert transparent (durchsichtiger Rahmen, interessant bei sich überlappenden Elementen ..."
Da nicht über Webspace verfüge, der permanent erreichbar ist, erlaube ich mir meinen Testcode hier einzufügen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
<title>Test: border-color: transparent</title>
<style type="text/css">
body, div, table, tr, td, p {
margin: 0;
padding: 0;
border-style: none;
}
body {
background-color: #0F0;
}
table {
background-color: #F00;
border-collapse: collapse;
}
tr {
background-color: #00F;
}
td {
border: 8px solid transparent;
background-color: transparent;
}
div {
background-color: #ff0;
}
p {
background-color: #0FF;
border: 2px solid transparent;
}
.mit {
border: 4px solid transparent;
}
table.separate {
border-collapse: separate;
}
hr {
margin: 5px;
padding: 0;
}
</style>
</head>
<body>
<div>
<table summary="Beispieltabelle 1 - border-collapse: collapse">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr class="mit">
<td>3</td>
<td><p>4</p></td>
</tr>
</table>
<hr>
<table summary="Beispieltabelle 2 border-collapse: separate" class="separate">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr class="mit">
<td>3</td>
<td><p>4</p></td>
</tr>
</table>
</div>
<hr>
<div class="mit">
Das ist ein Container
</div>
</body>
</html>
Zwei DIV-Container, der erste enthält zwei bis auf das Tabellenmodell identische Tabellen, der zweite einen einfachen Text.
Erwartete Anzeige:
Wenn der Rahmen transparent ist, erwarte ich die Hintergrundfarbe der Box zu sehen. Ist diese Hintergrundfarbe auf transparent gesetzt erwarte ich die Hintergrundfarbe des "darunter" liegenden Elementes zu sehen usw.
Anzeige in FF 1.0 (Win XP SP2)
Nicht-Tabellen-Elemente: Anzeige wie erwartet.
Tabellen-Elemente: Anzeige ist abhängig vom Bordermodell der Tabelle.
a) border-collapse: collapse
Zellrahmen sind weiß.
b) border-collapse: separate
Auf einer Breite von 2 Pixeln scheint die Hintergrundfarbe der
Tabelle durch. Und zwar unabhängig von der Rahmenfarbe des
<tr>-Elementes.
Anzeige im IE 6.0 (Win XP SP2)
Nicht-Tabellen-Elemente: Rahmen werden schwarz angezeigt.
Tabellen-Elemente: Anzeige ist abhängig vom Bordermodell der Tabelle.
a) border-collapse: collapse
Zellrahmen sind schwarz.
b) border-collapse: separate
Auf einer Breite von 2 Pixeln scheint die Hintergrundfarbe der
Tabelle durch. Und zwar unabhängig von der Rahmenfarbe des
<tr>-Elementes.
Anzeige in Opera 7.54 de (Win XP SP2)
Nicht-Tabellen-Elemente: Anzeige wie erwartet.
Tabellen-Elemente: Anzeige ist abhängig vom Bordermodell der Tabelle.
a) border-collapse: collapse
Zellrahmen sind in der Hintergrundfarbe der Tabellenzeilen (innen)
Zellrahmen sind in der Hintergrundfarbe des die Tabelle umschliessenden
Containers (aussen)
b) border-collapse: separate
Auf einer Breite von 2 Pixeln scheint die Hintergrundfarbe der
Tabelle durch. Und zwar unabhängig von der Rahmenfarbe des
<tr>-Elementes.
Macht mir eventuell das Stylesheet des Browsers einen Strich durch die Rechnung?
Habe ich etwas komplett falsch verstanden?
Welche Darstellung würdet Ihr erwarten?
Wie sieht es unter anderen Betriebssystemen und anderen Browsern aus?
Der Box-Model-Bug des IE ist mir in diesem Zusammenhang gleichgültig, es geht mir um die resultierende angezeigte Farbe in den Border-Bereichen.
Freundliche Grüsse,
Vinzenz