Site optimieren

[Dustin84]

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]

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]

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]

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]

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]

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]

ahja

 

[Maik]

<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]

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]

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