Floats gehen im Firefox/Opera, nicht in Safari/Chrome/IE

  • Hallo, mal wieder eine Anfängerfrage:
    ich habe eine Headerzeile mit Logo und Navi. Je nach Fenstergröße soll die Navi entweder drunter sein oder aber hoch rechts neben das Logo rutschen.

    Selbes Prinzip/Problem gilt auch im Inhalt mit dem Hauptcontent und der Seitenspalte.
    Die Rutscherei funktionert in Firefox/Opera einwandfrei, in Safari/Chrome/IE rutscht die Navi aber nicht hoch.

    Hier der Code der beim Firefox fürs Hochschieben verantwortlich ist:

    #title{
    float:left;
    display: inline;
    }

    #nav{
    display: inline;
    float:right;
    width:70%;
    }


    Und gekürzt das html:

    <!--das ist der Kopfbereich-->
    <div id="header-container">
    <header class="wrapper clearfix">

    <div id="title" >
    <a href="index.html"><img src =...></a>
    </div>

    <div id="nav">
    <ul>
    <li>...

    </ul>
    </div>
    <div style="clear: both;"> </div> <!--cleart die gefloatete navi-->

    </header>

    </div>

    Warum macht das ein Browser und der andere nicht??? :mad:

    Viele Grüße,
    Martina

  • "die autovermietungssoftware" und "anfänger-sein" passen mir da irgendwie nicht so ganz zusammen und drängt die vermutung in den vordergrund, dass es hier um eine kommerzielle seite geht....

    gekürzter code ist immer kacke, weil man eventuelle abhängigkeiten nicht sieht.
    ein link zum problem ist immer ratsam, da man so mit gewissen entwickler-tools direkt am objekt schauen kann, was los is.

  • Hallo

    Zitat

    Warum macht das ein Browser und der andere nicht???

    Weil der Quelltext falsch ist. Der Fehler ist aus den paar Quelltextschnipseln und Grafiken aber nicht zu erkennen. Wahrscheinlich fehlen die Grundkenntnisse.

    Für konkrete Hilfe die Seite deshalb bitte online stellen und Link bekanntgeben.

    Gruss

    MrMurphy

  • Hi danke für die schnellen Antworten.
    Kurz zu mir: Das ist in der Tat nicht meine erste Website, aber die erste Responsive. Ich bin eigentlich Vollblut-Printler, deswegen bin ich froh wenn ein Freund mir ein reales Website-Projekt zur Verfügung stellt, an dem ich üben kann.

    Die Grundkenntnisse stammen aus diversen Büchern, ausprobieren, googeln, trotzdem hab ich noch oft Denkfehler und kann mir außerdem auch nicht alles merken. Umso glücklicher bin ich, dass es Menschen wie euch gibt die ihr Wissen teilen. :)

    Online stellen ist ne prima Idee, der Link:
    http://www.beliondesign.de/Testeinszwo/Au…ware/index.html

    Gruß,
    Hüttenliesl

  • Nach einigem Rumprobieren habe ich festgestellt, dass die Media-Queries bei den drei Problembrowsern anscheinend gar nicht angenommen werden. Sie heißen:

    1. Break: @media only screen and (min-width: 480px)
    2. Break: @media only screen and (min-width: 768px)
    3. Break: @media only screen and (min-width: 1140px)

    Der 1. Break funktioniert noch. Aber der 2. und 3. Breakpoint nicht mehr. An was kann das liegen?

    Sollte ich es selbst herausfinden werde ich das Forum auf dem Laufenden halten...

    Viele Grüße,
    Martina