display:block und float: << FireFox fürn ******?



  • Hi,

    also ich weiß echt nicht was so viele Leute an FireFox lieben?

    Zu meinem Problem: Ich wollte jetzt endlich mal diverse andere Teile von Tabellen auf CSS umsetzen um denen sogut wie ganz zu entsagen. Jetzt hab ich auf css4you den Modus "Display" gefunden.

    Wunderschön 🙂

    In jedem Browser läuft es anständig - bis auf FireFox.

    Aber erstmal mein Code

    <div style="width:100%; border: 1px solid #000000; display:block; background-color: #00EA00;">
     <div style="background-color: #0000EA; width:100px; float:left;">asdf</div>
     <div style="background-color: #EAEAEA; width:200px; float:right;">asdf</div>
    </div>
    

    Beim IE, Opera, Netscape usw wird ein Rahmen um die beiden Gespannt so wie es sein sollte - bei FireFox allerdings wird der Rahmen nicht erkannt und nach oben gestopft! Ergo: eine 2pixel hoher schwarzer Balken.

    Jetzt hab ich es mit inline-block in den beiden Entities probiert selbes Ergebnis: FireFox unterstützt dies nichteinmal in der neusten Version.

    Mir ist jedoch aufgefallen das das nur passiert wenn float mit von der Party ist.

    Gibt es da irgendwie abhilfen? Weil das ist echt blöde das FireFox ausgerechnet das nicht kann, obwohl der ja so "gepriesen" wird.



  • Das ist sowieso scheiße mit deinen Floats...Div`s mag ich allgemein nicht..

    Versuch einfach eine Tabelle zu erstellen mit 2 oder 3 Spalten (je nach dem) und dann hast du auch Linke Seite und Rechte Seite... du kannst damit sogar mehr machen und vor allem einfacher.

    mfg killer



  • Na ja, ich möchte eigentlich keine Tabellendesigns mehr machen 😞

    Ergo: geht das hier nicht anders? Was sagen die anderen?



  • Mach noch ne height-Angabe für das Eltern-div dazu...

    Dann gehts 🙂



  • -predator- schrieb:

    Mach noch ne height-Angabe für das Eltern-div dazu...

    Dann gehts 🙂

    Es geht darum das man eben nicht die höhe weiß. Ich möchte nämlich sehr ungerne später mit Javascript die Fensterbreite/Höhe raussuchen, dann mit der Schriftgröße die mehr oder weniger langen Text zusammenrechnen um eine Höhe zu bekommen.



  • Patrick@Raststädte schrieb:

    Es geht darum das man eben nicht die höhe weiß. Ich möchte nämlich sehr ungerne später mit Javascript die Fensterbreite/Höhe raussuchen, dann mit der Schriftgröße die mehr oder weniger langen Text zusammenrechnen um eine Höhe zu bekommen.

    Ach so...

    Wo willst du denn den Text hinschreiben?

    In das linke, rechte oder kommt er in die Mitte?



  • Patrick@Raststädte schrieb:

    -predator- schrieb:

    Mach noch ne height-Angabe für das Eltern-div dazu...

    Dann gehts 🙂

    Es geht darum das man eben nicht die höhe weiß. Ich möchte nämlich sehr ungerne später mit Javascript die Fensterbreite/Höhe raussuchen, dann mit der Schriftgröße die mehr oder weniger langen Text zusammenrechnen um eine Höhe zu bekommen.

    Versteh ich nicht, was meinst du?!
    Du kannst das doch mit Prozentangaben machen in der width/height... 😮



  • -predator- schrieb:

    Patrick@Raststädte schrieb:

    Es geht darum das man eben nicht die höhe weiß. Ich möchte nämlich sehr ungerne später mit Javascript die Fensterbreite/Höhe raussuchen, dann mit der Schriftgröße die mehr oder weniger langen Text zusammenrechnen um eine Höhe zu bekommen.

    Ach so...

    Wo willst du denn den Text hinschreiben?

    In das linke, rechte oder kommt er in die Mitte?

    -predator-
    Alle 3. Links, Rechts und in der Mitte sind unterschiedliche Texthöhen drin.

    Killersnoop
    Komm mir doch bitte nicht mit sowas.



  • So, ich hab jetzt ein bisschen rumgesucht / -probiert und habe die Lösung gefunden:

    <div style="width:100%; border: 1px solid #000000; display:block; background-color: #00EA00;">
     <div style="background-color: #0000EA; width:100px; float:left;">asdf</div>
     <div style="background-color: #EAEAEA; width:200px; float:right;">asdf</div>
     <div style="clear:both;"></div> <!-- Das hier musst du einfügen -->
    </div>
    

    Die zusätzliche Zeile bewirkt, dass die float-Formatierung aufgehoben wird, und möglicher weiterer Text die gesamte Breite einnimmt.
    Dadurch wird dann auch die Eltern-div-Box richtig aufgespannt.

    Man kann sich jetzt natürlich darüber streiten, warum der Firefox das so macht und ob das sinnvoller als bei den anderen Browsern ist, aber das mache ich nicht 😃



  • -predator-
    Danke! Ist zwar schade das FireFox da nur scheiße ausgibt, aber damit muss ich leider Leben 🙂


Anmelden zum Antworten