"top" UND "bottom" in absolut positionierten Elementen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self "top" UND "bottom" in absolut positionierten Elementen Thu, 29 Dec 05 03:02:56 Z https://forum.selfhtml.org/self/2005/dec/29/top-und-bottom-in-absolut-positionierten-elementen/910974#m910974 https://forum.selfhtml.org/self/2005/dec/29/top-und-bottom-in-absolut-positionierten-elementen/910974#m910974 <p>Hi,</p> <p>ich habe eine XHTML-Seite mit eine paar Bildern am Rand. Der eigentliche Inhalt befindet sich in einem Div-Layer, der wie folgt formatiert ist:</p> <p>div#content<br> {<br>   position:absolute;<br>   left:90px;<br>   top:90px;<br>   right:2px;<br>   bottom:2px;<br>   padding:5px;<br>   max-width:750px;<br>   border:1px solid #C83200;<br>   background:#FFE6DD url(background.png) no-repeat;<br>   overflow:auto;<br> }</p> <p>Wie man sieht soll er 90px Abstand nach oben haben und nach unten (fast) bis zum Ende des Client-Bereichs des Browsers reichen.<br> Im Firefox funktioniert das perfekt.<br> Für den IE habe ich mir immerhin einen Workaround basteln können:</p> <p>div#content<br> {<br>   width:750px;<br>   height:expression((document.body.clientHeight-92)+"px");<br>   width:expression((document.body.clientWidth-92)<750?(document.body.clientWidth-92):750+"px");<br> }</p> <p>Aber Opera (8.5) will nicht so richtig. Der Browser scheint Probleme mit der Anagabe von "top" UND "bottom" zu haben. Das Verhalten des Div-Layers ist ziemlich unberechenbar.</p> <p>Nun meine Frage: Lässt sich die Geschichte auch Opera-kompatibel lösen, bzw. gibt es einen Workaround für Opera? Und haben andere Browser ebenfalls solche Probleme?<br> Leider habe ich auf diese Fragen trotz Suche noch keine Antworten gefunden.</p> <p>Schon mal Danke für eure Antworten!</p> "top" UND "bottom" in absolut positionierten Elementen Thu, 29 Dec 05 09:51:38 Z https://forum.selfhtml.org/self/2005/dec/29/top-und-bottom-in-absolut-positionierten-elementen/910975#m910975 https://forum.selfhtml.org/self/2005/dec/29/top-und-bottom-in-absolut-positionierten-elementen/910975#m910975 <blockquote> <p>Hi,</p> </blockquote> <blockquote> <p>Nun meine Frage: Lässt sich die Geschichte auch Opera-kompatibel lösen, bzw. gibt es einen Workaround für Opera?</p> </blockquote> <p>Sei froh, daß Du Opera nicht mit älteren Versionen getestet hast, diesbzgl. hat Opera schon immer Probleme gehabt, die sich in neueren versionen allerdings stark vermindert haben.<br> Warte noch ein paar Jahre, dann wird Opera auch ein brauchbarer Browser werden, die Jungs sind auf einen positiven Weg.</p> <p>Gruß<br> Avalon</p> "top" UND "bottom" in absolut positionierten Elementen Thu, 29 Dec 05 12:54:17 Z https://forum.selfhtml.org/self/2005/dec/29/top-und-bottom-in-absolut-positionierten-elementen/910976#m910976 https://forum.selfhtml.org/self/2005/dec/29/top-und-bottom-in-absolut-positionierten-elementen/910976#m910976 <blockquote> <blockquote> <p>Hi,</p> </blockquote> <blockquote> <p>Nun meine Frage: Lässt sich die Geschichte auch Opera-kompatibel lösen, bzw. gibt es einen Workaround für Opera?</p> </blockquote> <p>Sei froh, daß Du Opera nicht mit älteren Versionen getestet hast, diesbzgl. hat Opera schon immer Probleme gehabt, die sich in neueren versionen allerdings stark vermindert haben.</p> </blockquote> <p>Ich teste mit Opera erst seit der 8. Version und habe bis jetzt noch nie Probleme mit falsch interpretiertem CSS gahabt.</p> <p>Des Verhalten des Div-Layers ist so unberechenbar, dass manchmal nirgens Scrollbalken angezeigt werden, obwohl der Inhalt nicht vollständig sichtbar ist. Und zumindest der Inhalt sollte auch im Opera weiterhin zugänglich sein.<br> Deshalb bin ich jetzt dazu übergegangen, NUR für Opera die "bottom"-Angabe über folgenden CSS-Hack zu ändern:</p> <p>@media all and (min-width:0px)<br> {<br>   div#content<br>   {<br>     bottom:auto;<br>   }<br> }</p> <p>Wisst ihr, ob wirklich nur Opera dieses Konstrukt interpretiert?<br> Und wird die "top"-"bottom"-Angabe von anderen Browsern korrekt interpretiert?</p>