CSS Positionierungsprobleme mit Safari und Opera

[cyberian90]

Hi,

ich versuche verzweifelt einen "ScrollToTop"-Button an einer bestimmten Position anzeigen zu lassen.
Ich habe ein mittig platzierten Container, der den Inhalt meiner Seite umschließt. Dieser Container ist 1024px breit, der Abstand links und rechts zum Bildschirmrand ist entsprechend mit margin: 0px Auto; eingestellt.

Der Button soll nun mit Position: fixed; immer am unteren rechten Rand meines Containers angezeigt werden. Ich habe das für IE, FF und Chrome so gelöst (funktioniert einwandfrei):

#scrollToTop
{
width: 38px;
height: 38px;
text-align: center;
background: whiteSmoke;
background-repeat: no-repeat;
font-weight: bold;
color: #444;
text-decoration: none;
position: fixed;
bottom: 12px;
right: -moz-calc(50% - 511px);
right: -webkit-calc(50% - 511px);
right: -o-calc(50% - 511px);
right: calc(50% - 511px);
display: none;
background: url('img/top.png') no-repeat;
}

Lediglich in Safari und in Opera wird mein Button partout am linken Bildschirmrand, 12px vom unteren Rand entfernt angezeigt. Hat jemand eine Idee, wie sich das Problem lösen lässt?

 

[FlashZange]

Das erscheint mir unnötig kompliziert.
Wenn du weißt, dass dein container 1024px breit ist, weißt du ja auch die 50% davon. Warum also Berechnungen, wenn du genau so gut einfach right: 1px; schreiben kannst?

Warums nicht geht, weiß ich allerdings auch nicht, sollten laut caniuse alle unterstützt sein.
Stell mal den Befehl ohne Präfix nach oben, vielleicht machts nen Unterschied, ist aber nur geraten.

 

[Myhar]

Auch mir erscheint die Variante mit dem Berechnen unnötig kompliziert, gibt es hier keine einfachere Lösung?
btw:

Stell mal den Befehl ohne Präfix nach oben

Nein das mach nicht, der Befehl ohne präfix kommt immer als letztes. Ohne Ausnahme.

 

[cyberian90]

Das erscheint mir unnötig kompliziert.
Wenn du weißt, dass dein container 1024px breit ist, weißt du ja auch die 50% davon. Warum also Berechnungen, wenn du genau so gut einfach right: 1px; schreiben kannst?

Es geht ja nicht um 50% von 1024px, sondern um 50% der aktuellen Fensterbreite. Ist das Browserfenster z.B. 1600px breit, dann muss die Angabe bei right 50% der Fensterbreite = 800px - die halbe Containerbreite (512px) = 288px lauten. Bei einer Fensterbreite von 1250px wären es dann entsprechend 113px usw.

Es bleibt also ja nichts anderes übrig, als es kalkulieren zu lassen, oder sehe ich das falsch?

Der Button soll ja schließlich nicht in der unteren rechten Ecke des Fensters, sondern am rechten Rand meines Containers und dem unteren Ende des Browserfensters fixiert angezeigt werden.

 

[FlashZange]

Und wenn du statt fixed absolute verwendest und der Button das letzte Element im umschließenden Container ist?
Dann hast du natürlich den Nachteil, dass der Button nicht unten am Browserfenster klebt, wenn die Website kürzer als der Viewport ist. Würde mir aber eh nicht gefallen, stell dir vor, die Page ist nur halb so lang wie der Viewport und ganz unten sitzt der Button verloren im ungestylten Weiß des Browsers

Das mit dem Präfix war ein Schuss ins Blaue, das Schlimmste was passieren kann, ist, dass ein veralteter Befehl mit Präfix den korrekten überschreibt. Ja, vermutlich ein schlechter Rat.

 

[cyberian90]

Wenn die Seite dann aber länger als der Viewport ist, dann wird der Button erst angezeigt, sobald man ganz unten ist. Ich habe jedoch eine jQuery-Funktion geschrieben, die den Button einblendet, sobald man mehr als 100px nach unten scrollt.

Das ist also so leider keine Option... ;-(