# Site optimieren



## Dustin84 (26. Mai 2007)

Hallo,

ich würde meine Site gerne für den IE optimieren, da sie komplett falsch angezeigt wird.

-> http://home.arcor.de/jan-dustin/index.htm

Das erste Problem wäre, dass der IE die PNGs nicht korrekt anzeigt. Ist die Löung des Problems umfangreich oder kann man dies recht schnell erledigen ? Und wie ?

Gruß
Dustin


----------



## Maik (26. Mai 2007)

Hi,

dass die Vorgängerversionen des IE7 transparente PNGs nicht unterstützen, hatte ich dich schon in deinem Thread IE und PNGs? & RollOver Image darauf hingewiesen und einen Link mit einem Workaround genannt.

Neben dieser Möglichkeit kannst du es auch auf diese Weise lösen, wie sie in dem Artikel http://ff-webdesigner.de/webdesign-tutorial-transparenz-homepage.html erläutert wird, Sichwort: "AlphaImageLoader".


----------



## Dustin84 (29. Mai 2007)

ok aber so ganz versteh ich das noch nicht, was ich wohin machen soll:
http://ff-webdesigner.de/webdesign-tutorial-transparenz-homepage.html

Kannst mir mal ein Beispiel nennen, wie ich es bei meiner Site einrichten müsste ?
http://home.arcor.de/jan-dustin/index.htm
http://home.arcor.de/jan-dustin/style.css

Gruß
Dustin


----------



## Maik (30. Mai 2007)

Hi,

hierfür musst du nach dem "normalen" Stylesheet einen Conditional Comment für die Vorgängerversionen des IE7 setzen und darin ein Stylesheet notieren, in dem die entsprechenden Selektoren "wiederholt" werden, die ein PNG-Hintergrundbild erhalten.

Hier mal ein vereinfachtes Beispiel für ein DIV mit der ID *box*:


```
<style type="text/css">
div#box {
background-image: url(pfad/zur/grafik.png);
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
div#box {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pfad/zur/grafik.png');
}
</style>
<![endif]-->
```
Wenn es sich hierbei um ein Hintergrundbild handelt, das in der X- oder Y-Achse wiederholt werden soll, wird der Parameter *sizingMethod=scale* hinzugefügt:


```
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='pfad/zur/grafik.png');
```


----------



## Dustin84 (30. Mai 2007)

kannst du das mal anhand meiner Headgrafik meiner Site erklären ? (Das oben mit p11)

Ich versuchs selber mal:

Html:


```
<div id="header"></div>
```

Css:


```
#header { 
height: 297px;
background-image: url('header.png');
background-repeat: no-repeat;
background-position: center top;
position: relative;
top: -18px;

<!--[if lt IE 7]>
#header { 
height: 297px;
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header.png');
background-repeat: no-repeat;
background-position: center top;
position: relative;
top: -18px;
<![endif]-->

}
```


----------



## Maik (30. Mai 2007)

Hm, ich hab dir doch das Grundprinzip gezeigt - im zweiten Stylesheet für die älteren IE-Versionen wird nur background-image:none und die filter-Eigenschaft deklariert, mehr nicht.

Der Conditional Comment wird außerdem nicht innerhalb des "normalen" Stylesheets, sondern anschliessend notiert - vergleiche hierzu nochmal meinen gezeigten Quellcode.


----------



## Dustin84 (30. Mai 2007)

ahja


----------



## Maik (30. Mai 2007)

```
<style type="text/css">
#header { 
height: 297px;
background-image: url('header.png');
background-repeat: no-repeat;
background-position: center top;
position: relative;
top: -18px; 
</style>
<!--[if lt IE 7]>
<style type="text/css">
div#header {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header.png');
}
</style>
<![endif]-->
```


----------



## TchiboMann (30. Mai 2007)

http://www.tutorials.de/forum/1428185-post4.html

da steht alles was du brauchst dustin, so schwer ist das nich. Schau dir den Code in der größeren Codebox genauer an, dann siehste, was du bei deinem Code da falsch gemacht hast.

@micha
danke für den Tipp mit dem filter, ich hatte des auch schon probiert gehabt, allerdings wusst ich nich, dass man background: none; setzen muss  wahrscheinlich hatt es wohl deswegen nie bei mir geklappt 
Aber noch was andres... was meinste, lohnt es sich überhaupt noch für den IE6 zu coden? Mir ist der Aufwand ehrlichgesacht viel zu hoch, ich muss in der Regel immer ein gesondertes Stylesheed per Conditional Comment einsetzen und teilweise die dämlichsten Dinge anpassen... Bin momentan eher gewillt explizit darauf hinzuweisen, dass die Seite unter Umständen im IE6 falsch dargestellt wird... Allerdings entscheide ich da nach Art des Falls, die Firmenhomepage die ich erstellt hab ist IE6-Tauglich, weil da viele IE6 USer sind, meine Clanpage werd ich wohl ausschliesslich Gecko/IE7/Opera-Tauglich machen, alles andre ist da wohl weniger nützlich, wenn da blos 10, 15% der User IE6 nutzen... 

Oder?


----------



## Dustin84 (4. Juni 2007)

*IE macht wie immer Probleme !!*

Hallo,

ich optimere meine Site für den IE. Da ich PNGs verwende, zeigt der IE nur schrott an.
Also Lösung habe ich folgendes genommen:
http://www.tutorials.de/forum/css/268307-png-und-ie-3.html
(Beispiel: http://www.twinhelix.com/css/iepngfix/demo/ )

Nun werden meine PNGs zwar transparent angezeigt aber die RollOvers funktionieren nicht mehr, alles ist verschoben (war vorher auch so) un die Texte passen auch nicht mehr.

Wo könnte das Problem liegen ?

Meine Site:
http://home.arcor.de/jan-dustin/index.htm
http://home.arcor.de/jan-dustin/style.css

Gruß
Dustin


----------



## Maik (4. Juni 2007)

Hi,

wieso erstellst du hierfür ein neues Thema, wenn du schon zwei Threads bzgl. der PNGs am Start hast?


IE und PNGs? & RollOver Image
Site optimieren

Von daher führe ich jetzt dieses Thema der besseren Übersicht wegen mit dem zuletzt genannten zusammen.

Wenn du meine empfohlenen Links aufmerksam studiert hättest, wärst du über diesen Abschnitt gestolpert, der deine neue Frage beantworten sollte:



> *AlphaImageLoader Fehler* Es gilt allerdings noch einen folgenschweren Fehler des Internet Explorers bei Verwendung des Filters AlphaImageLoader zu umgehen. Verwenden Sie nämlich Links vor einem Hintergrund, den Sie mittels dieses Filters geladen haben, so sind diese nicht mehr benutzbar. Der Internet Explorer zeigt diese Links als normalen Text an, man kann sie nicht mehr klicken. Dieser Fehler lässt sich durch die Verwendung eines anderen Bildformats für die halbtransparente Hintrergrundgrafik umgehen: benutzen Sie am besten ausschließlich Grafiken mit einer Größe von einem mal einem Pixel. Eine genaue Abhandlung zu diesem Fehler finden sie im Internet unter daltonlp.com.
> 
> 
> Quelle: http://ff-webdesigner.de/webdesign-tutorial-transparenz-homepage.html


----------

