... IE (+ 24Bit PNGs mit Javascript?)

**Coras** · 27.11.2005 13:56

Hoffentlich krieg ich jetzt keine Mahnung wegen 'nem undeutlichen Titel. :/
Also... ich habe 'ne Homepage für 'ne Skatecrew gemacht. Die benutzen größtenteils Internet Explorer, wenn nicht sogar alle - dummerweise wird's eben genau in dem Browser nicht richtig dargestellt.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

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

<style type="text/css" media="all">
<!--
body {
    background-color: #2B1809;
    padding: 10px 0 0 0;
    margin: 0;
    }

#structure {
    width: 818px;
    margin: 0 auto;
    padding: 0;
    empty-cells: show;
    }
    
#header {
    width: 818px;
    height: 131px;
    background-color: #2B1809;
    }

#header-top {
    width: 133px;
    height: 61px;
    background-image: url('./images/header_top.jpg');
    background-repeat: no-repeat;
    }

#header-left {
    width: 18px;
    height: 131px;
    background-image: url('./images/header_left.jpg');
    background-repeat: no-repeat;
    background-color: #2B1809;
    }
    
#header-main {
    width: 133px;
    height: 131px;
    background-image: url('./images/header_main.jpg');
    background-repeat: no-repeat;
    }
    
#header-font {
    width: 667px;
    height: 131px;
    background-image: url('./images/header_font.jpg');
    background-repeat: no-repeat;
    }

#empty-left {
    width: 18px;
    }
    
#navi {
    width: 133px;
    height: 88px;
    vertical-align: top;
    background-image: url('./images/navi_ecke.jpg');
    background-repeat: no-repeat;
    background-position: bottom left;
    }

#navi table {
    padding-top: 25px;
    width: 100%;
    }    

#navi td {
    background-image: url('./images/navi_normal.png');
    width: 133px;
    }
    
#navi td:hover {
    background-image: url('./images/navi_hover.png');
    width: 133px;
    }
    
#navi-bg {
    width: 133px;
    height: 88px;
    background-image: url('./images/navi_background.jpg');
    background-repeat: no-repeat;
    background-position: top middle;
    position: absolute;
    }
    
#content {
    width: 667px;
    text-align: justify;
    background-color: #777777;
    background-image: url('./images/content_bg.jpg');
    background-repeat: no-repeat;
    background-positon: top left;
    }

#copyright {
    width: 641px;
    height: 38px;
    }

#content-ecke {
    width: 36px;
    background-image: url('./images/content_ecke.jpg');
    background-repeat: no-repeat;
    background-position: bottom right;
    }
        
#header-main, #header-font, #navi {
    background-color: #5C2600;
    }

.bold {
    font-weight: 700;
    text-decoration: none;
    }
-->
</style>
</head>

<body>

<table id="structure" cellpadding="0" cellspacing="0">
 <tr>
  <td></td>
  <td id="header-top"></td>
  <td></td>
 </tr>
 <tr>
  <td id="header-left" rowspan="2"></td>
  <td id="header" colspan="3">
   <table cellpadding="0" cellspacing="0">
    <tr>
     <td id="header-main"></td>
     <td id="header-font"></td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td id="navi" nowrap="nowrap">
   <div id="navi-bg">
   <table cellpadding="0" cellspacing="0">
    <tr>
     <td>
      News/Upadtes
     </td>
    </tr>
   </table>
   </div>
  </td>
  <td id="content">
   <table cellpadding="0" cellspacing="0">
    <tr>
     <td colspan="2">
      <span class="bold">Der Text hier hat keinen Sinn:</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
     </td>
    </tr>
    <tr>
     <td id="copyright">Webdesign by Arne Schl&uuml;ter</td>
     <td id="content-ecke" align="right"></td>
    </tr>
   </table>
  </td>
 </tr>
</table>

</body>
</html>

So sollte es aussehen
So sieht es aus

(Die Schrift ist übrigens noch nicht formatiert, aber wen interessiert's.)

Ich habe übrigens auf gizcore.com, damals noch gizmo-designs.com gelesen, dass man mit Javascript 24Bit PNGs im IE korrekt darstellen lassen könnte, allerdings kommt die Seite ja erst an Weihnachten wieder online.... weiß jemand ganz rein zufällig wie das geht? Dann muss ich mir keine alternative suchen, wie ich das ohne 24Bit PNGs in der Navi halbtransparent machen kann...

**Manni** · 27.11.2005 14:30

Vielleicht hilft dir das:
http://www.webmaster-eye.de/IE,Filte...3.artikel.html

Is zwar ekelhaft o.O aber egal

**Coras** · 27.11.2005 14:43

Das hatte ich schon versucht, allerdings wurde dann nicht der Hintergrund, sondern der Text transparent. ~_~ Der Hintergrund wurde da garnicht dargestellt.

**NPC Fighter** · 27.11.2005 18:05

Hat das PNG Alphatransparenz? Die stellt der IE nämlich eh nich dar. o.o
@ Manni: Pfui, solche Links in öffentlichen Foren tragen zur Verbreitung von IE-Only Attributen bei. Schäm dich. ;_;

**Coras** · 27.11.2005 19:16

Alphatransparenz? Naja, wenn ich in Photoshop das PNG öffne sehe ich jedenfalls keinen Alpha-Kanal... wenn ich jetzt was missverstehe klärt mich bitte auf. Ich habe auf jeden Fall auf Gizmo-Designs gelesen, dass es mit irgendeinem Javascript geht.

**Hisoka** · 30.11.2005 15:23

nimm am besten gif Dateien für bilder die Transparenzen enthalten und für alles andere JPEGs. Am besten nimm PNGs nur für normale BIlder keine Design Grafiken.

**Lukas** · 30.11.2005 15:36

Zitat von ssj5000

nimm am besten gif Dateien für bilder die Transparenzen enthalten und für alles andere JPEGs. Am besten nimm PNGs nur für normale BIlder keine Design Grafiken.

Wieso? Ich bevorzuge klar PNG - es ist ein freies Grafikformat, es unterstützt (Alpha-)Transparenz, und es eine verlustfreie Komprimierung (im Gegensatz zu JPG) und ist nicht wie GIF auf 256 Farben beschränkt. Okay, die Alphatransparenz kann man wegen dem IE auf größeres Sites nicht anzeigen, aber sonst sollte alles gehen.

**Dingsi** · 30.11.2005 17:18

Zitat von ssj5000

nimm am besten gif Dateien für bilder die Transparenzen enthalten und für alles andere JPEGs. Am besten nimm PNGs nur für normale BIlder keine Design Grafiken.

Bitte? JPEG für Design-Elemente? JPEG ist das aller letzte Format was ich dafür verwenden würde, denn komprimierte JPEGs leiden unter Qualitätsverlust, welcher sich beim Designen nur allzu deutlich in hässlichen Rändern bemerkbar macht. Und unkomprimierte JPEGs sind einfach nur groß.
PNG ist fürs Designen leider auch nicht perfekt, denn erstens kommt der IE nicht mit der Alpha-Transparenz klar - okay das kann man vermeiden, und zweitens verfälscht der IE manchmal die Farben von PNG-Dateien und man erkennt Farbunterschiede zwischen Bild und Hintergrund (auch wenn diese Ursprünglich (und in echten Browsern) aufeinander abgestimmt sind). Fragt mich nicht wieso. (Auch das kann man umgehen, indem man z.B. den Hintergrund auch ein PNG-Bild sein lässt, dann verfälscht der IE beide Bilder und man sieht den Defekt nicht mehr).
GIF empfiehlt sich für frickel Designs wohl noch.

Wobei ich diese Grafik-Überladenen Teile eh nicht mag. Sie sehen vielleicht gut aus, aber im Web gehts mir in erster Linie um Benutz- und Erreichbarkeit.

Und IE mag ich auch nicht, btw.

FF · 30.11.2005 19:23

also spontatn fällt mir jetzt nur ein, lass deine skater auf Firefox umsteigen.
Solange es ein einfaches Menüelement ist, nimm eine Gif Datei, da merkt man keinen Unterschied, und die transparenz funktioniert.
IE unterstützt nämlich wirklich nicht die PNG transparenzen >.<
Aber bei so einer Website.......
Tu deinen Auftraggebern was gutes, und lass sie FF oder Opera benutzen^^

btw, das design gefällt mir, nur ist die navi-schrift wie sie in dem beispiel screenshot nur schlecht lesbar, mach sie besser großer und /oder in einer anderen Farbe.

**Jesus_666** · 30.11.2005 21:53

BTW, um die ursprüngliche Frage teilweise zu beantworten: Man kann im IE alphatransparente PNGs korrekt darstellen, dazu muß man sie aber über einen ActiveX-Filter laden, der mit keinen anderen Browser funktioniert.

Conditional Comments (weitere Informationen) können dir aber helfen, den Kram für IE und andere Browser zum Laufen zu bringen: Du steckst einfch den normalen Code rein und sagst per CC, daß der IE das nicht ausführen soll. Dann steckst du den IE-spezifischen Code auch rein und sorgst dafür daß nur der IE ihn ausführt (alle-außer-IE-Code von hier):

Code:

<!--[if IE]>
Hier kommt der IE-spezifische Kram hin.
Weil dieser Kram in einem Kommentar steht interpetieren andere Browser ihn nicht.
<![endif]-->
<!--[if !IE]>-->
Das hier wird von allen Browser außer IE interpretiert.
<!--<![endif]-->

**Coras** · 02.12.2005 17:17

Okay, Conditional Comments kannte ich vorher zwar schon, bin aber nicht auf die Idee gekommen, sie einzusetzen. Vielen Dank an dieser Stelle erstmal.

Kann mir noch jemand ein gutes Kalenderscript auf PHP Basis (ob MySQL oder txt Basis ist im Prinzip egal) nennen? Es sollte so aufgebaut sein, dass man die Monate einzeln durchblättern kann und dann für jeden Tag die Termine angezeigt werden. Wenn möglich auf Templates aufbauend.

**dadie** · 03.12.2005 21:36

Also , ich habe damals für eine Bewerbung als IT - System Elektroniker ein Kalender Script gebaut.

Vom Prinzip könnstest du es ganz einfach mit dieser "Write and Read" funktion erweitern.
Ich habe dazu leider keine zeit , evtl. kann es auch jemand anderrs im forum.

Das Script ist folgendes :

PHP-Code:


<?php



########################################

#                                      #

#     Kalender Script By Dadie 04      #

#                                      #

#                                      #

########################################

   







// Farbeinstellungen



$kopf    = "#0069FF";          // BG Überschrift / Monat Jahr

$tage    = "#7BB6FF";          // BG der Tagen (Mo , Di usw.)

$bgcolor = "#7BB6FF";          // Tages BG (1 ,2 ,3 usw.)

$heute   = "#E9E7E7";          // Hintergrundfarbe des heutigen Tages

$sa      = "#0000FF";          // Textfarbe von Samstag

$so      = "#FF0000";          // Textfarbe von Sonntag



##############################################################################################################################################



//Daten des Datums abspeichern



$tag          = date("j") ;

$dieser_monat = date("n") ;

$dieses_jahr  = date("Y") ; 

$monat_namen   = array("Error 404","Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");



if ($monat == "") { $monat = $dieser_monat ;}

if ($jahr == "")  { $jahr = $dieses_jahr   ;}





//Vordaten Berechnung

#########################



if ($monat == "1" ){



$vormonat = "12"       ;

$vorjahr  = ($jahr-1)  ; 



}else{



$vormonat = ($monat-1) ;

$vorjahr  = $jahr      ;

}

#########################



//Schaltjahr Berechnung

#########################



$schaltjahr = gettype($jahr/4) ;





if($schaltjahr == "integer" ){



$monat_tage = array("0","31","29","31","30","31","30","31","31","30","31","30","31");



} else {



$monat_tage = array("0","31","28","31","30","31","30","31","31","30","31","30","31");



}



$monat_tage2 = "$monat_tage[$monat]";



#########################



//Anfang des Monats bzw. an welchem Tag der Monat begint z.B. Montag

#########################





$erstertagscript = getdate(mktime(2,0,0,$monat,1,$jahr));

$anfangstag = "$erstertagscript[wday]";





#########################





//Nach daten berechnung

#########################





if ($monat == "12" ){



$naegmonat = "1"       ;

$naegjahr  = ($jahr+1)  ; 



}else{



$naegmonat = ($monat+1) ;

$naegjahr  = $jahr      ;

}



#########################



//Tabellengrösse

#########################



$weite = "10" ;

#########################





echo "

<table border='0' cellspacing='2' cellpadding='1'>



 <tr>



  <td colspan='7' align='center' bgcolor='$kopf'><div style='font-family:Verdana;font-size:smaller'>





<a href='./$_SERVER['PHP_SELF']?monat=$vormonat&jahr=$vorjahr'>&lt;</a>



&nbsp; $monat_namen[$monat] $jahr &nbsp;



<a href='./$_SERVER['PHP_SELF']?monat=$naegmonat&jahr=$naegjahr'>&gt;</a></div>



  </td>

</tr>

<tr>

 <td width='$weite' bgcolor='$tage' align='center'><div style='font-family:Verdana;font-size:smaller'>Mo</div></td>

 <td width='$weite' bgcolor='$tage' align='center'><div style='font-family:Verdana;font-size:smaller'>Di</div></td>

 <td width='$weite' bgcolor='$tage' align='center'><div style='font-family:Verdana;font-size:smaller'>Mi</div></td>

 <td width='$weite' bgcolor='$tage' align='center'><div style='font-family:Verdana;font-size:smaller'>Do</div></td>

 <td width='$weite' bgcolor='$tage' align='center'><div style='font-family:Verdana;font-size:smaller'>Fr</div></td>

 <td width='$weite' bgcolor='$tage' align='center'><font color='$sa'><div style='font-family:Verdana;font-size:smaller'>Sa</div></font></td>

 <td width='$weite' bgcolor='$tage' align='center'><font color='$so'><div style='font-family:Verdana;font-size:smaller'>So</div></font></td>

</tr>

<tr>";



$zeile     = 1;

$spalte    = 1;

$tagnummer = 1; 





for( $y=1;$y<($monat_tage2+$anfangstag);$y++) {





if( $y < $anfangstag ){ 



echo "

 <td width='$weite' bgcolor='$bgcolor' align='center'>&nbsp;</td>"; 





} else if( $tagnummer == $tag && $monat == $dieser_monat && $jahr == $dieses_jahr){



echo "<td width='$weite' bgcolor='$heute' align='center'><div style='font-family:Verdana;font-size:smaller'>$tagnummer</div></td>"; $tagnummer++;



} else { 



echo "<td width='$weite' bgcolor='$bgcolor' align='center'><div style='font-family:Verdana;font-size:smaller'>$tagnummer</div></td>"; $tagnummer++;



}





$temp = gettype($spalte/7);





if( $temp == "integer" && $y<($monat_tage2+$anfangstag-1)) {



echo "</tr>\n<tr>";



$zeile++;



}



$spalte++;





}





$ende = $zeile * 7; 

$rest = ($ende - $spalte) + 1 ; 



if($rest >= "7" ) { 



$rest = 0 ; }





for( $r=0; $r<$rest; $r++) { echo "<td width='$weite' bgcolor='$bgcolor' align='center'>&nbsp;</td>"; }



echo "</tr></table>";







?>

ich frage mich bis heute was sie an diesem Script auszusätzen haben -.-
Hatte gute grundkenntnisse im scripten und programmieren und einen guten abschluss -.-
naja auch egal , ich finde das Script schön , evtl. kannst du was damit anfangen

**codec** · 03.12.2005 22:28

Zitat von dadie

Also , ich habe damals für eine Bewerbung als IT - System Elektroniker ein Kalender Script gebaut.

Mal wenig Off-Topic, aber wozu schreibst du als IT-Systemelektroniker ein Script und legst das der Bewerbung bei?
Das ist absolut nicht was man als IT-Syselektroniker macht. Das wäre eher Fachinformatiker/Anwendungsentwicklung. o_O".

**dadie** · 04.12.2005 18:56

Zitat von Codec

Mal wenig Off-Topic, aber wozu schreibst du als IT-Systemelektroniker ein Script und legst das der Bewerbung bei?
Das ist absolut nicht was man als IT-Syselektroniker macht. Das wäre eher Fachinformatiker/Anwendungsentwicklung. o_O".

Um grundwissen vorzuzeigen

Die Sysis bei uns in der Plüscheetage 2 (wir sind in 1 \o/) machen auch Script und Programmier sprach in den ersten zwei jahren..

Auserdem muss man sich doch irgentwie hervorheben.
Auf der CD waren noch einige anderre Scripte -.-
Und sogar meine UVD reine ;_;

**Coras** · 10.02.2006 17:47

Gut, für das Problem hab' ich die Lösung nicht mehr gebraucht - es gibt sie aber doch.

Und zwar genau hier: http://homepage.ntlworld.com/bobosola/pngtest.htm
Das ganze ist ein Javascript, gibt's aber auch in PHP:
http://koivi.com/ie-png-transparency/

Also, wer's braucht... =)

Thema: ... IE (+ 24Bit PNGs mit Javascript?)

Themen-Optionen

Anzeige

... IE (+ 24Bit PNGs mit Javascript?)

Berechtigungen