Navigationsleiste mit *.png-Bildern - in IE nicht transparent?

**Mortis** · 13.08.2006 12:13

Hi,

auf meiner Site sieht man die Navileiste links. Im Firefox funzt die richtig und ist transparent. Im IE allerdings nicht!
Woran liegt's?

Hier der Code:

PHP-Code:


<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mortis</title>

<style type="text/css">
body{
 margin: 0px;
 text-align: center; /*der Trick, jetzt klappts im IE*/
 background-color: #000000;}
#Gesamt{
 background-color: #ECAA20;
 width: 795px;
 height: 610px;
 /*der Trick, jetzt für FF*/
 margin-left:auto; 
 margin-right:auto;
 margin-top:30px;}
#Menu{
 position: absolute; 
 top: 10px; 
 left: 5px; 
 width: 100px; 
 height: 300px&gt;}
#fenster{ 
 background-color:;  
 float: left; 
 position: absolute;
 left: 150px;
 top: 10px; 
 width:620px;}
#inhalt{
 background-color:;  
 float: left; 
 position: relative; 
 width:620px; 
 height : 400px;
 overflow : auto;
     scrollbar-3dlight-color:;
    scrollbar-arrow-color:;
    scrollbar-base-color:;
    scrollbar-darkshadow-color:;
    scrollbar-face-color:ECAA20;
    scrollbar-highlight-color:;
    scrollbar-shadow-color:}}

.Stil1 {color: #999999}
.Stil2 {font-family: Arial, Helvetica, sans-serif}

</style>

<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
<link rel="shortcut icon" href="/favicon.ico" />
</head>

<body onLoad="MM_preloadImages('Menu/news 3.png','Menu/news 2.png','Menu/ich 3.png','Menu/ich 2.png','Menu/kontakt 2.png','Menu/kontakt 3.png')">

<div id="Gesamt" align="center">

    <div id="Amp"><img src="Amp.jpg" width="795" height="147"></div>

    <div id="Center" style="position:relative; left:0; width:795">


        


<div id="fenster" align="left">
  <!-- Hieran richten sich die untigen Inhalte aus! -->
  
<p align="right" class="Stil1 Stil2" id="pageName">&nbsp;</p>

  <div id="inhalt">
    <h3 class="Stil2">initiierender Augenverschlei&szlig;</h3>
    <p class="Stil2">Tja, da sitze ich hier mit ger&ouml;teten Augen und freue mich ob der entstehenden neuen Homepage. Sie soll nicht so kompliziert wie die erste sein, die ich deshalb nie aktualisieren mochte, sie soll frischer sein, haltbarer, geschmackvoller und nett verpackt. <br> <br>
    Vielleicht sollte ich nicht so lange damit verbringen, diesen ersten Eintrag zu schreiben, sondern vielmehr am Konzept arbeiten. Vielleicht sollte ich mir ein Bier holen. Ach, ich mach einfach beides! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! <br> <br> 
    Bis hoffentlich bald wieder hier! </p>
    
  </div>
</div>

<!--end content -->

  
      <div id="Menu">
           
        <span>
        <table border="0" cellpadding="10" cellspacing="0" bgcolor="ECBB00">
          <tr>
            <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','news','Menu/news 3.png',1)" onMouseOver="MM_nbGroup('over','news','Menu/news 2.png','Menu/news 2.png',1)" onMouseOut="MM_nbGroup('out')"><img src="Menu/news 1.png" alt="" name="news" width="100" height="20" border="0" onload=""></a></td>
          </tr>
              <br>
              </br>
              
          <tr>
            <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','ich','Menu/ich 3.png',1)" onMouseOver="MM_nbGroup('over','ich','Menu/ich 2.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="ich" src="Menu/ich 1.png" border="0" alt="" onLoad=""></a></td>
          </tr>
              <br>
              </br>
              
          <tr>
            <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','kontakt','Menu/kontakt 3.png',1)" onMouseOver="MM_nbGroup('over','kontakt','Menu/kontakt 2.png','Menu/kontakt 2.png',1)" onMouseOut="MM_nbGroup('out')"><img name="kontakt" src="Menu/kontakt 1.png" border="0" alt="" onLoad=""></a></td>
          </tr>
                <br>
              </br>
              
        </table>    
      </div>

</div>  
</div>
</body>
</html>

**MichaelM** · 13.08.2006 12:29

Ganz einfach, im IE können PNG-Bilder noch nicht transparent dargestellt werden. Habe aber irgendwo mal einen Code gesehen, wo man dieses Problem umgehen kann. Mit dem neuen Browser von Microsoft sollen aber auch PNG-Bilder transparent dargestellt werden können.

**Mortis** · 13.08.2006 12:34

Na toll, das ist ja übel.
Danke für den Hinweis!

Dann muss ich ja die Knöppe wie den Hintergrund färben und bei jeder Layoutänderung die Knöppe neu einfärben. Damn!!

**Mortis** · 13.08.2006 12:40

Es gibt doch bestimmt Programme, mit denen ich Buttons recht einfach erstellen kann. Irgendwie automatisiert... Ja? Welche sind da die Favoriten?
Habe bisher immer mühsam selbst in Photoshop eingefärbt und neu gespeichert...

**MichaelM** · 13.08.2006 12:42

Das kannst Du auch in Photoshop.
Es gibt Filter bzw. plugins, die aus einem Rechteck oder Kreis
recht gute Buttons erzeugen können.
Ich persönlich arbeite in diesem Bereich nur mit Photoshop CS2.

**Mortis** · 13.08.2006 12:44

Hm, ok. Dann bin ich ja schon mal im richtigen Prog.
Gibt's Empfehlungen für PlugIns?
Einfach und hübsch soll's sein!

**MichaelM** · 13.08.2006 12:48

Such in google nach photoshop Filter bzw. PSplugin
Es gibt da schon einige free.

**Mortis** · 13.08.2006 12:50

Gibst wohl ungern einen Liebling von Dir preis, hm? Na gut!

Dann such ich selbst. *ächz

**MichaelM** · 13.08.2006 13:15

Na, zum Beispiel Filters Unlimited 2.0
oder
Chromatica
KPT effects
Chromatica
Eye Candy 4000

usw.

**Mortis** · 13.08.2006 13:21

Ach und diese Filter machen aus einem Bild einen Button? Bzw. 4 Bilder für einen Rollover-Button?

**Rinaldo** · 15.08.2006 00:44

Zitat von MichaelM

Habe aber irgendwo mal einen Code gesehen, wo man dieses Problem umgehen kann.

Ja, das Problem wurde hier im Forum schon oft angesprochen und die Suche wirft auch ein paar brauchbare Ergebnisse aus

...

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
Damit sollten normale PNG auch im IE transparent dargestellt werden können. Was mich immer noch stört: Für Hintergrundbilder funktioniert das nicht

.

**Mortis** · 15.08.2006 07:02

Oh, danke, Rinaldo! Mal sehen, ob ich die Seite mit diesem Code zustopfe...

zur Startseite vom TP

Thema: Navigationsleiste mit *.png-Bildern - in IE nicht transparent?

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Navigationsleiste mit *.png-Bildern - in IE nicht transparent?

Aktive Benutzer

Aktive Benutzer