Schriftgroesse in Tabelle laesst sich nicht aendern

[Andrea]

Hallo zusammen!

Ich moechte in meinen mit CSS "gestylten" Tabellen die Schriftgroesse auf 10px setzen. So:

table.menue  {
  background-color : #F8F8FF;
  border-style : groove;
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  border-color: #5F9EA0;
  //font-size :10px;
  text-align : left;
  padding:0px;
}

.tableposdiv {
  background-color:#FFFFFF;
  font-size :10px;
}

#posmenue {
  position:absolute;
  left:340px; top:490px;
}

---

<div id="posmenue" class="tableposdiv">
 <table class="menue" cellspacing="0" cellpadding="0" width="180px" height="120px">

<form name="interval" action="">
      <tr bgcolor="#99CCCC">
        <td>Alter</td>
 <td></td>
      </tr>
      <tr>
   <td>0-10</td>
      <td><input type=radio name=iv value="zehn" checked> </td>
...

das funktioniert natuerlich nicht, wie ich so will. Nu hab ich die Befuerchtung, es lingt an den 2 Klassen (einmal im DIV und einmal in der Tabelle und ehrlich gesagt hab ich mir das mit meinen blutigen Anfaengerkenntnissen irgendwie zusammen kopiert...) Oder kann es an den Radiobuttons liegen, dass die Schrift nicht kleiner wird?

Danke fuer jede Hilfe

Ach so: IE 6

[Stefan Einspender]

Hallo,

Ich moechte in meinen mit CSS "gestylten" Tabellen die Schriftgroesse auf 10px setzen. So:

wende die dafür zuständige CSS-Definition (font-size) auf das je-
weilige HTML-Element (z.Bsp. td) an, dann funktioniert es.

table.menue  {
  background-color : #F8F8FF;
  border-style : groove;
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  border-color: #5F9EA0;
  //font-size :10px;
  text-align : left;
  padding:0px;
}

Hier sollte auch noch color definiert werden, //font-size ist so
nicht zulässig.

.tableposdiv {
  background-color:#FFFFFF;
  font-size :10px;
}

S.o. (color)

<table class="menue" cellspacing="0" cellpadding="0" width="180px" height="120px">

<form name="interval" action="">
      <tr bgcolor="#99CCCC">
        <td>Alter</td>
<td></td>
      </tr>
      <tr>
   <td>0-10</td>
      <td><input type=radio name=iv value="zehn" checked> </td>
...

Wenn Du ohnehin CSS verwendest, dann solltest Du auch die hier ver-
wendeten HTML-Attribute ersetzen, jeder aktuelle Browser kommt damit
zurecht. Außerdem ist das obige HTML-Konstrukt nicht korrekt, damit
meine ich die Verschachtelung des form-Elementes und desen "Unter-
Elementen" in einer Tabelle. http://validator.w3.org/ hilft Dir.

Oder kann es an den Radiobuttons liegen, dass die Schrift nicht kleiner wird?

Nein, die Lösung habe ich gleich ganz oben geschrieben.

Ach so: IE 6

Unrelevant, ein Großteil Deiner Besucher verwenden diesen Browser
vermutlich nicht.

Viele Grüße,
Stefan

[at]

Hallo.

Ach so: IE 6

Unrelevant, ein Großteil Deiner Besucher verwenden diesen Browser
vermutlich nicht.

Ich bin ja auch kein Freund von Statistiken -- jedenfalls in 90 Prozent der Fälle --, aber deine These wird auch durch das Wort "vermutlich" nicht besser nachvollziehbar.
MfG, at

[wahsaga]

hi,

Ich bin ja auch kein Freund von Statistiken -- jedenfalls in 90 Prozent der Fälle --,

*lol*
der war nicht übel.

gruss,
wahsaga

[at]

Hallo.

Ich bin ja auch kein Freund von Statistiken -- jedenfalls in 90 Prozent der Fälle --,

*lol*
der war nicht übel.

Pssst, ich muss doch meine eigenen Zitate für http://selfcommunity.teamone.de/foren/community/?t=2225&m=2480 sammeln ;-)
MfG, at

[Uschi Renziehausen]

Hallo Andrea,

Erstmal räumen wir deinen HTML-Code auf: Innerhalb von <table></table> darf es nur bestimmte Elemente geben, und <form> gehört nicht dazu.

<form name="interval" action="">
<div id="posmenue" class="tableposdiv">
<table class="menue" cellspacing="0" cellpadding="0" width="180px" height="120px">
  <tr bgcolor="#99CCCC">
    <td>Alter</td>
    <td></td>
  </tr>
  <tr>
    <td>0-10</td>
    <td><input type=radio name=iv value="zehn" checked="checked" /></td>
  </tr>
</table>
</div>
</form>

Und nun das css-Geraffel dazu
<style type="text/css">
/* Standard-Abstaende von Formularen wegmachen */
form {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

table.menue  {
  background-color : #F8F8FF;
  border-style : groove;
  border-color: #5F9EA0;
  text-align : left;
  padding:0px;
}

table.menue td {
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 10px;
}

.tableposdiv {
 background-color:#FFFFFF;
 font-size :10px;
}
</style>

ACHTUNG:
Kommentare gehen in CSS ausschließlich so:
/* font-size: 10px; */
nicht
// font-size: 10px;

[Stefan Einspender]

Hallo,

<table class="menue" cellspacing="0" cellpadding="0" width="180px" height="120px">

ein height-Attribut gibt es für das table-Element nicht.

Viele Grüße,
Stefan

[Uschi Renziehausen]

moin Stefan,

Es GIBT das height-Attribut, nur ist es eben nicht valides xhtml. Ich weiss nichts über den doctype der Seite. Du?

Gruß, Uschi

[Stefan Einspender]

Hallo Uschi,

Es GIBT das height-Attribut

für welche HTML- oder XHTML-Variante ist das height-Attribut für das
table-Element definiert? Die Existens allein reicht nicht aus ;-)

Ich weiss nichts über den doctype der Seite.

Unwichtig, da es wie schon gesagt keine W3C-Spezifikation gibt, nach
der diese Kombination zulässig ist.

Viele Grüße,
Stefan

[Uschi Renziehausen]

Stefan,

ich gebe es ja zu, ich bin eine Ketzerin: ich bemühe mich zwar, halbwegs validen Code zu schreiben, aber wenn ich mir anders nicht zu helfen weiß, dann werde ich eben unvalide. Ein height-Attribut bringt die Tabelle nicht um. Bisweilen erfinde ich sogar ganz neue Attribute hinzu, die ich dann wunderbar über getAttribute() auswerten kann.
Am Ende ist es mir wichtiger, dass die Seite in möglichst vielen Browsern wunschgemäß funtkioniert.

Uschi

[wahsaga]

hi,

Ein height-Attribut bringt die Tabelle nicht um.

Am Ende ist es mir wichtiger, dass die Seite in möglichst vielen Browsern wunschgemäß funtkioniert.

diese aussagen sind aber wiedersprüchlich, da standardnähere browser wie opera und mozilla height für table eben _nicht_ umsetzen (im standardkonformen modus), so dass du eben damit _nicht_ in verschiedenen browsern das gleiche ergebnis bekommen wirst.

gruss,
wahsaga

[Uschi Renziehausen]

gugugg wahsaga,

mir ist schon klar, dass mozi und opera mit height bei table nichts anfangen können. Die können dafür aber - im Gegensatz zu Netscape 4.x - CSS. Wenn der irgendwas können muss, brauchst du eben anderen HTML-Code, Standardkonformität hin oder her. Insofern kann ich in meiner Aussage keine Widersprüchlichkeit erkennen.

Mit etwas Glück bin ich NN4.x Anfang 2005 endgültig los.
Den IE werde ich mit Sicherheit nicht so schnell los, weder 5.x, noch 6, und solange wird mich eben die box-model-Differenz verfolgen.
Sei versichert, dass ich bei allen neuen Projekten Opera berücksichtige, allerdings erst ab Version 7.

Ich arbeite so, dass ich für die CSS immer erst von Mozilla ausgehe. Damit ist dann meist auch schon Opera erschlagen. Dann kommt der IE an die Reihe. Wenn es um JavaScript geht, ist der Weg meist ein wenig anders, weil sich Opera und der IE dort häufig näher sind.

Manche Sachen gehen eben in Opera nicht, z.B. oncontextmenu. Und bevor jetzt wieder der Aufschrei kommt, dass die rechte Maustaste dem User gehört: Das weiß ich, und ich verwende das nur in ohnehin eingeschränkt zugänglichen Administrationsseiten, um die Usability zu verbessern.

Gruß, Uschi

[MudGuard]

Hi,

Ich moechte in meinen mit CSS "gestylten" Tabellen die Schriftgroesse auf 10px setzen. So:

Damit es für User im IE erschwert wird, die Schriftgröße auf lesbare Werte anzupassen? Oder warum wählst Du px?

table.menue  {
  background-color : #F8F8FF;
  border-style : groove;
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  border-color: #5F9EA0;

border-width sollte auch explizit angegeben werden.

//font-size :10px;

Abgesehen davon, daß das kein in CSS erlaubter Kommentar ist - dort gibt es einzig und allein die /* */-Variante:
Durch die // kann die Eigenschaft font-size nicht mehr erkannt werden.

Je nach CSS-Parser wird alles, was nach dieser fehlerhaften Stelle ist, evtl. nicht mehr berücksichtigt.

text-align : left;
  padding:0px;
}
.tableposdiv {
  background-color:#FFFFFF;
  font-size :10px;

Je nach Browser wird die Schriftgröße für table im Browserstylesheet explizit gesetzt - dadurch funktioniert Vererbung oft nicht.

}

#posmenue {
  position:absolute;
  left:340px; top:490px;
}

<div id="posmenue" class="tableposdiv">
<table class="menue" cellspacing="0" cellpadding="0" width="180px" height="120px">

<form name="interval" action="">

form ist an dieser Stelle nicht erlaubt. Mach die form um das table.

<tr bgcolor="#99CCCC">
        <td>Alter</td>
<td></td>
      </tr>
      <tr>
   <td>0-10</td>
      <td><input type=radio name=iv value="zehn" checked> </td>

das funktioniert natuerlich nicht, wie ich so will. Nu hab ich die Befuerchtung, es lingt an den 2 Klassen (einmal im DIV und einmal in der Tabelle

Ne. Das hat ne andere Ursache. S.o.

Ach so: IE 6

Zum Testen solltest Du mindestens noch einen einigermaßen CSS-fähigen Browser benutzen, Mozilla oder Opera...

cu,
Andreas