Zeilenumbruch bei Links im Firefox

[Schatzl]

Hallo Leute,

Folgendes Problem..
Meine Menüpunkte werden aus einer Daten ausgelesen und in einer Liste (<li>) dargestellt.

Durch die festgelegte Breite des Menüs kann es vorkommen das die Menübezeichnung automatisch durch einen Zeilenumbruch abgeteilt wird.

Firefox erkennt den Zeilenumbruch nicht wirklich. Der Link wird zwar korrekt angezeigt, jedoch wird der Abstand zum nächsten Menüpunkt nicht eingehalten. Der IE stellt es (für mich) richtig dar.
Zum besseren Verständnis hab ich es auf einem Bild auf folgenden Link dargsetellt. (Leider ist keine Seite online um das zu zeigen)
Dem <a> Tag habe ich dabei eine Hintergrundfarbe gegeben um das Problem noch besser zu verdeutlichen.

Warscheinlich is es ein simples Problem, aber irgendwie find ich keine Lösung.

Vielen danke für eure Hilfe..

markus

[afra]

Hallo Markus!

Da Du uns den kompletten Quellcode vorenthälst, kann ich nur raten. Und zwar dies: Es sieht für mich aus, als ob die <li> nicht mehr im Fluss stehen. Irgendwie solltest Du mit clear: right oder ähnlichem arbeiten. Das ganze kann ich aber nur raten.

Schönen Gruß

Afra

[Markus]

OK. Hab mir gedacht bevor ich gleich mit Quellcode auffahr, lieber mal fragen, vielleicht ists ja wirklich ein siples Problem.

Aber nun mein Code:

HTML:
<ul id='submenu'>
  <li><a href='#' target='_self' class='submenu'>Dieser Eintrag ist zu lang, es erfolgt ein Umbruch</a></li>
  <li><a href='#' target='_self' class='submenu'>Einzeilig</a></li>
  <li><a href='#' target='_self' class='submenu'>Einzeilig</a></li>
  <li><a href='#' target='_self' class='submenu'>Dieser Eintrag ist zu lang, es erfolgt ein Umbruch</a></li>
</ul>

CSS:
#submenu {list-style-type:none; margin:5px 0 0 0; padding:0; text-align:right;}
ul#submenu li {padding:3px 0 0 0;}
a.submenu {text-align:right; background:#ff0000}

Also eigentlich ganz einfach. Die Menüpunkte werden einfach untereinander dargestellt.

[afra]

Hallo Markus!

Aber nun mein Code:

HTML:
<ul id='submenu'>
  <li><a href='#' target='_self' class='submenu'>Dieser Eintrag ist zu lang, es erfolgt ein Umbruch</a></li>
  <li><a href='#' target='_self' class='submenu'>Einzeilig</a></li>
  <li><a href='#' target='_self' class='submenu'>Einzeilig</a></li>
  <li><a href='#' target='_self' class='submenu'>Dieser Eintrag ist zu lang, es erfolgt ein Umbruch</a></li>
</ul>

CSS:
#submenu {list-style-type:none; margin:5px 0 0 0; padding:0; text-align:right;}
ul#submenu li {padding:3px 0 0 0;}
a.submenu {text-align:right; background:#ff0000}

Das ist nicht der Code der das produziert was auf Deinem Bild zu sehen war.

Schönen Gruß

Afra

[Ingo Turski]

Hi,

unterschlägst Du uns hier nicht eine Höhenangabe - die vom IE bekanntlich "bei Bedarf" ignoriert wird?

freundliche Grüße
Ingo

[Markus]

Hi,

unterschlägst Du uns hier nicht eine Höhenangabe - die vom IE bekanntlich "bei Bedarf" ignoriert wird?

freundliche Grüße
Ingo

OK stimmt, mit einer Höhenangabe würde sich ein gutes ERgebnis erzeilen lassn.
Ich muss nur herausfinden wann der Menüeintrag zweileilig wird und wann er einzeilig bleibt und dann die Höhe dementsprechend anpassen.
Sonst ist überall ein zu großer Zeilenabstand.
Also notfalls mach ich es so, danke. (Also doch simpel *g*)

Aber nur um weiter darüber zu grübeln, der Firefox verhält sich prinzipiell aber immer noch genauso wie auf dem Bild dargestellt.
Der Zeilenumbruch wird nicht mit der Hintergrundfarbe dargestellt -(Nur immer die erste Zeile des Menüpunktes.)

Danke dir markus

[afra]

Hallo markus!

Aber nur um weiter darüber zu grübeln, der Firefox verhält sich prinzipiell aber immer noch genauso wie auf dem Bild dargestellt.
Der Zeilenumbruch wird nicht mit der Hintergrundfarbe dargestellt -(Nur immer die erste Zeile des Menüpunktes.)

Nein, Du gibst eine Höhe an und daher stellt der Firefox diese Höhe dar, auch wenn die Anzeige zweizeilig wird. Nimm min-height und der Firefox stellt eine Mindesthöhe dar. Setze Dich mit den Grundlagen von CSS Darstellungen auseinander. Ärgere Dich über die leider unzureichende CSS Implementierung im Internet-Explorer.

Schönen Gruß

Afra

[Markus]

Nein, Du gibst eine Höhe an und daher stellt der Firefox diese Höhe dar, auch wenn die Anzeige zweizeilig wird. Nimm min-height und der Firefox stellt eine Mindesthöhe dar. Setze Dich mit den Grundlagen von CSS Darstellungen auseinander. Ärgere Dich über die leider unzureichende CSS Implementierung im Internet-Explorer.

Hallo Afra,

Ja danke, war ein eigentlich dummer Fehler.
Habe die Höhe in einem allgemeinen <a> definiert und beim Fehlersuchen gar nicht mehr registriert.
Der Wochenbeginn ist damit gerettet *g*

mg markus

[MudGuard]

Hi,

Habe die Höhe in einem allgemeinen <a> definiert und beim Fehlersuchen gar nicht mehr registriert.
Der Wochenbeginn ist damit gerettet *g*

Nutze den DOM-Inspektor des Firefox. Da kannst Du genau sehen, welche Rulesets auf das jeweilige Element angewendet werden.

cu,
Andreas

[Ingo Turski]

Hi,

unterschlägst Du uns hier nicht eine Höhenangabe - die vom IE bekanntlich "bei Bedarf" ignoriert wird?

OK stimmt, mit einer Höhenangabe würde sich ein gutes ERgebnis erzeilen lassn.

da hast Du mich falsch verstanden. _Ohne_ Höhenangabe sollte das Problem eigentlich nicht auftreten.

freundliche Grüße
Ingo

[markus]

da hast Du mich falsch verstanden. _Ohne_ Höhenangabe sollte das Problem eigentlich nicht auftreten.

Hi Ingo,

ja du hast recht.
Hab die entsprechende Höhenangabe gefunden.

• sonst hätt ich jetzt ja ne vorher definierte Höhenangabe einfach neu definiert -

Also hab die height rausgelöscht und alles klappt.
So ein blöder Fehler kann so lang aufhalten *g*

danke dir
mg markus

[Ashura]

Hallo Markus.

<ul id='submenu'>
  <li><a href='#' target='_self' class='submenu'>Dieser Eintrag ist zu lang, es erfolgt ein Umbruch</a></li>
</ul>

Wozu hier die Klasse „submenu“? Du kannst die Links wunderbar über die bereits bestehende ID „submenu“ selektieren.
Stichwort „http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Nachfahrenselektor“.

Einen schönen Freitag noch.

Gruß, Ashura