zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden verschachtelte Flexbox - Probleme mit Firefox und IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.11.2015, 16:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.11.2015
Beiträge: 2
toccamonium befindet sich auf einem aufstrebenden Ast
Standard verschachtelte Flexbox - Probleme mit Firefox und IE

Hallo,

ich bin gerade dabei eine Site zu erstellen, die in manchen Bereichen gleichhohe Boxen benötigt. Dazu verwende ich flexbox Funktionalität. In diesem Fall ist diese verschachtelt, da ich den Bereich mit den grauen Boxen auf eine Höhe bringen muss. Ich habe nun das Phänomen, dass das Ganze in Chrome so wie gewünscht dargestellt wird, nicht aber in Firefox und IE. Firefox zeigt nur die Box mit dem längsten Text an, die anderen divs sind nach unten gerutscht. IE zeigt überhaupt keinen Inhalt an. Hat jemand eine Idee, woran das liegen kann?

Anbei ein Codepen Beispiel: A Pen by florian
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.11.2015, 08:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.047
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Du benutzt Bootstrap und hast noch zwei zusätzliche CSS-Dateien eingebunden.

Bootstrap ist ein stimmiges und in sich abgeschlossenes Framework. Änderungen durch zusätzliches CSS führen in der Praxis oft zu Problemen.

Die Browser können zwar mit Regeln umgehen, da die eindeutig definiert sind. Die möglichen Fehler oder unsinnige Angaben tendieren hingegen gegen Unendlich, deshalb müssen die Browserersteller selbst entscheiden, wie sie damit umgehen. Dadurch resultieren dann die unterschiedlichen Darstellungen.

Konkreter zu deinem Problem:

Du hast umgebende Container definiert, die wiederum zwei innere Container enthalten:

Code:
<div class="portfolio-el bg-dark-gray">
  <div class="view"> 
    ...
  </div>
  <div class="portfolio-text-content">
    ...
  </div>
</div>
Der umgebende Container enthält die CSS-Anweisung "overflow: hidden;"

Im oberen der beiden inneren Container (class="view") befindet sich ein Bild. Dieser Container hat per CSS eine Höhe (height) von 100%. Dadurch füllt dieser Container in der Höhe den gesamten umgebenden Container aus.

Dadurch wird der zweite innere, untere, Container aus dem umgebenden Container nach unten herausgeschoben und wegen des "overflow: hidden;" nicht angezeigt.

Du musst also entweder dem overflow:hidden zu Laib rücken oder die Höhe des inneren oberen Containers so verringern, dass der untere noch genügend Platz hat.

Insgesamt würde ich aber eher bei der Verwendung von Bootstrap auf das einfügen von CSS-Anweisungen und damit CSS-Dateien verzichten, wenn deren Auswirkungen nicht bekannt sind. Ansonsten stolperst du nur von einem Problem zum nächsten.

Gruss

MrMurphy

Geändert von MrMurphy (08.11.2015 um 08:51 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.11.2015, 14:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.11.2015
Beiträge: 2
toccamonium befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Erklärung. Ich habe bei .view die 100% height entfernt, das löste das Probelm
Mit Zitat antworten
Antwort

Stichwörter
css3, equal height, flexbox, gleich höhe, spalten

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS für Firefox, IE, Opera Probleme - Browserweiche talkuvit CSS 4 31.10.2009 18:07
Firefox 3.0.2 - Probleme mit dem Passwortmanager? Hier die Lösung! darkiop Offtopic 2 26.09.2008 17:43
Probleme mit links im Firefox dizzlwizzl CSS 2 14.12.2006 14:15
Probleme mit der Darstellung zwischen IE und Firefox Insane.J CSS 1 08.11.2005 12:47
verschachtelte divs, javascript menü - firefox macht ärger fork (X)HTML 14 05.11.2005 12:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:13 Uhr.