Schnulli: Mein Alpha-PNG lädt zu lange im IE

Hallo,

Ich quäle mich schon seit 2 Tagen mit dem einen Thema rum und bin überhaupt nicht mehr im Zeitplan (Vorallem wegen diesem kack Weihnachten geht alles drunter und drüber!)

Es geht um PNGs und den IE Hack von twinhelix.com.

Ich möchte einen Halbtransparenten Hintergrund erschaffen, da der Haupthintergrund sehr "wild ist" und man eine absoftung braucht um den text überhaupt noch lesen zu können.
Da die CSS-Alpha-Eigenschaften den text ebefalls mit "runterziehen" brauche ich einen PNG-Fix der sogar Hintergründe ohne width und height Angabe berücksichtigt (Da gibt es noch so einen anderen Fix der das nicht kann)

Mein Problem ist allerdings das wenn ich mein PNG mit Opacity: 50% Abspeichere und mit in den Quelltext einbeziehe, dass der IE extrem lange braucht bis das eine Element geladen ist ( 3min. - Warum auch immer - Aber dann siht es so aus wie es sein soll, brauch nur eben 3 min.).

Nehme ich stattdessen dieses PNG für den Hintergrund:

Ist alles dufte.

Ich frage mich was hat der was ich nicht habe, also die PNGs :-)
Welche Eigenschaften führen dazu das bei meinem PNG nicht alles glatt läuft?

Schnulli!

  1. Hi,

    Mein Problem ist allerdings das wenn ich mein PNG mit Opacity: 50% Abspeichere und mit in den Quelltext einbeziehe, dass der IE extrem lange braucht bis das eine Element geladen ist ( 3min. - Warum auch immer - Aber dann siht es so aus wie es sein soll, brauch nur eben 3 min.).

    Wie gross hast du dein PNG-File abgespeichert - ich meine, die Masze in Pixeln? Da sollte man nicht zu knauserig sein - damit spart man naemlich im allgemeinen bei gekachelten oder gestreckten Bildern am falschen Ende, weil es den Browser dann mehr Speicher/Rechenleistung kostet, das Bild auf's entsprechende Masz zu vervielfachen.

    Und vielleicht kannst du auf den Alphaimageloader auch ganz verzichten - der IE < 7 hat naemlich nur ein Problem mit Alphatransparenzwerten in 24 oder 32 Bit-PNGs. Macht man aber ein 8 Bit-PNG draus, dann soll er das auch koennen.

    Dummerweise koennen nur viele Grafikprogramme keine 8 Bit-PNGs unter Beibehaltung der Alphatransparenz speichern; aber bspw. mit dem Kommandozeilentool pngquant soll man 24 oder 32 Bit-PNGs in 8 Bit umwandeln koennen.
    (Ich hab das selbst noch nicht ausprobiert - wenn du das also versuchst, waere es nett, wenn du von deinem Ergebnis berichten wuerdest.)

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    1. Die CPU Auslastung (XAMPP) des IEXPLORER.EXE steigt auf 80% und das ist kein normales laden mehr! da stimmt irgendwas gewaltig nicht.
      Leute ich bekomm gleich einen NERVEN zusammenbruch! wenn ich noch ne halbe stunde länger hier rum mache kann ich für nichts mehr garanteren!
      Das ist das schlimmste womit ich jemals zu Kämpfen hatte.
      Die Aggression die sich bis jetzt aufgebaut haben (durch die ständigen hänger und abbrüche und fehlschläge) sind unbeschreibar!

      Wie gross hast du dein PNG-File abgespeichert - ich meine, die Masze in Pixeln? Da sollte man nicht zu knauserig sein - damit spart man naemlich im allgemeinen bei gekachelten oder gestreckten Bildern am falschen Ende, weil es den Browser dann mehr Speicher/Rechenleistung kostet, das Bild auf's entsprechende Masz zu vervielfachen.

      Das war mein erster gedanke nach meinem 1x1px versuch
      auch 200x200px ändert nichts!

      Und vielleicht kannst du auf den Alphaimageloader auch ganz verzichten

      Sollte schon überall gut aussehen..

      Dummerweise koennen nur viele Grafikprogramme keine 8 Bit-PNGs

      Ja, genau wie Photoshop.. Was soll das? Scheiße ist das, einfach nur scheiße!

      Kommandozeilentool pngquant
      Hab ich probiert, aber das Problem liegt wo anders, aber im endeffekt wohl doch nur in der Datei!

      Ich brauche mal ein Programm, das mir bis ins letzte Detail PNG Informationen gibt um mich dann dahin zu arbeiten!

      Hier mal meine test.php:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
       <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
       <script type="text/javascript" src="iepngfix_tilebg.js"></script>

      <style type="text/css">
       img, div, input { behavior: url("iepngfix.htc") }
       </style>

      <style type="text/css">
        /* Some styles for the default demonstration */
        body {
         font: 10pt/14pt sans-serif;
         background-color: #FF0000;
        }

      .test{
       background: url(trans.png);
          behavior: url("iepngfix.htc");
      }

      </style>

      </head>

      <body>
      <TABLE><TR><TD CLASS="test" HEIGHT="300" WIDTH="300">dsfasdfasdf</TD></TR></TABLE>

      ----

      vorher sollte man sich das runterladen:
      http://www.twinhelix.com/css/iepngfix/iepngfix.zip
      und anschließend die test.php ins selbe verz. kopieren.
      dann einfach mal eine 50% opacity png erstellen.

      ICH HOFFE DAS MIR IRGENDJEMAND EIN WEIHNACHTSGESCHENK MACHT UND MIR HIERBEI HILFT!

      Ich geh jetzt nach hause, denn so scheiße gings mir echt noch nie. Noch nie musste ich solange an einem Problem knabbern. Verrückt!

      Danke!
      Schnulli