Probleme im Internet Explorer

web334 · #1 (**permalink**) 19.06.2013, 12:42

Ich bin gerade dabei, eine Extra Internetseite für ein Turnier zu erstellen und bisher hat das Ganze auch ganz prima geklappt, aber im Internet Explorer 8 und 6 treten Probleme auf.
Mein bisheriger Entwurf ist hier zu finden:
next-cup

im Internet Explorer 8 ist das Logo total verzerrt. Die andere Grafik passt einwandfrei. Was stimmt denn da mit dem Logo nicht?

Screenshot Internet Explorer 8

und im Internet Explorer 6 funktioniert anscheinend gar nichts. Zumindest wird so gut wie gar nichts angezeigt. Viele von euch werden natürlich sagen, dass der Internet Explorer 6 doch von so gut wie keinem mehr verwendet wird, aber in unserer ländlichen Gegend ist das anscheinend immer noch der Fall und von daher möchte ich die Internetseite auf so haben, dass sie auch im Internet Explorer 6 korrekt angezeigt wird. Das müsste doch machbar sein. Ich habe ja nur ganz einfache Sachen verwendet, die auch im Internet Explorer 6 funktionieren müssten. So wie das ganze im Moment aussieht, ist das eine einzige Katastrophe und das muss ich mir bestimmt dann auch anhören.

Screenshot Internet Explorer 6

Es wäre jedenfalls sehr super, wenn ihr mir helfen würdet, die Probleme zu beheben.
im Internet Explorer 7 funktioniert die Seite übrigens ganz gut.

fricca · #2 (**permalink**) 19.06.2013, 12:58

IE8: width:auto für das Bild.

IE6: Mit welcher Art IE6 ist der Screenshot entstanden? Mein IE6 zeigt die Inhalte zwar etwas zerwürfelt, aber er zeigt sie an.

web334 · #3 (**permalink**) 19.06.2013, 15:17

Vielen Dank für deine Antwort!

Die Ergänzung für den Internet Explorer 8 habe ich vorgenommen und nun passt es.
Wieso wurde das Logo verzerrt und die andere Grafik nicht? Wenn Du weißt, wo ich mich weiter darüber informieren kann, dann teile mir dies bitte mit.

Die Screenshots wurden mit IE NetRenderer - Browser Compatibility Check - erstellt.
Ich kenne zwar das Programm My DebugBar | IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10 , aber jedes Mal wenn ich damit in irgendeinem Browser eine Seite aufrufen möchte, dann stürzt dieses Programm ab.
Hast du noch einen Tipp, was ich denn für den Internet Explorer 6 noch ändern oder ergänzen muss, damit das Ganze auch dort funktioniert?

fricca · #4 (**permalink**) 19.06.2013, 15:34

Zitat:

Zitat von web334

Die Ergänzung für den Internet Explorer 8 habe ich vorgenommen und nun passt es.
Wieso wurde das Logo verzerrt und die andere Grafik nicht? Wenn Du weißt, wo ich mich weiter darüber informieren kann, dann teile mir dies bitte mit.

Vermutlich, weil du ein Bild mit max-width:100% in einem Element hast, das wiederum shrink-to-fit-Breite hat. Ich habe keine Zeit, das weiter zu analysieren.
Da dieses Logo in dieser Konstallation ohnehin nicht responsiv reagiert, kannst du auch einfach eine width in Pixel für das Bild angeben und max-width auf none setzen.

width:auto sollte bei deinen allgemeinen Angaben für "responsive images" immer dazu.

Zitat:

Hast du noch einen Tipp, was ich denn für den Internet Explorer 6 noch ändern oder ergänzen muss, damit das Ganze auch dort funktioniert?

Gib eine feste Gesamtbreite an.
Gib eine Breite für das Element #logo an.
Blende alle diese Zusatzelemente aus, die alphatransparente Hintergründe enthalten.
Dann teste erneut.

Wenn du deine Seite für IE 6 "optimieren" willst, musst du in einem nativen IE6 testen -- alles andere hat keinen Sinn.
Microsoft bietet Virtuelle Maschinen an: Cross-browser testing simplified | Testing made easier in Internet Explorer | modern.IE

web334 · #5 (**permalink**) 19.06.2013, 15:49

Danke für die Infos! Werde nun versuchen, diese umzusetzen

Manfred62 · #6 (**permalink**) 19.06.2013, 17:24

bei mir sieht es im IE6 auch halbwegs aus (etwas durcheinander, aber fast alles da).

wegen IE6: ich habe dazu einen portablen IE6. Läuft auf XP und 7, unabhängig vom installierten IE.
Link: https://www.box.com/shared/9ohzn4tb38

protonenbeschleuniger · #7 (**permalink**) 20.06.2013, 08:24

Zitat:

Zitat von web334

Mein bisheriger Entwurf ist hier zu finden:
next-cup

Noch ein allgemeiner Tipp: Du hast einen Fehler im CSS, der in der Fehlerkonsole (als Warnung) angezeigt wird.

Dann sieht es so aus, als ob das Doklument eine BOM enthält (sagt der Validator) das führt dazu, dass der IE 6 im Quirksmodus darstellt.

Und mit dem clearfix wird der wohl nicht zurecht kommen, wenn du wirklich den IE 6 unterstützen musst, würde ich da eine andere Methode verwenden.

web334 · #8 (**permalink**) 20.06.2013, 13:51

Zitat:

Zitat von Manfred62

bei mir sieht es im IE6 auch halbwegs aus (etwas durcheinander, aber fast alles da).

wegen IE6: ich habe dazu einen portablen IE6. Läuft auf XP und 7, unabhängig vom installierten IE.
Link: https://www.box.com/shared/9ohzn4tb38

Danke für diesen portablen IE6 !!! Ist wirklich praktisch.

Leider sieht meine Seite trotz zahlreicher Änderungen noch immer katastrophal aus. Also im IE6. Total durcheinander.

Zitat:

Zitat von protonenbeschleuniger

Noch ein allgemeiner Tipp: Du hast einen Fehler im CSS, der in der Fehlerkonsole (als Warnung) angezeigt wird.

danke für den Tipp. Eigentlich achte ich immer ganz genau darauf, dass die CSS keine Fehler enthält, aber einen habe ich wohl übersehen.
Gewusst habe ich zwar auch, dass *zoom:1; ein Fehler ist, aber ich habe gedacht, dass das in Ordnung ist, denn ich habe auf mehreren Seiten gelesen, dass man bei clearfix auch folgendes angeben soll

Code:

.clearfix {*zoom: 1;}

Zitat:

Zitat von protonenbeschleuniger

Dann sieht es so aus, als ob das Doklument eine BOM enthält (sagt der Validator) das führt dazu, dass der IE 6 im Quirksmodus darstellt.

BOM habe ich nun auch entfernt.

Zitat:

Zitat von protonenbeschleuniger

Und mit dem clearfix wird der wohl nicht zurecht kommen, wenn du wirklich den IE 6 unterstützen musst, würde ich da eine andere Methode verwenden.

mittlerweile habe ich mehrere Varianten für clearfix ausprobiert, aber der IE6 zeigt die Seite immer noch nicht korrekt an.
Was soll man denn für clearfix nun am besten nehmen?

Variante 1:

Code:

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0; 
  height: 0;
  visibility: hidden;
}
 
/* IE-Patch für IE 7*/
*:first-child+html .clearfix { min-height: 0; } 
	
/* IE-Patch für IE 6*/
* html .clearfix { height: 1%; }
	
oder so für den Internet Explorer 7 und 6
<!--[if lte IE 7]>
<style type="text/css">
  .clearfix { height: 1%; }   /* oder { zoom: 1; } */
</style>
<![endif]-->

Variante 2:

Code:

.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

oder Variante 3:

Code:

.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}


Und Das folgende für Internet Explorer 7 & 6

.clearfix:after {
   clear: both;
   content: " ";
   display: block;
   font-size: 0;
   height: 0;
   visibility: hidden;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

hier noch einmal der Link zur Seite:
next-cup

Manfred62 · #9 (**permalink**) 20.06.2013, 14:07

clearfix: Variante 2 (von Nicolas Gallagher) sollte eigentlich gehen. Das *zoom:1 ist für IE6/7 gedacht.
Das *zoom:1 ist natürlich nicht valide. Könnte man aber per cc in ein extra stylesheet packen. Vermutlich musst du für den IE6 wirklich etliches extra machen.

web334 · #10 (**permalink**) 20.06.2013, 14:22

Danke für deine Antwort.
Ich werde dann also *zoom:1; nur in einer extra CSS für den IE6 und auch für den IE7 aufführen.
Wenn ich diesen Code also in eine extra CSS für diese beiden packe, benötige ich dann auch den * oder kann ich auf diesen verzichten?

Dann werde ich mich mal daran versuchen, das Ganze so umzubauen, dass es auch im Internet Explorer 6 funktioniert oder das ist zumindest deutlich besser funktioniert als bisher.
In den anderen Browsern wird die Seite nach meiner bisherigen Erfahrung korrekt dargestellt oder gibt es einen Browser, in dem es nicht passt?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Probleme mit dem Internet Explorer	Webby0815	CSS	8	24.02.2011 15:36
Probleme mit gefloatete Bereich im Internet Explorer	gustavmega	CSS	2	20.08.2009 00:28
Probleme mit Internet Explorer Darstellung	loadzone	CSS	2	20.04.2008 21:24
position probleme mit dem internet explorer	alejandro	CSS	6	11.02.2008 14:54
Conflict between Mime Type and Document Type: Probleme im Internet Explorer	Jipii	(X)HTML	4	22.01.2008 19:49