Prob: Div-Container wird im Internet Explorer nicht angezeigt!!!

[Martin S.]

Hallo Forumuser,

ich habe ein Problem mit einem Div-Container in meiner (bald)Homepage, der im Firefox komplett richtig angezeigt wird und im Internet Explorer (6) nicht erscheint...

Also meine (Test-)Homepage http://beta.martin-schalk.eu der Container hat die id="schatten" das (cs)stylesheet ist unter http://beta.martin-schalk.eu/style.css , das stylesheet für den Internet Explorer unter http://beta.martin-schalk.eu/ie.css .

Hier ein Auszug aus dem Stylesheet style.css:

#schatten {
background-color:#000000;
opacity:0.2;
-moz-opacity:0.2;
position:absolute;
right:1px;
left:-2px;
top:-1px;
bottom:2px;
}

und aus dem ie.css:

#schatten {
filter:Alpha(opacity=20);
}

Wenn mir einer mit diesem Problem helfen könnte wäre ich sehr dankbar...

Gruß Martin

[Martin S.]

Edit:

Eine Lösung mit Javascript habe ich bereits gefunden, aber das ist nicht das gelbe vom Ei, weil man erst die Internetoptionen im IE umstellen muss bis das Script geladen wird und ich 2. kein Fan von Scripts im Design bin.

Da ich den Schatten dynamisch an den Inhalt des Vordergrund-Divs (id="ecken") anpassen soll, stelle ich die Weite fest ein und lasse die Höhe des Schatten nachdem die Höhe des Vordergrund-Divs ausgelesen ist anpassen :

<script type="text/javascript">  
<!--  
onload=function()  
{var divh = document.getElementById('ecken').offsetHeight;var target = document.getElementById('schatten');    target.style.height = ( divh - 32 ) + "px";}  
//-->  
</script>

Eine andere Lösung (siehe Positionierung im Firefox: http://beta.martin-schalk.eu ) wäre mir lieber...

[Martin S.]

Lösung für IE durch Javascript

[Detlef G.]

Hallo Martin,

du bindest die Eckgrafiken als <img> ein. Sie gehören aber zum Layout und nicht zum Inhalt (schau dir deine Seite mal ohne CSS an) und sollten deshalb auch nicht im HTML sondern im CSS erscheinen.
Auch wenn die Variante, die ich für diesen Zweck verwende, dann an eine Div-Wüste erinnert, sind mir ein paar zusätzliche neutrtale Elemente lieber, als inhaltstragende, die nur dem Layout dienen.

Schau dir mal Box mit runden Ecken bei ungleichmäßigem Seitenhintergrund an. Dazu könnten dann die rbox-Grafiken einfach den Schatten mit enthalten.

Leider gibt es dabei dann auch noch Probleme mit dem IE6, weil dieser keine teiltransparenten PNGs unterstützt, so dass du bei ihm auf den transparenten Schatten verzichten müsstest (keiner oder Schalgschatten) oder mit dem AlphaImageLoader arbeiten müsstest.
Tippst zu teiltransparenten Hintergründen findest du in dem Artikel Teiltransparente Bereiche.
Vielleicht wäre sogar die einfache Variante mit gerastertem GIF für IE<=6 akzeptabel, wenn es nur um den Schatten geht.

Auf Wiederlesen
Detlef

[Martin S.]

Hallo Martin,
[...]
Leider gibt es dabei dann auch noch Probleme mit dem IE6, weil dieser keine teiltransparenten PNGs unterstützt, so dass du bei ihm auf den transparenten Schatten verzichten müsstest (keiner oder Schalgschatten) oder mit dem AlphaImageLoader arbeiten müsstest.
Tippst zu teiltransparenten Hintergründen findest du in dem Artikel Teiltransparente Bereiche.
Vielleicht wäre sogar die einfache Variante mit gerastertem GIF für IE<=6 akzeptabel, wenn es nur um den Schatten geht.

Auf Wiederlesen
Detlef

Hallo Detlef,

mit den teiltransparenten Bereichen habe ich (inzwischen) keine Probleme mehr, da ich das PNG-Behavior von WebFX benutze siehe: WebFX PNG-Behavior, sonst werde ich mich mal dranmachen deine Lösung umzusetzten;

ich habe nur noch 2 Fragen: Kann ich anstatt der gif-Bilder png-Bilder für die "runden Ecken" nehmen?
und 2. Wirkt sich das nicht stark auf die Ladezeit der Seite auf wenn ich so große Grafiken verwende?

[Detlef G.]

Hallo Martin

ich habe nur noch 2 Fragen: Kann ich anstatt der gif-Bilder png-Bilder für die "runden Ecken" nehmen?

Selbstverständlich, in welchem Format die Hintergrundgrafiken gespeichert sind ist unerheblich.

und 2. Wirkt sich das nicht stark auf die Ladezeit der Seite auf wenn ich so große Grafiken verwende?

Machen wir mal eine ganz grobe Überschlagsrechnung:
Jetzt braucht du für #content neun Grafiken mit zusammen rund 4,5KB. Die Kommunikation mit dem Server macht pro Resource grob etwa 1KB, zusammen also etwa 13,5 KB. Zur reinen Übertragungszeit kommt dabei noch die Zeit, die der Server jeweils zum antworten benötigt.

Bei der anderen Variante werden nur vier Grafiken benötigt. Alle zusammen als 24bit-PNG werden grob geschätzt vielleicht 15 KB benötigen. Dazu dann noch die Serverkommunikation mit vier mal etwa 1 KB, zusammen etwa 19 KB.
Es wäre also nicht wirklich erheblich, wenn man dabei bedenkt, dass die restlichen Grafiken deiner Seite mit knapp 80 KB zu Buche schlagen.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

mit den teiltransparenten Bereichen habe ich (inzwischen) keine Probleme mehr, da ich das PNG-Behavior von WebFX benutze

Dir ist aber klar, dass gerade IEs am häufigsten auf hoher Sicherheitsstufe genutzt werden?

freundliche Grüße
Ingo