12-Spalten-Grid & Firefox

[CKern]

Hallo Zusammen,

eine Frage habe ich noch:

in meinem aktuellen Projekt (http://neu.erika-helbich.de) nutze ich das 12-Spalten-Grid (und Layout-Builder aktiviert, wegen der Galerie).
Soweit passt in den Browsern alles, aber im Firefox habe ich einen wahnsinns Abstand zwischen #Header und #Container
und ich finde nicht, wo der herkommt?

Habt Ihr eine Idee?

Viele Grüße

[wulf]

#container:after, .custom:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

hier verursacht content:"."; dass problem im ff.

[CKern]

Hallo Wulf,

danke für Deine Rückmeldung.

Kommt das content:"." automatisch von Contao?
Ich habe das nicht eingebaut.

Ich konnte das Problem jetzt lösen, in dem ich beim #header die Höhe rausgenommen habe, wobei ich nicht verstehe, warum das ganz dann so verhält.

Gruß

[CKern]

........arrrggg, ich nehme alles zurück.
Es ist nicht die Höhe von #Header. Das Problem ist immer noch da.

[wulf]

#container:after, .custom:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

ist bestandteil vom layout.css (zu finden unter../assets/contao/css).
Einfach

#container:after, .custom:after {
    content: ""!important;
}

in deinem css eingeben und schauen, ob es hilft.

[CKern]

Hallo Wulf,

vielen Dank, hat aber leider nicht geklappt.

Ich verstehe es nicht.
Wenn ich im Firefox mit WebDeveloper was prüfen möchte, z.B. "Div Reihenfolge anzeigen" oder "Gefloatete Elemente mit Kontur versehen", dann machts schwups und alles ist ok, auch wenn ich dann z.B. "Gefloatete Elemente mit Kontur anzeigen" wieder rausnehme, ist alles i.O.

Ich habe das Gefühlt, das es etwas mit meiner Navigation zu tun hat.
Die 3 roten Symbole stecken in einem ul und bei hover vom mittleren Symbol wird das (FE) Navigationsmodul geladen.
Beim "design" dieser Navigationszeile hatte ich zwischendurch das Problem, dass das hover nicht funktioniert hat. Es hat erst dann funktioniert, wenn ich #header eine Höhe gegeben habe. Zusätzlich musste ich .mod_navigation .ul noch ein z-index:1000 geben, damit das Menü im Vordergrund angezeigt wird (vorher ist es hinter den Container gerutscht)

Gruß

[wulf]

hab nochmal nachgeschaut und war selber etwas verwirrt, weil es im firebug funktioniert hat. nachdem ich noch mal geschaut habe, ist mir aufgefallen, das du

#container {
    min-height: 400px;
}

im css stehen hast die id #container wird aber schon in einer anderen stelle des css benutzt und wenn mich nicht allles täuscht, sollte eine id eindeutig sein.

[CKern]

habe das

#container {
    min-height: 400px;
 }

rausgenommen, bringt aber nichts.

Schau Dir doch mal mit webdeveloper oder das DIV von #header und #container an.
#header umfasst nur die Bilder ob
meine Navigationszeile wird innerhalb von #container angezeigt (somit funktioniert mein hover auch nicht...)
Meine Navigationszeile (mit den 3 roten Symbolen) ist aber definitiv Bestandteil von #header

Ich jetzt nur noch 1 FE-Modul "Kopf", indem ich mit Insert_Tag 2 weitere Module einbinde. Im Seitenlayout ordne ich dann "Kopf" der Spalte "Kopfzeile" zu.
Sonst gibt es nichts in der Spalte "Kopfzeile"

[wulf]

mmh, irgendwie fühle ich mich langsam von den dev-tools veräppelt...neuer versuch
wenn ich

 #container, .inside {
position: relative;
}

deaktiviere, funktioniert alles (in firebug/devtool)

[BugBuster]

dein DIV caroufredsel_wrapper hat über style eine Höhe von 140 pixel. Soll das so sein?

[CKern]

ja, so habe ich es definiert, weil die Bilder diese Größe haben.
Soll ich es mal raus machen?

[BugBuster]

Na, die Bilder sehe ich aber nicht in der Größe? Oder blick ich da was nicht?

[CKern]

hmm - versteh ich nicht.
wenn Du mit rechter Maustaste auf dem Bild "Grafik-Info anzeigen" wählst (im Firefox), dann siehst Du, dass die Bilder eine Höhe von 140 px haben.

Im caroufredsel hatte ich eingestellt: feste Höhe 140 px.
Das habe ich jetzt rausgemacht, also keine fixe Höhe mehr.
Wenn ich jetzt mit WebDeveloper nach schauen, haben das DIV von caorufredsel immer noch eine Höhe von 140 px.

In den Einstellungen von caroufredsel steht, dass die Höhe berechnet wird, wenn man nichts angibt.

Im Chrome, Safari und IE ist ja auch alles i.O. ... nur im FF nicht

[wulf]

#container, .inside {
}
.main-nav ul {
    background-color: rgba(163, 163, 163, 0.5);
    float: left;
    height: 3em;
    margin-bottom: 1em;
    margin-top: 1em;
    width: 100%;
    display: block;
}
.main-nav li {
    float: left;
    margin: auto 1em;
}

.main-nav li:hover ul {
    left: auto;
    height: auto;
    margin-top: 0em;
}

mit diesen einstellungen hat es bei mir in unter firefox im firebug funktioniert

[Spooky]

In welcher Version von FireFox tritt das Problem auf? Ich kann hier im FireFox keinen ungewöhnlich großen Abstand zwischen header und #container feststellen.