div: feste höhe und padding

[white57]

hi @all,

ich hab ein kleines problem mit css: [url]http://nixoft.cybton.com[/url]

und zwar ist da ein div mit folgendem css-style:

div.box #header {
  padding:3px 3px 0 15px; margin:0
  background:#ffffff url(images/navigation-top.gif) no-repeat top;
  border:0;
  height:27px;
  font-size:11pt;
  font-weight:bold; color:#ffffff;
  vertical-align:middle;
}

ich will eigentlich, dass der text in dem div vertikal zentriert wird, allerdings funktioniert das mit vertical-align:middle nicht. also habe ich versucht, dem div ein padding-top von 3 px zu machen, was aber im IE richtig angezeigt wird (ist wohl ein bug vom IE, das richtig anzuzeigen :), aber im fifo wird das div 3 px höher (siehe link).

ich bin mit meinem latein zu ende, kann mir einer sagen woran das liegt? ich denke, die feste höhe ist das problem, aber ohne die geht es leider nicht. wie kann man das lösen??

Gruß,
Niklas

[Joachim]

Hi,

Padding und Borders werden (korrekt) zu einer Groessenangabe _hinzugezaehlt_, sofern der Browser im Standard-Modus laeuft. Setze also ein korrektes Doctype, dann schaltet IE6 den Quirks-Modus ab und verhaelt IE6 sich ebenso. Fuer IE5 kannst Du ggf. Conditional Comments mit Korrekturangaben anlegen.

vertical align bezieht sich auf die Zeilenhoehe, nicht auf das umgebene Element. Vertical zentrieren geht nur mit Hacks und gehoert leider zu den echten Schwachstellen des Css-Designs.

Gruesse, Joachim

[wahsaga]

hi,

ich will eigentlich, dass der text in dem div vertikal zentriert wird, allerdings funktioniert das mit vertical-align:middle nicht.

Nein, natürlich nicht - weil vertical-align nur für inline-level und table-cell Elemente Wirkung zeigen _darf_.

Wenn es sich aber nur im einen einzeiligen Text handelt, so wie in deinem Beispiel, dann kannst du line-height benutzen, um eine "Zentrierung" zu erreichen. Welcher Wert passt (sinnvollerweise am besten in em anzugeben), musst du ausprobieren.

gruß,
wahsaga