TD-tag mag css-padding nicht...

[Carlos]

Hallo zusammen,

ich habe folgendes Problem:

Ich habe im <style>-Bereich der Seite folgendes CSS definiert:

<style>
.data_tables {

margin-left:20px;
 margin-top: 20px;
 margin-bottom:20px;
 border:1px solid #505050;
 border-collapse:collapse;
  }

td.data_tables {
 border: 1px solid #505050;
 padding:10px;
 vertical-align:middle;
 text-align:right;
  }
</style>

Nun folgt weiter unten eine Tabelle, deren <table>-tag auch das oben definierte wunderbar annimmt... das darin liegende <td>-tag weigert sich aber strikt, das text-align und das padding zu befolgen. Weiß jemand, woran das liegen könnte?

Vielen Dank
Gruß
C.

[Christoph Schnauß]

hallo,

.data_tables {

Das gilt für eine allgemeine Klasse "data_tables" - egal, ob für eine Tabelle oder <pre> oder <p> oder <h3> oder sonst irgendein HTML-Element.

margin-left:20px;
margin-top: 20px;
margin-bottom:20px;

Diese drei lassen sich zusammenfassen zu
   margin: 20px 0 20px 20px;

td.data_tables {

Jetzt gibst du _zusätzlich_ dazu, daß ein <td>, sofern es eben den Klassennamen "data_tables" erhält noch

padding:10px;
vertical-align:middle;
text-align:right;

berücksichtigen soll.

Nun folgt weiter unten eine Tabelle, deren <table>-tag auch das oben definierte wunderbar annimmt... das darin liegende <td>-tag weigert sich aber strikt, das text-align und das padding zu befolgen.

Hast du denn auch
   <td class="data_tables">
angegeben? Und: in welchem Browser passiert dir diese dir fehlerhaft scheinende Interpretation?

Grüße aus Berlin

Christoph S.

[Gunnar Bittersmann]

@@Christoph Schnauß:

margin-left:20px;
margin-top: 20px;
margin-bottom:20px;

Diese drei lassen sich zusammenfassen zu
   margin: 20px 0 20px 20px;

3 Angaben lassen sich zu 4 Angaben _zusammen_fassen? Tsts.

Du hast 'margin-right: 0' _hinzu_gefügt, was einen evtl. woanders gesetzen Wert überschreiben könnte.

Hast du denn auch
   <td class="data_tables">
angegeben?

Vermutlich nicht. Will er vermutlich auch gar nicht; sondern 'td'-Elemente selektieren, die sich innerhalb von Elementen der Klasse "data_tables" befinden. Das geht mit dem Selektor für Nachfahren [CSS2 §5.5, http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML]

Live long and prosper,
Gunnar

[Christoph Schnauß]

hallo Gunnar,

Diese drei lassen sich zusammenfassen zu
   margin: 20px 0 20px 20px;
3 Angaben lassen sich zu 4 Angaben _zusammen_fassen? Tsts.

Nein, zu _einer_.

Du hast 'margin-right: 0' _hinzu_gefügt

Was der "Voreinstellung" der meisten Browser entspricht.

was einen evtl. woanders gesetzen Wert überschreiben könnte.

Was nur dann geschieht, wenn dieses _woanders_ in der CSS _darüberstehend_ notiert wurde.

Hast du denn auch
   <td class="data_tables">
angegeben?
Vermutlich nicht.

Nett, daß du meine Vermutung teilst ;-)

Will er vermutlich auch gar nicht;

Nett, daß du eine neue Vermutung hinzufügst, die ich diesmal nicht teile.

sondern 'td'-Elemente selektieren, die sich innerhalb von Elementen der Klasse "data_tables" befinden.

Das ist Spekulation, also noch nicht einmal Vermutung.

Das geht mit dem Selektor für Nachfahren [CSS2 §5.5, http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML]

Jaein. Jetzt hast du überlesen, daß ich nach dem Browser gefragt habe, in dem die im OP genannten Mißlichkeiten zutage getreten sind.

Live long and prosper,

Ich werde mir Mühe geben ;-)

Grüße aus der Nachbarschaft

Christoph S.

[Gunnar Bittersmann]

@@Christoph Schnauß:

3 Angaben lassen sich zu 4 Angaben _zusammen_fassen? Tsts.

Nein, zu _einer_.

Eben nicht. _Vier_ Angaben lassen sich zu einer zusammenfassen.

Jetzt hast du überlesen, daß ich nach dem Browser gefragt habe

Nein. Ich hielt diese Information für irrelevant.

Grüße aus der Nachbarschaft

Berlin – die Stadt, die niemals schläft.

Live long and prosper,
Gunnar

[MudGuard]

Hi,

Diese drei lassen sich zusammenfassen zu
   margin: 20px 0 20px 20px;
3 Angaben lassen sich zu 4 Angaben _zusammen_fassen? Tsts.
Nein, zu _einer_.

Im Original wurden 3 Werte gesetzt, Dein Teil setzt 4 Werte.

Du hast 'margin-right: 0' _hinzu_gefügt
Was der "Voreinstellung" der meisten Browser entspricht.

Ob der von Dir zusätzlich gesetzte Wert zufällig irgendeiner Voreinstellung entspricht, ist doch vollkommen irrelevant.
margin-top:20px; margin-bottom:20px; margin-left:20px;  ist NICHT gleichbedeutend mit margin: 20px 0 20px 20px;

was einen evtl. woanders gesetzen Wert überschreiben könnte.
Was nur dann geschieht, wenn dieses _woanders_ in der CSS _darüberstehend_ notiert wurde.

Falsch. Es hängt nicht nur von der Reihenfolge ab (das ist nur bei gleich-spezifischen Selektoren der Fall).

Beispiel:

div.bla { margin-top:20px; margin-bottom:20px; margin-left:20px; }
div { margin-right:50px; }

vs.

div.bla { margin:20px 0 20px 20px; }
div { margin-right:50px; }

Im ersten Fall hat <div class="bla"> einen margin-right von 50px, im zweiten Fall hat Dank Deiner nicht-gleichbedeutenden Zusammenfassung einen margin-right von 0px. Und das, obwohl das "woanders" hier nicht "darüberstehend" ist.

cu,
Andreas

[Carlos]

Hallo,

danke für den Hinweis, allerdings ist es in der Tat so, dass ich innerhalb einer Tabelle verschiedenen TDs verschiedene Klassen zuweisen möchte, also in 2 Spalten ist die linke Zeile für Text und die rechte für ein Eingabefeld formatiert...

Gruß
C.

[Gunnar Bittersmann]

@@Carlos:

danke für den Hinweis, allerdings ist es in der Tat so, dass ich innerhalb einer Tabelle verschiedenen TDs verschiedene Klassen zuweisen möchte,

Das ist nicht das, was du möchtest; sondern das, was du glaubst tun zu müssen, um das, was du möchtest, zu erreichen,

Also was möchtest du?

also in 2 Spalten ist die linke Zeile […]

Typo? Du meinst „Zelle“?

[…] für Text und die rechte für ein Eingabefeld formatiert...

Da brauchst keine Klassen. Du musst nur deine Tabelle vernüntig[tm] auszeichenen. [</archiv/2008/2/t167058/#m1089512>, </archiv/2008/3/t167728/#m1094112>, </archiv/2008/3/t167728/#m1094438>]

Live long and prosper,
Gunnar

[Christoph Schnauß]

hallo Gunnar,

sag mal, warum machst du sowas

@@Carlos:

Hältst du das für nötig oder ist das ein Stück "Voreinstellung", das ich bisher bei dir nicht bemerkt habe?

In diversen Boards kenne ich dieses "@" auch und benutze es gelegentlich fleißig, wenn ich in _einem_ posting auf _mehrere_ Vorgängerpostings reagieren will. Aber wir haben hier eine Darstellung, die dein Antwortposting immer exakt an der Stelle im Thread plaziert (beachte bitte: das ist "alte" Rechtschreibung, und ich bleibe bei der und werde niemals "platziert" schreiben), an der es stehen soll. Du antwortest _immer_ auf das Vorgängerposting, und niemals gleichzeitig auf mehrere.

Grüße

Christoph S.

[Gunnar Bittersmann]

@@Christoph Schnauß:

sag mal, warum machst du sowas

@@Carlos:

Weil ich bei der Archivsuche ein wichtiges Feature vermisse: suche Postings, die Author X als Antwort auf ein Posting von Autor Y geschrieben hat.

So kann ich das zumindest für X = ich realisieren. Bspw. finde ich meine Gunnar™-Postings mit "+author:Gunnar +'@@Gunnar Bittersmann'". ;-)

Live long and prosper,
Gunnar

[Carlos]

Hallo,

verstehe, td.xyz {... bewirkt also etwas zusätzlich zu xyz.

Wie bekomme ich es dann hin, dass das TD-tag unabhängig von dem "mutter-table-tag" eigene definitionen annimmt?

Ich habe bereits versucht, eine neue class td.text_tables zu nennen und im td-tag entsprechend class="text_tables" anzugeben... aber das Padding will immernoch nicht.

Wenn ich in die class td.text_tables ein color: #ff0000; einfüge, wird der Text in der entsprechenden Zelle auch brav rot!

Vielen Dank für Deine Hinweise!

Gruß (ebenfalls aus Bln)
C.

[Christoph Schnauß]

hallo Carlos,

Wie bekomme ich es dann hin, dass das TD-tag unabhängig von dem "mutter-table-tag" eigene definitionen annimmt?

Am einfachsten geht das, indem du ihm eine eigene Klasse verpaßt. Das könnte die "Vererbungslinie" in CSS durchbrechen. Wenn du die nicht durchbrechen willst, machst du es eben so:
   table.data_tables td {...Anweisungen...}

aber das Padding will immernoch nicht.

Das deutet auf den IE6 hin. Ich habe nicht umsonst gefragt, welchen Browser du als "Referenbrowser" benutzt.

Grüße aus Berlin

Christoph S.

[Carlos]

Hallo,

Am einfachsten geht das, indem du ihm eine eigene Klasse verpaßt. Das könnte die "Vererbungslinie" in CSS durchbrechen. Wenn du die nicht durchbrechen willst, machst du es eben so:
   table.data_tables td {...Anweisungen...}

Alles klar, die Vererbungslinie kann ich ruhig durchbrechen, ich werde Deinen Vorschlag mal umsetzen.

Das deutet auf den IE6 hin. Ich habe nicht umsonst gefragt, welchen Browser du als "Referenbrowser" benutzt.

In der Tat, diese Frage habe ich übersehen ;-)

Ich nutze FF 2.0.0.12 und IE7 als Browser, bei beiden tritt das Problem jeweils in gleicher Form auf.

Gruß
C.

[Gunnar Bittersmann]

@@Carlos:

Am einfachsten geht das, indem du ihm eine eigene Klasse verpaßt.

Nein. Am einfachsten geht das mit vernünftigem[tm] Markup.

ich werde Deinen Vorschlag mal umsetzen.

Besser meinen Vorschlag mal umsetzen.

Live long and prosper,
Gunnar

[Christoph Schnauß]

hallo Gunnar,

Am einfachsten geht das, indem du ihm eine eigene Klasse verpaßt.
Nein. Am einfachsten geht das mit vernünftigem[tm Markup].
ich werde Deinen Vorschlag mal umsetzen.
Besser meinen Vorschlag mal umsetzen.

Boah ... ich sehe mich genötigt, mich doch noch intensiv mit Verschwörungstheorien auseinanderzusetzen.

Grüße aus Berlin

Christoph S.

[suit]

margin-left:20px;
margin-top: 20px;
margin-bottom:20px;

Diese drei lassen sich zusammenfassen zu
   margin: 20px 0 20px 20px;

nicht zwangsweise - bei obrigen 3-zeile bleibt margin-right auf voreinstellung des browsers, bei deinem einzeler drunter wirds auf 0 gesetzt - dennoch würde auch ich letzteres bevorzugen, da man dann sicherstellt, dass jeder browser die selben werte verwendet (oder zumindest sollte)