C3 Beta 1 - Float Drop für #left und #right im IE8

[pmmueller]

Ich experimentiere gerade mit der Beta 1 habe hier mal eine Test-Site hochgeladen:

http://c3b1.websites-erstellen-mit-c...nd-bilder.html

Es geht mir um die drei Inhaltsspalten. In normalen Browsern und dem IE9 ist alles okay, aber im IE8 stehen #left und #right unterhalb von #main und ich weiß momentan nicht warum. Ich tippe mal auf einen Rundungsfehler des Browsers bei der Konvertierung von HolyGrail-Minus-Prozenten in Pixel.

Irgendeine Idee, wie man das effektiv korrigieren bzw. verhindern kann?

Anmerkungen:

• Ausgabeformat ist HTML5, aber auch mit XHTML bleibt das Problem bestehen. Hat also nichts mit dem HTML-Shim zu tun.
• Durch den box-shadow für #wrapper wird CSS3Pie aktiviert, aber auch ohne box-shadow und Pie bleibt der Float-Drop.
• #container hat von mir overflow:hidden bekommen, damit es #main, #left und #right umschließt. Ohne overflow:hidden hätte #container die Höhe 0, da im "Holy Grail" alle drei Spalten gefloatet werden.

[CeeKay]

Authorization Required

[pmmueller]

Oops. Total vergessen...

User: testing
PW: contao

EDIT: geht nicht mehr...

[pmmueller]

EDIT:
Falscher Alarm. Diesen Beitrag bitte ignorieren. Der weiter unten zitierte Style-Block vom IE8 steht nur im "F12 Entwicklertools"-Fenster, im normalen Quelltext steht das korrekte CSS. Leider.

Wie löscht man eigentlich Beiträge hier im Forum?

===

Ich bin inzwischen einen Schritt weiter. Anscheinend kommt das CSS vom Layout-Builder für den Style-Block im Header nicht richtig an:

In Firefox & Co. sieht der Style-Block so aus:

<style type="text/css">
/* <![CDATA[ */
#wrapper{width:960px;margin:0 auto}#left{width:180px;right:180px}#right{width:180px}#container{padding-left:180px;padding-right:180px}
/* ]]> */
</style>

Im IE8 steht dort nur folgendes:

<style type="text/css">CSS-Stylesheet</style>

Das ist wohl ein bisschen sehr knapp, und auch die Syntax lässt zu wünschen übrig...

===

EDIT: Aber das war wie gesagt nicht die Ursache. Die kommt einen Beitrag weiter unten...

[pmmueller]

Seltsam seltsam. Ich war auf der richtigen Spur.

Der Style-Block kommt richtig an, aber das CSS aus dem layout.css nicht:

@media (min-width:768px)
{
	#main,#left,#right {
		float:left;
		position:relative;
	}
	#main {
		width:100%;
	}
	#left {
		margin-left:-100%;
	}
	#right {
		margin-right:-100%;
	}
	#footer {
		clear:both;
	}
}

Wenn ich den IE8 diese Anweisungen manuell nachfüttere, stimmt auch das Layout. Sogar im IE7. To be continued.

Fragen:

• Warum bekommen IE7+8 die fraglichen CSS-Regeln aus layout.css nicht?
• Kann man in C3 die Komprimierung des Stylesheets layout.css irgendwo de-aktivieren?

EDIT: IE8 kann keine Media Queries. Deshalb bekommt der die Styles nicht. Siehe unten

[CeeKay]

Hast du irgendein JS eingebunden, dass dem IE8 Media Queries beibringt? Von Haus aus kann er damit nichts anfangen.

[pmmueller]

Zu dem Schluss bin ich auch gerade gekommen. Ich hatte im Kopf, dass IE7 keine Media Queries kann, IE8 aber wohl. Pustekuchen. IE8 kann auch keine Media Queries. IE8 ist der neue IE6...

Aber würde das zu Ende gedacht nicht bedeuten, dass vom Contao-Layout-Builder (layout.css) erstellte Layouts bei Defaulteinstellungen den IE8 nicht mehr unterstützen?

[pmmueller]

Der Screenshot zeigt eine Contao 3 beta 1 Standardinstallation mit der Music Academy, und auch hier dropt #left unter #main.

[andreas.schempp]

Scheint als wurde das von Leo Feyer nicht berücksichtigt. Bitte mach dazu doch einen Bug-Report.

[pmmueller]

Bitte mach dazu doch einen Bug-Report.

Done: https://github.com/contao/core/issues/4594, aber ich sehe gerade, dass der keinen "Milestone" hat.
Wie weise ich einem "Issue" denn einen "Milestone" zu?

EDIT: Fixed in 326a26a

[xchs]

Wie weise ich einem "Issue" denn einen "Milestone" zu?

Die Zuweisung macht dann Leo selbst.

Wenn für das weitergehende Verständnis des Bugreports auch die konkrete Contao-Version von Bedeutung ist, könnte man einen diesbezüglichen Hinweis beispielsweise im Ticket selbst irgendwo kurz anbringen. Dann weiß ein jeder Bescheid, in welcher Version bzw. in welcher Testumgebung das Problem ggf. reproduziert werden kann.

[pmmueller]

Danke für die Erklärung.

Wenn für das weitergehende Verständnis des Bugreports auch die konkrete Contao-Version von Bedeutung ist, könnte man einen diesbezüglichen Hinweis beispielsweise im Ticket selbst irgendwo kurz anbringen.

Ich dachte, ich hätte "Contao 3 beta 1" im Text stehen, habe ich aber eben nochmal nachgeholt, damit das deutlicher ist.

[n30xxx]

Das selbe Problem habe ich nun unter Firefox ... in der Beta funktionierte alles wunderbar!
Nun hab ich mir heute die RC aufgesetzt und aufeinmal dropt left + right ....

Hier die Seite: polis-magazin.com/CMSRC1/

Und ich werde nicht schlau....

[pmmueller]

Nur eine Vermutung:

Du darfst beim "Holy Grail" an die Spalten #main, #left und #right kein padding oder margin oder border oder sowas selbst vergeben. Dann passt das nicht mehr mit dem, was der Layout-Builder von Contao berechnet.

Nimm für die gewünschten Abstände stattdessen einfach die jeweiligen .inside Container, also #left .inside, #main .inside etc.

[n30xxx]

Nur eine Vermutung:

Du darfst beim "Holy Grail" an die Spalten #main, #left und #right kein padding oder margin oder border oder sowas selbst vergeben. Dann passt das nicht mehr mit dem, was der Layout-Builder von Contao berechnet.

Nimm für die gewünschten Abstände stattdessen einfach die jeweiligen .inside Container, also #left .inside, #main .inside etc.

Vielen Dank für deinen Tipp hat wunderbar geklappt!!!

Bleibt nur eine Frage noch offen - auf der Webseite ist die letze Reihe der Bilder kleiner als ihre Original Größe - woran kann das liegen?

img, embed, object, video {
    height: auto;
    max-width: 100%;
}

Sobald ich bei Firebug die max-width:#; deaktiviere sind die Bilder wieder auf Ihrer eigentlichen Größe.
Hier nochmal die Website: http://polis-magazin.com/CMSRC1/

[CeeKay]

Die Angabe max-width bezieht sich auf figure. figure hat margins, welche die Breite verringern.

Ist das wirklich eine produktive Seite mit Beta/RC? Mutig!

[n30xxx]

Die Angabe max-width bezieht sich auf figure. figure hat margins, welche die Breite verringern.

Ich habe die figure Klasse .image-container nun angepasst - und der Klasse width:100% gegeben.
nun funktioniert es

Jetzt ist das Problem das ich aus irgendeinem Grund eine riesen Lücke zwischen letzem Content und Footer habe... Wie kommt das aufeinmal?

[pmmueller]

Ist das schon behoben? Bei mir im Chrome sitzt der Footer ziemlich dicht unterm Content.

[n30xxx]

Ist das schon behoben? Bei mir im Chrome sitzt der Footer ziemlich dicht unterm Content.

Behoben wurde es noch nicht - ich finde keine Fehlerquelle!
Im aktuellen Firefox sitzt der Footer nicht dich am Content... bleibt dann nur die einzige Möglichkeit den Footer für jeden Browser per CSS anzupassen?

EDIT:
Ich hatte einem Container aus irgend einem Grund margin-bottom zugewiesen...
ABER ... auf den iDevices stimmt trotzdem was mit dem floaten nicht... und ich habe nun schon die .inside Klassen benutzt und nicht mehr left,right und main.