Abonnieren
Ich kämpfe gerade mit einem CSS-Problem, das offenbar nicht lösbar ist. Ich platziere ein Bild im Textfluss und lasse es mittels float: left vom Text umfließen – soweit kein Problem. Aber wenn im umfließenden Text eine einfache Liste (<ul>) enthalten ist, erhalte ich in Safari (Vs. 2) und IE (alle Versionen bis 6) ein sehr unschönes Aussehen: die Bullets der Listeneinträge verschwinden unter dem Bild oder liegen darüber.
So sieht es in Safari aus:
Und so soll es aussehen (und tut es auch in Firefox):
Im IE ist es noch etwas schlimmer, da hier die Ausrichtung auch unterhalb des Floats nicht mehr stimmt.
Für den IE ist das Problem in einem Artikel mit dem Titel »Liste neben Floats« bei den e-workers gut beschrieben, der dort erwähnte Workaround ist allerdings mehr als zweifelhaft; das Ergebnis ist jedenfalls nicht akzeptabel. Für Safari konnte ich überhaupt keinen Lösungsansatz finden. Falls jemand doch einen hat, wäre ich sehr dankbar!
Besonders ärgerlich wird dieser Bug in unserem Content-Management-System (Typo3): die Redakteure verwenden meist Firefox (ist einfach am besten dazu geeignet) und sehen deshalb das Problem nicht. Ich kann derartige Konstruktionen auch nicht automatisch verhindern, ohne die Benutzbarkeit des ganzen Systems erheblich einzuschränken. Das defekte Aussehen geht also unter Umständen online ... Von mir als Entwickler wird natürlich erwartet, dass die Inhaltselemente so formatiert werden, dass sie automatisch in allen Browsern korrekt erscheine. Das erweist sich in diesem Fall einfach als unmöglich. Oder genauer gesagt: Mit CSS scheint es unmöglich zu sein, mit verschachtelten Tabellen ginge es natürlich. Aber wer will dahin zurück?
Von Peter am 31.07 um 14:58 Uhr. Kategorie: HTML-CSS
Hallo,
also bei mir funktioniert der e-worker Workaround im IE tadellos,
siehe: http://www.bvma.de/deutsch/mitgliedschaft.php?navid=3
Zuerst hat es den Text des ersten Listenpunkts noch stark nach rechts eingerückt, aber nachdem ich “margin-left” und “padding-left” des ul-Elements auf “0px” gesetzt habe, passt alles wunderbar.
Gruß, Simon
Man kann das Problem so lösen:
ul{
list-style-position: inside;
}
Mit “list-style-position: outside” habe ich leider auch noch keine wirklich brauchbare Möglichkeit gefunden.
Gruß Torsten
Hallo Simon, Torsten,
Ich habe beide Vorschläge ausprobiert, leider kein Erfolg, weder in Safari noch im IE. Ich vermute, dass ein anderer Stil im Weg ist oder damit interagiert. Am Beispiel von Simon sehe ich ja, dass es gehen müsste. Der Inhalt der Seite wird aber über ein CMS erstellt (Typo3) und das CSS, mit dessen Hilfe die vielen verschiedenen Content-Elemente automatisch formatiert werden, ist sehr komplex. Wenn ich da an einer Stelle schraube, muss ich alle Contentelemente testen ...
Da ich für ein anderes Projekt diesen Code eh umschreiben muss, verschiebe ich es mal bis dahin. Im Moment lebt der Kunde damit ...
Danke für eure Tipps!
Trackback-URL: http://www.lisardo.de/trackback/479/gScmvktA/