Hallo liebe Leute,

habe ein kleines CSS-Problem, was so einzig im Mozilla Firefox in Version 2 auftritt. Es geht um folgenden Entwurf einer Seite: http://v2.buergerstadt-bornheim.de/

Genauer: Um den Twitter-Abschnitt in der Sidebar rechts. Wie gesagt, in allen von mir getesteten Browser sieht es aus wie es soll (die Tweets fließen rechts um das Twitter-Bild) - nur im Firefox 2 nicht. Dort sieht das so aus: http://img154.imageshack.us/i/screengl.jpg/

Ich habe eben schon etwas mit Firebug rumgespielt und habe es immerhin geschafft, den Text links um das Bild fließen zu lassen. Das hätte ich zur Not auch dabei belassen, allerdings funktionierte diese Lösung nicht im IE 6-8.

Nachfolgend mal der relevante Teil vom Quelltext:

-- HTML START ---

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<div class="sidebar-box-wrap"> <div class="sidebar-box">   <span class="sidebar-box-title">Twitter</span>   <div class="twitter-image">    <img src="url/zu/twitter.png" alt="Twitter" />   </div>   <ol class="tweetable_latest_tweets">    <li class="tweetable_item">     <span class="twitter_status">      <span class="status-text">Hier der Tweet</span>      <span class="twitter_meta">Tweet-Datum</span>     </span>    </li>    <li class="tweetable_item">     <span class="twitter_status">      <span class="status-text">Hier der Tweet</span>      <span class="twitter_meta">Tweet-Datum</span>     </span>    </li>   </ol>   <span class="tweetable_follow">Follow us</span> </div> </div>

--- HTML ENDE ---

--- CSS START ---

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90

.sidebar-box div { float: left; }   .sidebar-box-wrap { background-color:#ddd5ba; border-bottom:1px solid #c7bea2; border-right:1px solid #c7bea2; border-top:1px solid #c7bea2; float:left; margin-bottom:15px; padding:6px 6px 6px 0; width:273px; }   .sidebar-box { background-image:url(../images/sidebar-bg.jpg); border-bottom:1px solid #c7bea2; border-right:1px solid #c7bea2; border-top:1px solid #c7bea2; float:left; padding:0 15px 8px; width:242px; }   .sidebar-box ul li { clear:both; margin:5px 3px 3px 5px; }   .sidebar-box ul { clear:both; list-style-image:url(../images/bullet.gif); margin-left:0; margin-top:0; padding-left:10px; padding-top:0; }   .sidebar-box-title { background-image:url(../images/sidebar-h2-bg.jpg); clear:both; color:#fff; float:left; font-family:Georgia; font-size:18px; height:50px; margin:0 0 2px -15px; padding:9px 0 0 20px; position:relative; width:277px; }   .twitter-image { margin-right:2px; padding:4px; }   .tweetable_follow { display:block; font-weight:700; margin:6px 6px 0 0; }   .tweetable_latest_tweets { margin:0 2px 0 0; padding:0; }   .tweetable_latest_tweets li { border-bottom:1px dashed #9a9898; list-style:none; margin:0; padding:6px 0; width:100%; }   .twitter_status { display:block; margin:0; padding:0; width:100%; }   .twitter_meta { color:#9a9898; display:block; font-size:.8em; font-style:italic; }

--- CSS ENDE ---

Kann mir hier irgendwer weiterhelfen? Wahrscheinlich habe ich irgendwas mit dem float verwurschtelt. Würde mich sehr freuen.

Danke im Voraus,
Olli

P.S.: IE6 und IE7 interpretieren die CSS-Angaben übrigens noch einmal anders: Dort wird das erste <li>-Element nicht rechts neben der Sidebar, sondern unter dem Twitter-Bild dargestellt: http://img2.imageshack.us/i/twitterg.jpg/

Hi,

versuch es mal hiermit:

Code :

1 2 3 4 5

.tweetable_latest_tweets { margin:0 2px 0 0; padding:0; [B]float:right;[/B] }

mfg Maik

Danke für deine Antwort. Habe "float:right;" mal schnell bei Firebug reingehauen und es bringt auch eine Änderung - nur leider nicht zum Positiven. Siehe: http://img36.imageshack.us/i/twitterez.jpg/

Hast du vielleicht noch eine andere Idee?

Jo, mit float:left rückt der Text bei mir noch näher an das Bild heran.

mfg Maik

Ja, bei mir auch. Allerdings will ich ja, dass der Text nicht erst unter dem Bild anfängt, sondern drum herum floatet ...

Hier beginnt im FF2 der Text nicht unter dem Bild, sondern auf einer Höhe mit .sidebar-box-title:



Ergo würde ich mal diesem Element die float:left-Deklaration entziehen, und stattdessen display:block angeben, damit das Inline-Element <span> weiterhin "Block-Level-Charakteristika" besitzt.

mfg Maik

Ah, super, endlich ein Schritt in die richtige Richtung

Habe jetzt "float:left" nach deiner Anweisung in "display:block" geändert, das Ergebnis: http://img441.imageshack.us/i/twitterc.jpg/

Wenn ich jetzt noch die Breite des <li>-Elemts (100%) wegnehme bzw. verkleinere, wird der Text zwar so angezeigt wie er soll, fängt aber nach Ende des Bildes nicht wieder vorne an, siehe: http://img6.imageshack.us/i/twitterc.jpg/

Hast du dafür auch noch 'ne Lösung? Wie auch immer: Danke schon mal bis hierhin!

Kannst du das Zwischenergebnis mal online aktualisieren?

mfg Maik

Hab's mal online geändert. Die width-Angabe der <li>-Elemente habe ich jetzt mal auf 80% gestellt, weil ich noch nicht genau weiß, ob ich das so lassen kann bzw. ob das so ganz ohne Angabe funktioniert.

Wie es scheint, erwartert FF2 hier eine display:inline-Deklaration:

Code :

1 2 3 4 5 6 7 8

.tweetable_latest_tweets li { border-bottom:1px dashed #9a9898; list-style:none; margin:0; padding:6px 0; /*width:100%;*/ [B]display:inline;[/B] }

Das hat aber zur Folge, dass nun der untere Rahmen nicht mehr dargestellt wird.

mfg Maik

So eine Kacke. Könnte ich dem Firefox in Version wenigstens ein eigenes Stylesheet verpassen, würde ich den Text einfach unter dem Bild anfangen lassen - im IE bis Version 7 sieht's ja ebenso aus.

Desweiteren müsste hier width:100% entfernt werden:

Code css:

1 2 3 4 5 6

.twitter_status { display:block; margin:0; padding:0; /*width:100%;*/ }

... dann ändert sich neben dem FF2 auch die Darstellung im IE.

mfg Maik

Na immerhin

Ich denke, mit diesem kleinen Darstellungsfehler muss ich jetzt leben. Es allen Browserbenutzer recht zu machen gleicht ja eh einer Sisyphosarbeit. Ich bin sowieso froh, dass sonst alles in den gängigen Browsern einigermaßen einheitlich aussieht.

Vielen Dank also!