nicht angemeldet
Hi,
Damit die Lösung für mein eigenes Problem nicht untergeht, möchte ich sie in einem eigenen Thread mit verständlicherem Titel nocheinmal erklären... nur für den Fall, daß sich jemand (außer mir) für dieses Problem interessiert.
Es ging um das Problem, ein (Hintergrund)Bild auf Viewporthöhe zu skalieren, allerdings abzüglich 100px für einen Kopfleiste. In standardkonformen Browsern kann das durch die Angabe von
"top: 100px; bottom: 0px;"
erreicht werden, allerdings ignoriert der IE bekanntlich den zweiten Eckpunkt.
Die Lösung, die ich gefunden habe, kommt gänzlich ohne Scripting aus und verwendet lediglich einen CSS Hack, um dem Internet Explorer anderen Code zuzuführen:
Die CSS-Datei enthält folgende Angaben:
/* code version for standard compliant browsers (e.g. Mozilla) */
#container {
position: absolute;
top: 100px;
bottom: 0px;
}
#container img.background {
height: 100%;
}
/* code only for IE; *html-hack rules out non-IE browsers */
* html #container {
top: 0px;
height: 100%;
overflow: hidden;
}
* html #container img.background {
border-top: 100px solid #FFFFFF;
}
Die HTML-Datei enthält dann ganz einfach folgendes:
<div id="container">
<img class="background" src="backgroundpic.gif">
</div>
Im Klartext: Ich verwende das inkorrekte Box-Model des IE, um seine inkorrekte Handhabung der kombinierten top/bottom-Angabe zu umschiffen: Ich definiere einfach einen border-top in der selben Höhe wie die gewünschte Kopfleiste (die eigentliche Kopfleiste lege ich dann mittels z-order drüber). Da der IE den border zur height hinzurechnet, ergibt die Angabe "height: 100%;" den gewünschten Effekt.
Unklar ist mir bloß noch, ob das nun bei allen relevanten Browsern funktioniert... kann mir dazu jemand näheres sagen?