Verständnisproblem DIV Höhe

[Flownie]

Hallo

Habe gerade ein kurzes Verständnisproblem:

Webseite, XHTML Strict
DIV mit UL, Inhalt Bilder:
  <div id="div_nav">
    <ul id="ul_nav">
      <li class="li_1"><img src="images/mainnav_shop.gif" alt="" width="27" height="12" /></li>
      <li><img src="images/mainnav_qa.gif" alt="" width="26" height="12" /></li>
      <li><img src="images/mainnav_blog.gif" alt="" width="24" height="12" /></li>
      <li><img src="images/mainnav_partner.gif" alt="" width="37" height="12" /></li>
      <li><img src="images/mainnav_contact.gif" alt="" width="40" height="12" /></li>
    </ul>
  </div>

Problem:
Ich kann das DIV nicht pixelgenau platzieren, weil oberhalb und unterhalb der Bilder noch freier Platz bleibt. Das DIV hat nicht die Höhe von 12px, wie die Bilder, sondern ist höher. Angabe von font-size: 0px; löst das Problem, das DIV ist dann genau so gross wie der Inhalt.

Frage:
Weshalb ist das so (dass das DIV anscheinend die Grösse einer Textzeile annimmt)? Und ist der Lösungsansatz mit font-size: 0px; der richtige, oder gibt es einen eleganteren Weg?

Danke
Marc

[Beat]

Weshalb ist das so (dass das DIV anscheinend die Grösse einer Textzeile annimmt)? Und ist der Lösungsansatz mit font-size: 0px; der richtige, oder gibt es einen eleganteren Weg?

Wie soll man, ohne dein CSS zu kennen, antworten?
font-size löst das Problem nicht, weil du die minimale Fontgrösse in den Browser CSS nicht unterschreiten kannst.
zu font-size gehört dann auch line-height.
Zudem gilt es vertical-align für img zu beachten.

Für img-Buttons sollten alt-Attributte auf keinen Fall leer sein.

mfg Beat

[Flownie]

Wie soll man, ohne dein CSS zu kennen, antworten?

Weil das DIV auch ohne CSS so aussieht. Ich habe keine speziellen Styles dem DIV zugewiesen.

font-size löst das Problem nicht, weil du die minimale Fontgrösse in den Browser CSS nicht unterschreiten kannst.

Es hat das Problem bei mir gelöst, es sieht nun in allen Browsern korrekt aus.

zu font-size gehört dann auch line-height.

Werde auch line-height definieren.

Zudem gilt es vertical-align für img zu beachten.

OK.

Für img-Buttons sollten alt-Attributte auf keinen Fall leer sein.

Sind sie auch nicht, ich habe diese Angaben der Übersichtlichkeit halber für das Posting entfernt

[Gunnar Bittersmann]

@@Flownie:

nuqneH

zu font-size gehört dann auch line-height.
Werde auch line-height definieren.

Und 'font-size' wieder auf einen sinvollen (d.h. deutlich von 0 verschiedenen) Wert setzen ...

Für img-Buttons sollten alt-Attributte auf keinen Fall leer sein.
Sind sie auch nicht […]

... sonst sind die Alternativtexte nicht zu lesen.

Qapla'

[Klawischnigg]

Hi there,

font-size löst das Problem nicht, weil du die minimale Fontgrösse in den Browser CSS nicht unterschreiten kannst.

doch doch, beim IE wirkt font-size:0 manchmal Wunder, der IE kann die Höhe der verwendeten Fonts (ich denke, es geht um Elemente wie div oder span) nicht unterschreiten.

Schreib einmal

<div style="border:1px solid #f00;width:100px;height:1px;"></div>

und

<div style="border:1px solid #f00;width:100px;height:1px;font-size:0"></div>

und probier's im IE aus... ;)

Für img-Buttons sollten alt-Attributte auf keinen Fall leer sein.

genau, sonst bricht das web ja unter Barrieren zusammen...

[ChrisB]

Hi,

doch doch, beim IE wirkt font-size:0 manchmal Wunder

Aber i.a.R. keine, die overflow:hidden in einem solchen Falle nicht auch bewirken könnte - ohne bspw. das von Gunnar angesprochene Problem.

MfG ChrisB

[Cheatah]

Hi,

Habe gerade ein kurzes Verständnisproblem:

ja, es beginnt damit zu erkennen, was Du nicht verstehst.

Ich kann das DIV nicht pixelgenau platzieren, weil oberhalb und unterhalb der Bilder noch freier Platz bleibt. Das DIV hat nicht die Höhe von 12px, wie die Bilder, sondern ist höher. Angabe von font-size: 0px; löst das Problem, das DIV ist dann genau so gross wie der Inhalt.

<img> ist ein (Replaced) Inline Element. Es hat somit den Charakter von Text. Text endet nicht am obersten bzw. untersten Pixel der Schriftfarbe, sondern hat darüber und darunter noch Platz. Stichworte sind beispielsweise Unterlängen und Zeilenhöhe.

Und ist der Lösungsansatz mit font-size: 0px; der richtige, oder gibt es einen eleganteren Weg?

Deine Struktur ist suboptimal. Offenkundig willst Du eine Navigation bauen - ich halte es für unwahrscheinlich, dass die anzunavigierenden Seiten durch eine Grafik hinreichend bezeichnet sind. Du möchtest den Navigationspunkten einen bezeichnenden Text geben, beispielsweise "Startseite", "Shop" und "Impressum", und für Verzierungen - auch in Form von Grafiken! - nur und ausschließlich per CSS vermitteln. <img>-Elemente kommen in dem Code nicht vor.

Cheatah

[Flownie]

<img> ist ein (Replaced) Inline Element. Es hat somit den Charakter von Text. Text endet nicht am obersten bzw. untersten Pixel der Schriftfarbe, sondern hat darüber und darunter noch Platz. Stichworte sind beispielsweise Unterlängen und Zeilenhöhe.

Danke für diese Info. Die Deklaration display: block; bei img löst das Problem. Das DIV hat nun genau die Grösse des Bildes...

[Cheatah]

Hi,

Die Deklaration display: block; bei img löst das Problem.

nein, das Problem ungünstigen HTML-Codes bleibt dadurch unverändert.

Cheatah