✔ Float-Fehler (nur) im Firefox 2

D

der-olli

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: 
<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: 
.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: 
.tweetable_latest_tweets {
margin:0 2px 0 0;
padding:0;
float:right;
}

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:

ff2.jpg

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!
 
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: 
.tweetable_latest_tweets li {
border-bottom:1px dashed #9a9898;
list-style:none;
margin:0;
padding:6px 0;
/*width:100%;*/
display:inline;
}
Das hat aber zur Folge, dass nun der untere Rahmen nicht mehr dargestellt wird.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück