Hi, habe Probleme mit "overflow:hidden" im IE.
Link zum Problem.
also, die Boxen werden bei Klick auf den Link unten nach oben geschoben. Benutze dazu die scriptaculous-bibliothek. Der Hintergrundcontainer wurde auf "overflow:hidden" gesetzt. Beim Move soll eben der oberste Kasten unsichtbar weiter nach oben geschoben werden. Quasi ist das dann der overflow, der versteckt wird.
Im Firefox und baugleichen engines läufts. Im IE natürlich nicht.
Nahc einer eingehenden Recherche stellte ich fest, dass, sobald ich den doctype von strict auf transitional stelle ein positives Ergebnis zu verzeichnen ist.
Allerdings muss das Teil nachher in mehrere im "Strict"-Mode umgesetzte Seiten implementiert werden. Die Umstellung auf Transitional ist aufgrund vieler fehlender css-eigenschaften einfach nicht effektiv.
Meine Frage zum Schluß: Gibt es Workarounds, overflow:hidden beim IE (sowohl 7, als auch 6 gehen nicht) zu erpressen?
Hier noch die Codeauszüge:
Danke im Vorhinein für jegliche Hilfe!
Link zum Problem.
also, die Boxen werden bei Klick auf den Link unten nach oben geschoben. Benutze dazu die scriptaculous-bibliothek. Der Hintergrundcontainer wurde auf "overflow:hidden" gesetzt. Beim Move soll eben der oberste Kasten unsichtbar weiter nach oben geschoben werden. Quasi ist das dann der overflow, der versteckt wird.
Im Firefox und baugleichen engines läufts. Im IE natürlich nicht.
Nahc einer eingehenden Recherche stellte ich fest, dass, sobald ich den doctype von strict auf transitional stelle ein positives Ergebnis zu verzeichnen ist.
Allerdings muss das Teil nachher in mehrere im "Strict"-Mode umgesetzte Seiten implementiert werden. Die Umstellung auf Transitional ist aufgrund vieler fehlender css-eigenschaften einfach nicht effektiv.
Meine Frage zum Schluß: Gibt es Workarounds, overflow:hidden beim IE (sowohl 7, als auch 6 gehen nicht) zu erpressen?
Hier noch die Codeauszüge:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<link href="cal.css" rel="stylesheet" media="screen" type="text/css" />
<script type="text/javascript" src="js/e_cal.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
</head>
<body>
<div id="umfang">
<div id="boxen_1">
sdaija
</div>
<div id="boxen_2">
sdaija
</div>
<div id="boxen_3">
sdaija
</div>
<div id="boxen_4">
sdaija
</div>
<div id="boxen_5">
sdaija
</div>
<div id="boxen_6">
sdaija
</div>
</div>
<a href="javascript:void(0)" onclick="move_them()">jsiajsija</a>
</body>
</html>
Code:
#umfang {
height:666px;
width:110px;
margin:20px 0 0 20px;
border:1px solid green;
overflow:hidden;
}
#umfang div {
width:100px;
height:100px;
border:1px solid #000;
margin:5px;
}
Code:
function move_them() {
for(i=1;i<7;i++) {
var el = $('boxen_'+i);
new Effect.Move(el, { x: 0, y: -108 });
}
}Danke im Vorhinein für jegliche Hilfe!
Zuletzt bearbeitet:
