Verschobener Tooltip und unscharfe Buttons in Opera

[hinkel11]

Hallo,

ich bin gerade dabei meine Homepage für alle gängigen Browser fit zu machen und habe dabei 2 mehr oder minder schwere Fehler entdeckt, die in Opera auftreten, jedoch nicht im Internet Explorer und auch nicht in Firefox.

1. Problem:
Auf dieser Seite, http://www.corona-gehren.de/main, sehen die Buttons vom Hauptmenü (also die runden Buttons die größer werden, wenn man mit der Maus drüberfährt) seltsam verpixelt und unscharf aus. Woran liegt das? Hat das evtl. damit zu tun, dass es png-Grafiken sind?

2. Problem:
Auf dieser Seite, http://www.corona-gehren.de/main/index.php?Itemid=168, gibt es Probleme bei der Position des anzuzeigenden Tooltips. Dieser sollte wie in FF und IE, immer rechts oben vom jeweiligen Bild angezeigt werden. Klappt aber in Opera irgendwie nicht, ausser für die erste Bildreihe.

Wäre super wenn mir dabei jemand weiterhelfen könnte?

Die Suchfunktion wurde genutzt. Doch speziell zu diesen Problem wurde nichts gefunden.

 

[Maik]

Hi,

dass die Grafiken verpixelt wirken, liegt wohl daran, dass sie in ihrer vorliegenden Dimension (122*120px) vom Browser auf eine Breite von 30px herunterskaliert werden sollen.

Ich hab hier den Opera 9.6x, der die Tooltips wie gewünscht positioniert:



mfg Maik

 

[hinkel11]

Das seltsame mit den verpixelten Grafiken ist nur, dass auch im nicht skalierten Zustand die Buttons ziemlich kantig aussehen und wenn man mit der Maus drüberfährt, das Innere der Buttons glasklar dargestellt wird und nur die runden Formen wellig sind. Wie gesagt, IE und FF machen da keine Probleme.

Das 2. Problem taucht dann wohl nur in Opera 10 auf. Mir fiel gerade auf, dass der Tooltip immer woanders angezeigt wird, d.h. wenn ich den Scollbalken rechts nach oben und unten bewege, dann passiert es, dass der Tooltip woanders auftaucht als zuvor.
Hast du auch mal probiert, wie sich der tooltip in Opera 9.6 ab der 2. Bilderreiche verhält?

 

[Maik]

Das seltsame mit den verpixelten Grafiken ist nur, dass auch im nicht skalierten Zustand die Buttons ziemlich kantig aussehen

Kann ich bei mir nicht bestätigen:



mfg Maik

 

[CPoly]

Bei mir (Opera 9.64) sind alle Reihen falsch, sobald man scrollt. Wenn man ganz oben ist, sitzen alle korrekt.
Ich erinnere mich, dass ich das gleiche Problem bei meinen Tooltips hatte, habe es aber irgendwie gelöst. Ich suche mal danach.

 

[Maik]

Das 2. Problem taucht dann wohl nur in Opera 10 auf. Mir fiel gerade auf, dass der Tooltip immer woanders angezeigt wird, d.h. wenn ich den Scollbalken rechts nach oben und unten bewege, dann passiert es, dass der Tooltip woanders auftaucht als zuvor.

Möglicherweise muß das im HTML-Code übergeordnete Element noch relativ positioniert werden, damit sich die absoluten Positionsangaben der Tooltips darin relativ verhalten, und sich nicht auf die Browserfensterränder beziehen.

mfg Maik

 

[hinkel11]

Ok, wenn ich das Bild an sich öffne und einzeln anzeigen lasse, dann siehst bei mir auch in Ordnung aus. Aber wenn ich mir die beiden Screenshots (s. Anhang) anschaue, ist dort schon ein Unterschied zu sehen.

 

[Maik]

Möglicherweise muß das im HTML-Code übergeordnete Element noch relativ positioniert werden, damit sich die absoluten Positionsangaben der Tooltips darin relativ verhalten, und sich nicht auf die Browserfensterränder beziehen.

Versuch's mal hiermit:

#content650 {
position:relative;
}

mfg Maik

 

[hinkel11]

Klappt leider nicht, weder dass mit dem mainwrap noch das mit dem content650.

Ich poste hier einfach nochmal die CSS vom tooltip. Vielleicht lässt sich so eher was erkennen:

a.tooltip {
        text-decoration: none;
}

a.tooltip:hover{
        padding: 0;
        border:none;
	position: relative;
}

a.tooltip span {
        display: none;
        position: absolute;
        background-color: #000000;
        border: 1px solid #d9d9d9;
        color: black;
        text-decoration: none;
        width: 200px;
        filter:alpha(opacity=90);
        opacity: 0.9;
        -moz-border-radius:3px;
        bottom: 100px;
        left: 60px;
        text-align: left;
	z-index: 100 !important;
}

a.tooltip:hover span {
        display: block;
	z-index: 100 !important;
}

 

[Maik]

Und hiermit?

a.tooltip {
        text-decoration: none;
        position:relative;
}

mfg Maik