Zeilenumbruch und Firefox

[Ben Weichert]

Hallo,
dass Firefox ja einiges anders macht als andere Browser habe ich ja schon gelernt, aber was man dagegen macht, ist ja jedesmal ein Thema für sich.

Ich habe seinerzeit in einem Menü die Links mit folgendem stylesheet belegt:
a.Menu1:link    {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFCC00; overflow:auto; font-weight: bold; text-decoration: none}

wobei meines Wissens overflow:auto; bei IE und Opera auch an Bindestrichen einen Zeilenumbruch erzeugt. Firefox jedoch bricht nichts um macht stattdessen das Seitendesign kaputt.

Die Seite um die es geht ist http://www.fahrschule-werner-lenz.de

Wär cool, wenn sich die jemand mal in IE und Firefox anschauen und mir sagen könnte, wie ich es anstelle, dass auch Firefox ordentlich den Text umbricht.

Schönen Dank,
Ben

[Martin Hölter]

Hallo Ben!

Setze hinter den Bindestrich

<span class="moz-break"></span>

und formatier das mit

body:-moz-last-node .moz-break::before {  
    content:            "\200B"; /* Leerzeichen */  
    letter-spacing:     -1ex;  
}

Gefunden irgendwann bei Suche nach Zeilenumbruch Bindestrich Mozilla.

Gruß

Martin

[Ben Weichert]

Hy Martin,

und danke. Das sieht gut aus, werde es nachher gleich probieren !!!

[Gunnar Bittersmann]

Martin,

<span class="moz-break"></span>

body:-moz-last-node .moz-break::before {

content:            "\200B"; /* Leerzeichen */
    letter-spacing:     -1ex;
}

  
Ziemliche Flickschusterei für U+200B zero width space bzw. U+200C zero width non-joiner.  
  
Wobei manche Browser U+200B bzw. U+200C vielleicht als Blog o.ä. darstellen.  
Gunnar

-- 
I never intended HTML source code (the stuff with the angle brackets) to be seen by users. […] To my surprise, people quickly became familiar with the tags and started writing their own HTML documents directly. (Tim Berners-Lee in Weaving the Web)

[Struppi]

dass Firefox ja einiges anders macht als andere Browser habe ich ja schon gelernt, aber was man dagegen macht, ist ja jedesmal ein Thema für sich.

Du meinst das der IE einges anderes macht als alle anderen Browser?

Ich habe seinerzeit in einem Menü die Links mit folgendem stylesheet belegt:
a.Menu1:link    {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFCC00; overflow:auto; font-weight: bold; text-decoration: none}

'pt' ist keine Einheit die für den Monitor sinnvoll ist, da es keine 'pt's auf dem Monitor gibt, dort heißt die Einheit 'px'
8pt ist auf manchen Mac Systemen nicht mehr lesbar.

wobei meines Wissens overflow:auto; bei IE und Opera auch an Bindestrichen einen Zeilenumbruch erzeugt. Firefox jedoch bricht nichts um macht stattdessen das Seitendesign kaputt.

Warum eigentlich overflow:auto?
Da a ein inline Element ist dürfte da auch nichts "overflowen", wenn betrifft es das übergeordnete Element.

Struppi.

[Ben Weichert]

Du meinst das der IE einges anderes macht als alle anderen Browser?

Wie immer Du willst, in diesem Fall war es nun eher andersherum, ist halt relativ.

'pt' ist keine Einheit die für den Monitor sinnvoll ist, da es keine 'pt's auf dem Monitor gibt, dort heißt die Einheit 'px'
8pt ist auf manchen Mac Systemen nicht mehr lesbar.

Danke für den Tipp, ich glaube das ist irgendwie ne Standardeinstellung von meinem alten Dreamweaver.  Ich werd in Zukunft drauf achten.

Warum eigentlich overflow:auto?
Da a ein inline Element ist dürfte da auch nichts "overflowen", wenn betrifft es das übergeordnete Element.

Tja, die Seite hab ich vor nem Jahr oder so gemacht und so lange irgendwas probiert bis es ging. Mag sein, dass das overflow jetzt gar nichts mit der besprochenen Problematik zu tun hat.

[Ingo Turski]

Hi,

wobei meines Wissens overflow:auto; bei IE und Opera auch an Bindestrichen einen Zeilenumbruch erzeugt. Firefox jedoch bricht nichts um macht stattdessen das Seitendesign kaputt.

Du solltest Dich informieren, was overflow bewirkt; einen Zeilenumbruch jedenfalls nicht, wohl aber i.V. mit einer zulässigen Breitenangabe ggfls. einen unschönen Scrollbalken.
Und da der Bindestrich kein Whitespace ist: warum sollte ein korrekt arbeitender Browser hier umbrechen? Wenn Du dies wünscht, solltest Du schon einfach ein Leerzeichen setzen; ggfls. in ein SPAN mit entsprechend kleiner font-size.

freundliche Grüße
Ingo

[Ben Weichert]

Du solltest Dich informieren, was overflow bewirkt; einen Zeilenumbruch jedenfalls nicht, wohl aber i.V. mit einer zulässigen Breitenangabe ggfls. einen unschönen Scrollbalken.

Okay, ich gebs zu, hat nichts damit zu tun und ist an der Stelle wahrscheinlich auch überflüssig, womöglich gar kontraproduktiv.

Und da der Bindestrich kein Whitespace ist: warum sollte ein korrekt arbeitender Browser hier umbrechen? Wenn Du dies wünscht, solltest Du schon einfach ein Leerzeichen setzen; ggfls. in ein SPAN mit entsprechend kleiner font-size.

Ist ja schön und gut, aber da das ein CMS ist, kann ich dem User nicht sagen, dass er sich vorher überlegen soll, wo im Menü ein Zeilenumbruch sein soll ... das überfordert ihn nämlich. Programmieren kann ich das auch nicht sinnvoll, deshalb suchte ich ja den Vergleich zu den anderen Browsern, die es in diesem Fall für mich "richtig" anzeigen.

Die Antwort von Martin scheint da schon ein sehr guter Ansatz zu sein.

[Ingo Turski]

Hi,

Ist ja schön und gut, aber da das ein CMS ist, kann ich dem User nicht sagen, dass er sich vorher überlegen soll, wo im Menü ein Zeilenumbruch sein soll ... das überfordert ihn nämlich.

das glaube ich kaum. Außerdem ist es ohnehin erforderlich, daß das längste Wort (mit oder ohne Bindestrich) die fest angegebene Breite nicht übersteigt - zur Berücksichtigung von Schriftvergrößerung ist sogar noch einiges an Leerraum einzukalkulieren. Bei dieser Konstruktion ist ein gewisses Mitdenken unerläßlich.

Die Antwort von Martin scheint da schon ein sehr guter Ansatz zu sein.

Für den Mozilla und für Bindestriche. Aber es gibt noch andere Browser als Mozilla, IE und Opera und u.U. auch längere Worte ohne Bindestrich...

freundliche Grüße
Ingo