Rossi: padding/margin in Tabellenzelle

SELF-Forum

padding/margin in Tabellenzelle

Rossi
– Informationen zu den Bewertungsregeln

Hallo und guten Morgen,

Ausgangssituation:

Eine Tabelle hat eine Reihe mit zwei Zellen. In der rechten Zelle (zelle2) steht ein Beispieltext, am linken Zellenrand ausgerichtet.

////////////////////////////////////////////////////

Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>&nbsp;</title>
<style type="text/css">
<!--
.tabelle
{
width:100%;
height:auto;
background-color:green;
border-collapse:collapse;
border:1px solid blue;
}
.zelle1
{
width:auto;
height:auto;
background-color:green;
border:1px solid red;
}
.zelle2
{
width:300px;
height:auto;
padding:0px;
background-color:green;
border:1px solid red;
}
.texteigenschaften
{
text-decoration:none;
font-family:arial,sans-serif;
font-style:normal;
font-weight:normal;
font-size:9px;
letter-spacing:1px;
text-align:left;
vertical-align:middle;
color:#ffffff;
}
//-->
</style>
</head>
<body>
<table id="tabelle" class="tabelle">
<tr>
<td id="zelle1" class="zelle1">&nbsp;</td>
<td id="zelle2" class="zelle2"><span style="padding-left:2px;background-color:pink"><span class="texteigenschaften">Beispieltext</span></span></td>
</tr>
</table>
</body>
</html>

////////////////////////////////////////////////////

Sollsein:

Der Beispieltext soll farbig unterlegt sein (in diesem Beispiel mit der Farbe "pink").
Dieser farbige Bereich soll weiterhin am linken Zellenrand ausgerichtet bleiben, während der Text selbst einen Abstand von 5px vom linken Zellenrand haben soll.

Sollsein nochmal illustriert:

ZellenrandxxxxxBeispieltext

wobei xxxxx = Abstand und der Bereich "xxxxxBeispieltext" mit der Farbe "pink" unterlegt sein soll

////////////////////////////////////////////////////

Problem:

Bei allen meinen Versuchen mit "padding" und "margin" rückt der farbig unterlegte Bereich insgesamt, aber nicht - wie gewünscht - nur der Text im Bereich vom linken Zellenrand ab.

Habe versucht, <span>-Bereiche inneinander zu verschachtelt .....

<td id="zelle2" class="zelle2"><span style="padding-left:5px;background-color:pink"><span class="texteigenschaften">Beispieltext</span></span></td>

..... leider mit sehr unterschiedlichen Ergebnissen in den verschieden Browsern:

im IE 5.5 ist alles wie gewünscht ausgerichtet, und die Hintergrungfarbe "pink" liegt genau unter dem Text, in Firefox 0.9 ist alles wie gewünscht ausgerichtet, die Hintergrungfarbe "pink" füllt aber fast die ganze Höhe der Zelle aus, und in Opera 7.23 rutscht der farbige Bereich zu einem Teil sogar aus der Zelle.

////////////////////////////////////////////////////

Frage:

Was ist zu, um dieses - vermutlich einfache - Problem zu lösen ?

Mit freundlichen Grüßen Rossi

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. padding/margin in Tabellenzelle

    egg
    – Informationen zu den Bewertungsregeln

    hast du es mal so versucht?
    <td class="zelle2"><span class="texteigenschaften" style="padding-left:5px; background-color:pink;">Beispieltext</span></td>

    gruß
    egg

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. padding/margin in Tabellenzelle

      Rossi
      – Informationen zu den Bewertungsregeln

      Hi,

      hast du es mal so versucht?
      <td class="zelle2"><span class="texteigenschaften" style="padding-left:5px; background-color:pink;">Beispieltext</span></td>

      Jau, das funktioniert auch,dank;

      mit einer Einschränkung, wie ich festgestellt habe: "letter-spacing:1px" musste ich für den IE in einen eigenen <span> unterbringen; scheint irgendwie Probleme damit zu haben, wenn die padding-werte unter 10px liegen ... :-/

      <td class="zelle texteigenschaften">
      <span class="abstaende">
      <span style="letterspacing:1px">electropost</span></span></td>

      Mfg Rossi

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln