✔ PNG-24 altes Thema IE6

[Gunah]

Moin

Ich hobe so nun Folgendes Problem...

Ich habe ein Menu das aus Bilder besteht (weil dort eine besondere Schrift verwendet wird) und dieses Bild ist ein PNG-24 mit Alphatransparents
und mit einer iepng.htc werden die Bilder im IE6 auch Transparent, nur nicht die Hintergründe:

iepng.htc:

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com

// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/


// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'images/empty.gif';


var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
 if (filters[f])
 {
  filters[f].enabled = s ? true : false;
  if (s) with (filters[f]) { src = s; sizingMethod = m }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
 // Assume IE7 is OK.
 if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
  (event && !/(background|src)/.test(event.propertyName))) return;

 var bgImg = currentStyle.backgroundImage || style.backgroundImage;

 if (tagName == 'IMG')
 {
  if ((/\.png$/i).test(src))
  {
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   filt(src, 'scale');
   src = blankImg;
  }
  else if (src.indexOf(blankImg) < 0) filt();
 }
 else if (bgImg && bgImg != 'none')
 {
  if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
  {
   var s = RegExp.$1;
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   style.backgroundImage = 'none';
   filt(s, 'crop');
   // IE link fix.
   for (var n = 0; n < childNodes.length; n++)
    if (childNodes[n].style) childNodes[n].style.position = 'relative';
  }
  else filt();
 }
}

doFix();

</script>
</public:component>

hier der CSS Code:

    /*Menu*/
    #c2 #c3 div.innerm div.menu {
        background-color: Transparent;
        width: 224px;
        float:left;
    }
    #c2 #c3 div.innerm div.menu ul {
        padding: 0px;
        margin: 0px;
    }
    #c2 #c3 div.innerm div.menu ul li {
        height: 48px;
        overflow: hidden;
    }
    /*Menu Hover (incompatible IE6 <=)*/
    #c2 #c3 div.innerm div.menu ul li a img:hover {
        background-image: url(../images/menu/hover.png);
        background-repeat: no-repeat;
        background-position: left top;
    }
    /*First-Child in Menu Broder Top*/
    #c2 #c3 div.innerm div.menu ul li:first-child {
        background-image: url('../images/menu/top_border.jpg');
        background-repeat: no-repeat;
        background-position: left top;
        padding-top: 1px;
    }
    /* No Broder in Menu*/
    #c2 #c3 div.innerm div.menu ul li a img {
        border: 0px;
    }
    #c2 #c3 div.innerm div.menu ul li.activ a img:hover {
        background-image: none;
    }
    /*Menu Activ*/
    #c2 #c3 div.innerm div.menu ul li.activ a img, #c2 #c3 div.innerm div.menu ul li.activ a img:hover{
        background-image: url(../images/menu/activ.png);
        background-repeat: no-repeat;
        background-position: left top;
    }

Ich hoffe Ihr könnt mir bei diesem Problem helfen

Gruß
Mathis

 

[Maik]

Hi,

hier mal der Auszug aus dem Stylesheet (http://www.twinhelix.com/css/iepngfix/demo/), um die "iepngfix.htc" zu laden:

<style type="text/css">

 /*
  USAGE: All you have to do is include this one line in your CSS file, with the
  tag names to which you want the script applied:
 */

 img, div { behavior: url(iepngfix.htc) }

 /*
  Alternatively, you can specify that this will apply to all tags like so:
   * { behavior: url(iepngfix.htc) }
 */

 </style>

 

[Gunah]

oh sorry habe nur die normal.css hier eingebunden...

genau das Script habe ich per <!--[if lt IE 7]>CSS_DATEI_IE6.css<![endif]--> eingebunden damit es nur für den IE kleiner als 7 vorhanden ist...

[EDIT]
Das Skript funkioniert nur in DIV und IMG Tags in allen anderen geht es nicht...
[/EDIT]

[EDIT#2]
IMG Tag nur der normale, CSS Zusätze, wie Backgrounds werden falsch dargestellt
[/EDIT#2]

Gruß
Mathis

 

[Maik]

Dann musst du eben die anderen (Elemente) im Selektor mitaufnehmen, oder du verwendest diesen Selektor (Universalselektor *), der alle HTML-Elemente des Dokuments miteinbezieht:

/*
  Alternatively, you can specify that this will apply to all tags like so:
   * { behavior: url(iepngfix.htc) }
 */

Alternativ zum "iepngfix"-Hack kannst du dir mal die vorgestellte Technik in dem Artikel Cross-browser semi-transparent backgrounds anschauen.

 

[Gunah]

danke für deine Antworten, bei mir hat es nicht in einem UL-LI-Tag funktioniert, habe dann es in einen DIV gepackt und es hat funktioniert...