XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Probleme im Internet Explorer (http://xhtmlforum.de/showthread.php?t=69571)

web334 19.06.2013 13:42

Probleme im Internet Explorer
 
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
http://www7.pic-upload.de/19.06.13/yv164o4bealq.png


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
http://www7.pic-upload.de/19.06.13/tg56qgtih78p.png


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 19.06.2013 13: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 19.06.2013 16: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 19.06.2013 16:34

Zitat:

Zitat von web334 (Beitrag 530613)
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 19.06.2013 16:49

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

Manfred62 19.06.2013 18: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 20.06.2013 09:24

Zitat:

Zitat von web334 (Beitrag 530608)
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 20.06.2013 14:51

Zitat:

Zitat von Manfred62 (Beitrag 530624)
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 (Beitrag 530639)
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 (Beitrag 530639)
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 (Beitrag 530639)
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 20.06.2013 15: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 20.06.2013 15: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?


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:59 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023