Godfather: Verschachtelte DIVS: IE7: filter:alpha schneidet inneren DIV ab

SELF-Forum

Verschachtelte DIVS: IE7: filter:alpha schneidet inneren DIV ab

Godfather
– Informationen zu den Bewertungsregeln

Hallo,
bin ein wenig verzweifelt. Es geht um folgendes.

Ein Menü soll mit Hilfe von DIVs erzeugt werden. Das ist soweit auch kein Problem. hierzu werden verschachtelte DIVs verwendet. Für jeden Unterpunkt geht ein neuer DIV auf.

So, jetzt zum Problem: Dieses Menü soll mit dem Hintergrudn verschmelzen. Also wird auf den Parent-DIV ein Alpha-Filter gelegt.

Im Firefox klappt das ganz gut. Sieht auch toll aus.
Im Internet Explorer haut das nicht hin.
Während das Menü ohne den Filter klappt, werden die Child-DIVs bei eingeschaltetem Fenster einfach an der "Grenze" des Paren-DIVs abgeschnitten.

Mit Overflow: visible kann man leider nichts erreichen.

Hier mal ein kurzes Besispiel, dass den gleichen Fehler verursacht:

  
<html>  
  <head>  
  </head>  
  <body>  
    <div id="Div1" style="background-image: url(bg.jpg); position: absolute; top: 50px; left: 50px; width=1024px; height=768px; filter:Alpha(opacity=70); -moz-opacity:0.7; opacity: 0.7; overflow: visible;">  
      <div id="Div1" style="background-image: url(bg.jpg); position: absolute; top: 50px; left: 50px; width=1024px; height=768px;">  
      </div>  
    </div>  
  </body>  
</html>

Ohne den Filter sind zwei Bilder überlappend auf dem Schirm. Mit Filter wird das zweite Bild (das ich etwas nach rechts verschoben habe) einfach an den Grenzen des ersten DIVs geschnitten.

Kann mir da jemand helfen?

Grüße

Godfather

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Verschachtelte DIVS: IE7: filter:alpha schneidet inneren DIV ab

    Godfather
    – Informationen zu den Bewertungsregeln

    Sorry für den Doppelpost - die ID des zweiten DIVs ist natürlich Div2.

    Vielen Dank

    Godfather

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Verschachtelte DIVS: IE7: filter:alpha schneidet inneren DIV ab

    Gernot Back
    – Informationen zu den Bewertungsregeln

    Hallo Godfather,

    wenn ich das richtig beobachte, gibt es kein Problem mit abgeschnittenen Kindelementen, wenn du nicht ausgerechnet dasselbe Element in seiner Transparenz definierst, das du auch absolut positionierst:

    Leiste dir also ruhig noch ein drittes verschachteltes DIV-Element für den IE. (Für Netscape6/7 und ältere Mozillas nimmt man ja auch ein weiteres verschachteltes Element, da diese Browser nicht damit umgehen können, wenn ein Element gleichzeitig floatet und relativ positioniert ist.)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  
<title>Transparenztest IE</title>  
  </head>  
  <body>  
    <div id="Div1" style="position: absolute; top: 0px; left: 0px; ">  
      <div id="Div1" style="background: red; width:124px; height:168px; filter:Alpha(opacity=70); -moz-opacity:0.7; opacity: 0.7;">  
              <div id="Div3" style="background:aqua;position:relative; margin-top: 50px;margin-left: 50px;filter:Alpha(opacity=70);  width:124px; height:168px;">&nbsp;  
              </div>  
      </div>  
    </div>  
  
  </body>  
</html>

    Gruß Gernot

    --
    super me
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln