login  Naam:   Wachtwoord: 
Registreer je!
 Forum

pngfix

Offline eLIX - 25/02/2008 17:45 (laatste wijziging 25/02/2008 18:02)
Avatar van eLIXNieuw lid Hallo,

ik zit hier met het probleem dat mijn layout is opgemaakt uit png files. En natuurlijk geeft dit problemen in IE6.
Ik heb ondertussen al ontdekt dat dit te fixen valt met de pngfix.js maar bij mij wil deze niet werken.
Door hier even door het forum te snuisteren heb ik al ontdekt dat je nog wat aanpassingen moet doen aan de css als het om background-images gaat.
Maar nog steeds werkt het niet.

Ik heb dus het volgende in mijn <head> staan:
<!--[if IE 6]><script type="text/javascript" src="../js/pngfix.js"></script><![endif]-->

In de pngfix.js staat:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. /*
  2.  
  3. Correctly handle PNG transparency in Win IE 5.5 & 6.
  4. http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
  5.  
  6. Use in <HEAD> with DEFER keyword wrapped in conditional comments:
  7. <!--[if lt IE 7]>
  8. <script defer type="text/javascript" src="pngfix.js"></script>
  9. <![endif]-->
  10.  
  11. */
  12. alert("test");
  13.  
  14. var arVersion = navigator.appVersion.split("MSIE")
  15. var version = parseFloat(arVersion[1])
  16.  
  17. if ((version >= 5.5) && (document.body.filters)) 
  18. {
  19.    for(var i=0; i<document.images.length; i++)
  20.    {
  21.       var img = document.images[i]
  22.       var imgName = img.src.toUpperCase()
  23.       if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  24.       {
  25.          var imgID = (img.id) ? "id='" + img.id + "' " : ""
  26.          var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  27.          var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  28.          var imgStyle = "display:inline-block;" + img.style.cssText 
  29.          if (img.align == "left") imgStyle = "float:left;" + imgStyle
  30.          if (img.align == "right") imgStyle = "float:right;" + imgStyle
  31.          if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
  32.          var strNewHTML = "<span " + imgID + imgClass + imgTitle
  33.          + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  34.          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  35.          + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
  36.          img.outerHTML = strNewHTML
  37.          i = i-1
  38.       }
  39.    }
  40. }


En de css:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #header {
  2. 	width: 950px;
  3. 	height: 173px;
  4. 	position: absolute;
  5. 	top: 0px;
  6. 	left: 0px;
  7. 	background-image: url(../images/bg/bg_header.png);
  8. 	background-repeat: no-repeat;
  9. 	_background: none; /* Hier zetten we de background op none voor IE */
  10. 	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale', src='../images/bg/bg_header.png'); /* En hier plaatsen we een filtertje voor IE */
  11. }


Heb de pagina geupload ook:
http://users.sk...chten.html

Iemand die de oplossing ziet?

6 antwoorden

Gesponsorde links
Offline JBke - 25/02/2008 18:47 (laatste wijziging 25/02/2008 18:57)
Avatar van JBke PHP gevorderde ik gebruik deze.

[edit] Sorry lijkt dezelfde te zijn. [/edit]

Zet dit is in je code:
(de oplossing staat bovenaan je eigen script op lijn 6 gebruik
<!--[if lt IE 7]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->
voor de aanroep )

doe een controle op welke browser je gebruikt is het IE doe

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php print('<script defer type="text/javascript" src="/images/pngfix.js"></script>'); ?>


bij mij staat het zo omdat ik Qcodo framework gebruik:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2.         if (QApplication::IsBrowser(QBrowserType::InternetExplorer)) {
  3.             print("\r\n");
  4.             print('<!--[if lt IE 7.]>');
  5.             print("\r\n");
  6.             print('<script defer type="text/javascript" src="/images/pngfix.js"></script>');
  7.             print("\r\n");
  8.             print('<![endif]-->');
  9.             print("\r\n");
  10.         }
  11. ?>
Offline Pieter - 25/02/2008 19:00
Avatar van Pieter Gouden medaille

SEO guru		 Ik heb onlangs ook dit probleem gehad.
Deze PNG fix is een goeie oplossing hiervoor omdat het ook gewoon als behaviour in de CSS meegeeft.
Offline JBke - 25/02/2008 19:02
Avatar van JBke PHP gevorderde bedankt pieterc, denk dat ik eens ga overschakelen. 
Offline eLIX - 25/02/2008 19:15 (laatste wijziging 25/02/2008 21:29)
Avatar van eLIX Nieuw lid Alvast bedankt pieterc!
Ik ga het vanavond nog uittesten

EDIT: Werkt nog steeds niet hier...  
Offline Pieter - 26/02/2008 11:28
Avatar van Pieter Gouden medaille

SEO guru		 Wil je het ergens online plaatsen? Dan checken we eens na of de paths allemaal goed kloppen. (had de eerste keer ook niet naar het goeie bestand verwezen  )
Offline eLIX - 26/02/2008 15:16 (laatste wijziging 26/02/2008 15:18)
Avatar van eLIX Nieuw lid
pieterc schreef:
Wil je het ergens online plaatsen? Dan checken we eens na of de paths allemaal goed kloppen. (had de eerste keer ook niet naar het goeie bestand verwezen  )

De pagina is te vinden op http://users.sk...chten.html
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.388s