Mysteriöses Problem mit Skalierung von Bildern

Hallo,

ich habe das Problem das auf der unten angegebenen Seite die runden Buttons vom Hauptmenü in einigen Browsern unscharf und kantig dargestellt werden. Dieses Problem tritt z.B. im IE7, Konqueror und allen Opera-Versionen auf. In Firefox und IE8 besteht dieses Problem nicht.
Die Originalgröße der Buttons beträgt 100x100. Solange man mit der Maus nicht über einen Button fährt, sind die Buttons auf 60x60 runterskaliert. Wenn man mit der Maus über einen Button fährt, wird dieser in Originalgröße, also 100x100 angezeigt, wo er plötzlich nicht mehr kantig und wellig ist. Muss also irgendwie mit der Skalierung zusammenhängen.

Hab echt überhaupt keine Ahnung mehr woran es liegen könnte.
Das ganze ist ein pures CSS-Menü ohne Javascript-Schnickscknack oder oder so.

Ich hab schon folgendes ohne Erfolg probiert:
- statt png-Dateien mal mit gif und jpg probiert
- statt RGB-Farben CMYK-Farben benutzt
- den Button gefärbt (irgendjemand meinte mal, dass einige Browser Probleme haben mit Bildern, bei denenn der Grau-/Silberanteil sehr hoch ist.
- das Bild graugestuft

Hier mal der CSS-Code, der für die Darstellung der Buttons verantwortlich ist:

Code:

.expand-up ul li a img {
  width:60px;
  height:60px;
  position:relative;
  border:none;
}

.expand-up ul li:hover a img {
  width:100px;
  height:100px;
  top:-50px;
}

Weis da jemand weiter? Hab echt überhaupt keine Ahnung mehr.
Danke.

 

Meinst du die? ->

 

Hoppla ... da hatte ich wohl was vergessen.

Hier die Seite:
http://www.corona-gehren.de/main

 

Das Original 100x100 wird ja verkleinert 60x60 dargestellt. Is normal.

Inwiefern das browserabhängig ist, entzieht sich meiner Kenntniss.
Die 60er separat erstellen?

 

Was meinst du mit die 60er separat einstellen?

 

Ja, würde ich auch machen. Dadurch umgehst du die Probleme. Separat erstellen heißt, mit einem Grafikprogramm 60x60 draus machen, hochladen und dann per Mouseover von 60x60 auf 100x100 umschalten. Damit umgehst du Browserdarstellungsprobleme.

Ich würde den Bildern auch von vornherein mehr horizontalen Platz geben. Dann fällt das hin- und herspringen der Zeile weg.

 

OK, dass mit den 60ern werd ich so machen. Müsste ich dann glaube ich direkt per CSS zwei verschiedene Bilder aufrufen mit background-image:... und dann für das eigentliche Bild im html-Code ein blank.gif von 0x0px festlegen.

Doch das mit dem Hinundherspringen der Zeile musst du mir nochmal erklären. Versteh ich nicht. Das Menü sollte eigentlich in allen Browsern (bis auf IE6 und K-Meleon und SeaMonkey) so funktionieren wie vorgesehen. Dieses Problem mit dem Hinundherspringen hab ich noch nirgends beobachtet. Welchen Browser hast du genutzt?

 

Ich nutze den Firefox3.5.3. Was passiert denn bei dir, wenn du erstmalig auf die Bottons mit dem Mauszeiger gehst? Die Zeile wird breiter, um 40 Pixel halt. Das meine ich.

Leider kann man hier kein (noch nicht mal ein 200kB) Video hochladen. Wenn du mir ne Mailaddy zukommen lässt, schicke ich dir dieses Video. Dann siehst du was ich meine.

 

Ok, habs schon. Zumindest hallewegs.

 

Ah, perfekt. Sieht doch viel besser aus, oder? Glückwunsch.