Überrede IE, parent-Elemente bei overflow NICHT zu vergrößern

[ie sucks]

Hallo liebe Forum-Gemeinde,

wenn ich eine Blockelement-Schachtelung habe, also z.B. <div><div></div></div>,
und das Kind- das Elternelement überlappt, also z.B. einen größeren
height-Wert hat, dann passt der IE die Größe des Eltern- der des Kindelements an.
Das will ich nicht. Es soll so aussehen, wie in anderen Browsern bei dem
overflow-default-Wert "visible".

Dachte, 1 Std googlen sei mehr als ausreichend, eine Lösung zu finden, aber
alle Tipps, die ich fand, waren entweder, position:absolute oder jquery zu
verwenden. Nun will ich aber weder meine Elemente aus dem Fluss ziehen (dann
trockneten sie zu schnell aus), noch auf jquery zurückgreifen müssen.

Wahrscheinlich ist dieses overflow-IE-Problem vielen bekannt, s.d. ich sehr
optimistisch bin, hier schnell Hilfe zu bekommen :-}

Vielen Dank,
ie sucks

___
Bitte nur weiterlesen, wenn Du gerade nicht weißt, wie Du Deine Zeit totschlagen sollst ;)

Ein zweites CSS-Problem: opacity-Wert wird an Kindelemente vererbt.
Die "Lösungen", die ich ergooglet hab, sind: das Kindelement
zur Adoption freigeben (absolut positionieren) oder (im Falle von Bildern)
auf png zurückgreifen.
Bei mir geht es um eine form in einer div (beide "Lösungen" kommen nicht in
Frage).
Mein bisheriger Ansatz: Ein Vorgänger-Kindelement einbauen, diesem den
opacity-Wert zuschreiben und anschließend das "eigentliche" Kindelement nach
oben verschieben:
Bsp.:

  
<div style="background: transparent;">  
 <div style="position: relative; height: 100px; background-color: green; opacity: 0.8;"></div>  
 <form style="position: relative; top: -100px;">  
  //...  
 </form>  
</div>  

Ist diese Lösung gut? Oder gibt es noch eine deutlich bessere, von der ich
nichts weiß - bzw. verursacht meine irgendwelche Probleme, die ich nicht erahne?

Danke für's Zeit-Nehmen :) Lieben Gruß

[dave]

Hi,

bei deinem ersten Problem kann ich dir leider nicht helfen, da ich keine andere Lösung als das bereits genannte position:absolute kenne.

Zu deinem zweiten Problem:
Wenn es dir nur darum geht einen halb-transparenten Hintergrund zu haben kannst du background-color:rgba(...) verwenden.

Für IE gibts dafür nen filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);

~dave

[ie sucks]

Hey Dave,

danke für die schnelle und hilfreiche Antwort. Hab das gerade ausprobiert,
die rgba-Angabe wird nicht an das Kindelement vererbt - wunderbar :)
Ich hoffe mal, background-color: rgba(...) und der IE-Filter bedienen alle
Browser

Lieben Gruß

[Cheatah]

Hi,

die rgba-Angabe wird nicht an das Kindelement vererbt - wunderbar :)

nur zur Klarstellung: opacity wird _ebenfalls_ nicht vererbt. Alle Kinder haben opacity:1.0 als Wert. Durch die Eigenschaft wird jedoch das _Element_ teiltransparent gemacht - nicht nur der Hintergrund!

Ich hoffe mal, background-color: rgba(...) und der IE-Filter bedienen alle
Browser

Nun, zumindest ist rgba() Teil der Fähigkeiten des IE9, was hoffen lässt.

Cheatah

[ie sucks]

Hm, da weiß wohl niemand so richtig weiter...
Hab noch etwas experimentiert und gegooglet:
Lösung für IE8: einen nicht-veralteten DOCTYPE verwenden;
Lösung für IE7: der DOCTYPE muss strict sein;
Lösung für IE6:

  
                * html .parent {  
                   overflow:hidden;  
                }  
                * html .child {  
                   position:relative;  
                }  
                /* sieht schon irgendwie absurd aus, oder? */  

Selbst habe ich nur IE8 getestet (hatte in meiner "Schmierzettel-HTML" den
DOCTYPE vergessen). Die Lösungen für 6 und 7 habe ich im Netz gefunden.

Lieben Gruß,
ie really does suck

p.s.: für Opera: auch hier auf DOCTYPE achten!