zentrierter Text (3 Zeilen) mit Rahmen in einer Tabellezelle

[Roar]

Habe hier ein Problem. Ich möchte in einer Tabelle (1 Spalte, mehrere Zeilen) mit fester Breite in eine Zelle einen Text, der über drei Zeilen (aber in der gleichen Zelle) geht, einen Rahmen machen. Außerdem muss der Text zentriert sein.

Hier mein html:

<table border="0" cellpadding="0" cellspacing="0" width="155">
    <tr>
      <td class="klasse1"><a href="ziel.html"><div class="klasse2">Zentrierter<br />umrahmter<br />Text</div></a></td>
    </tr>
</table>

Hier mein css:
.klasse1 { padding: 15px 0 15px 0; text-align: center; font-size: 0.8em; line-height: 0.8em; }
.klasse2 { width: 70px; padding: 1px; border: 1px solid #dc0000;}

Beim Internet Explorer 6 oder 7 funktioniert dies, beim Firefox 1.5 allerdings nicht?!?!

Kann mir vielleicht jemand sagen, wie ich das Ergebnis in beiden Browsern bekomme? Das Prinzip in der html-Datei mit Tabelle sollte schon beibehalten werden...

Roar

[Zeromancer]

Hallo Roar,

unabhängig von deinem Aufbau, der schlichtweg nicht zeitgemäß und fehlerhaft ist:

<table border="0" cellpadding="0" cellspacing="0" width="155">
    <tr>
      <td class="klasse1"><a href="ziel.html"><div class="klasse2">Zentrierter<br />umrahmter<br />Text</div></a></td>
    </tr>
</table>

Hier mein css:
.klasse1 { padding: 15px 0 15px 0; text-align: center; font-size: 0.8em; line-height: 0.8em; }
.klasse2 { width: 70px; padding: 1px; border: 1px solid #dc0000;}

Nimm das Div mit der "klasse2" raus. Ein <a>-Element darf kein Blockelement enthalten. Formatiere das <a>-Element mit der "klasse2" und setze es display:block

Beim Internet Explorer 6 oder 7 funktioniert dies, beim Firefox 1.5 allerdings nicht?!?!

Und das wundert dich? Du bist neu hier, oder? ;-)

Mit freundlichen Grüßen,
André

[Roar]

Hallo!

Danke für die schnellen Antworten!

Hallo Roar,

unabhängig von deinem Aufbau, der schlichtweg nicht zeitgemäß und fehlerhaft ist:

<table border="0" cellpadding="0" cellspacing="0" width="155">
    <tr>
      <td class="klasse1"><a href="ziel.html"><div class="klasse2">Zentrierter<br />umrahmter<br />Text</div></a></td>
    </tr>
</table>

Hier mein css:
.klasse1 { padding: 15px 0 15px 0; text-align: center; font-size: 0.8em; line-height: 0.8em; }
.klasse2 { width: 70px; padding: 1px; border: 1px solid #dc0000;}

Ist mir durchaus bewusst, dass dies nicht zeitgemäß ist ;-)

Nimm das Div mit der "klasse2" raus. Ein <a>-Element darf kein Blockelement enthalten. Formatiere das <a>-Element mit der "klasse2" und setze es display:block

Hab das jetzt mal geändert:
html:
<table border="0" cellpadding="0" cellspacing="0" width="155">
  <tr>
    <td class="klasse1"><div class="klasse2"><a href="ziel.html">Zentrierter<br />umrahmter<br />Text</a></div></td>
  </tr>
</table>

css:
.klasse1 { padding: 15px 0 15px 0; text-align: center; font-size: 0.8em; line-height: 0.8em; }
.klasse2 { width: 70px; padding: 1px; display: block; border: 1px solid #dc0000;}

Funktioniert leider immer noch nicht :-(

Beim Internet Explorer 6 oder 7 funktioniert dies, beim Firefox 1.5 allerdings nicht?!?!

Und das wundert dich? Du bist neu hier, oder? ;-)

Wundert mich nicht wirklich... habs nur anders rum erwartet ;-)

Mit freundlichen Grüßen,
André

Grüße, Roar

[Roar]

Danke nochmal an alle!

Jetzt klappts. Nach etwas recherchieren habe ich rausgefunden, dass nur inline-Elemente mit text-align: center zentriert werden - block-Elemente jedeoch nicht. Der IE 6 als auch 7 zentrieren allerdings auch block-Elemente.
Lösung: margin-left:auto und margin-right:auto funktionieren beim IE und beim Firefox für block-Elemnte zum Zentrieren

Gruß, Roar

[Matthias H.]

Habe hier ein Problem. Ich möchte in einer Tabelle (1 Spalte, mehrere Zeilen) mit fester Breite in eine Zelle einen Text, der über drei Zeilen (aber in der gleichen Zelle) geht, einen Rahmen machen. Außerdem muss der Text zentriert sein.

Hier mein html:
<table border="0" cellpadding="0" cellspacing="0" width="155">

<tr>
      <td class="klasse1"><a href="ziel.html"><div class="klasse2">Zentrierter<br />umrahmter<br />Text</div></a></td>
    </tr>
</table>

Hier mein css:
.klasse1 { padding: 15px 0 15px 0; text-align: center; font-size: 0.8em; line-height: 0.8em; }
.klasse2 { width: 70px; padding: 1px; border: 1px solid #dc0000;}
Beim Internet Explorer 6 oder 7 funktioniert dies, beim Firefox 1.5 allerdings nicht?!?!
Kann mir vielleicht jemand sagen, wie ich das Ergebnis in beiden Browsern bekomme? Das Prinzip in der html-Datei mit Tabelle sollte schon beibehalten werden...
Roar

also bei mir(firefox) ist es zentriert mit rotem rahmen und link.
aber die abstände des Textes sind zu wenig

[Roar]

also bei mir(firefox) ist es zentriert mit rotem rahmen und link.
aber die abstände des Textes sind zu wenig

Ja der Text ist schon zentriert, aber der rote Kasten selbst sollte in der Mitte der Zelle sein...
Sieht man besser falls in der Tabelle border="1" gesetzt ist...

Gruß, Roar