Safari kann Menu nicht?

[Random Gurgel]

Moin,

ich habe vor ein paar Tagen angefangen mein Portfolio anzupassen. Dabei habe ich ein Rollover Menu mit der CSS Background-Verschieb Technik erstellt. Ich habe die Seite azf Windows mit Dreamweaver geschrieben. Alles funktioniert gut in Firefox, und in Opera sowohl auf WIndows als auch auf Mac. Sogar auf Safari für WIndows gehts. Doch der Mac Safari zeigt meine Buttons in einer anderen Farbe. Dabei sind das ja Bilder! Wie schafft safari das denn bitte bilder falsch anzuzeigen?
Ich suche dringend eine LÖsung für dieses Problem.
http://demoz.ohost.de/mazing Überzeugt euch selbst

lg
Random

 

[eyecandy]

Überzeugt euch selbst

(beinahe) nichts lieber als dieses. alleine, es fehlt der code/link/whatever, um deinem wunsche nachzukommen

 

[Random Gurgel]

Huch? Da oben ist doch ein Link.
Nochmal halt : http://demoz.ohost.de/mazing

lg

 

[Doc Brown]

Also was da jetzt falsch angezeigt wird, kann ich nicht sagen, bei mir sieht es überall gleich aus.
Ich weiß nur, daß mich Werbung, die sich über die eigentliche Seite schiebt, gewöhnlich dazu veranlaßt, die Seite fluchtartig zu verlassen...

Ralf

 

[Random Gurgel]

Hi,

mit welchem Safari und welchem Mac hast du es getestet? Keine Angst, der Server dient nur als Test da ich mein Paid Space noch nicht habe .

lg

 

[Doc Brown]

Safari 3.2.1 auf dem Mac, Safari 4 Beta und IE 8 unter Windows (Parallels). Keine Unterschiede.

Ralf

 

[eyecandy]

Huch? Da oben ist doch ein Link.

muss wohl an meinem firefox liegen. ich sehe den link nicht. sorry …

 

[Random Gurgel]

Hmm mein Iphone zeigt es auch richtig an. Hier mal zwei Bilder:
http://demoz.ohost.de/Bild%201.png
http://demoz.ohost.de/Bild 2.png
http://demoz.ohost.de/Bild 2.png
Das erste Bild zeigt die falsche Darstellung.

lg

 

[bezierkurve]

Doch der Mac Safari zeigt meine Buttons in einer anderen Farbe. Dabei sind das ja Bilder! Wie schafft safari das denn bitte bilder falsch anzuzeigen?

Wie hast du die Bilder erstellt? Sind Farbprofile eingebettet? Diese werden zum gegenwärtigen Zeitpunkt afaik nur von Safari interpretiert. Wenn du die Bilder mit der „Für Web und Geräte speichern“-Funktion von Photoshop erzeugst, kannst du im entsprechenden Fenster in dem kleinen Aufklappmenü mit dem Dreieck die Einbettung der Profile ausschalten.

 

[Random Gurgel]

Ja ich habe sie mit der Funktion von PS erstellt. Aber alle anderen BIlder, auch die, die nicht ausgetauscht werden wurden so erstellt und werden trotzdem richtig angezeigt.
Ich werde es aber aufjedenfall einmal veruschen so wie du gesagt hast.

lg

 

[eyecandy]

alternativ kannst du die menü-typo ja auch als transparente png-files einbinden …

 

[bezierkurve]

Aber alle anderen BIlder, auch die, die nicht ausgetauscht werden wurden so erstellt und werden trotzdem richtig angezeigt.

Nö. Vergleiche mal dein blaues Referenz-Bild auf den beiden Screenshots; da sind auch deutliche Unterschiede zu sehen.

 

[Random Gurgel]

Das kann natürlcih sein aber ich meine wieso unterscheiden sich dann die Standbilder zB der obere Teil des "Headers" mit dem MAZINGEWBS schriftzug von dem Menu? Das müssten dann doch "gleiche falsche" Farben sein?
Das mit den PNG ist ne überlegung wert hat jemand ne Anleitung auf Deutsch eventuell? Habe das noch nie so gemacht.

Danke für alle Tips!
lg

 

[MasterofDistres]

Das kann natürlcih sein aber ich meine wieso unterscheiden sich dann die Standbilder zB der obere Teil des "Headers" mit dem MAZINGEWBS schriftzug von dem Menu? Das müssten dann doch "gleiche falsche" Farben sein?
Das mit den PNG ist ne überlegung wert hat jemand ne Anleitung auf Deutsch eventuell? Habe das noch nie so gemacht.

Danke für alle Tips!
lg

Du speicherst die einzelnen Grafiken für die Navigation einfach ohne Hintergrund, sprich deaktivierst die Hintergrund-Ebene und speicherst es dann als transparentes .png - kommt auch der Dateigröße zu Gute, da du Bilddimensionen wesentlich verringern kannst (die Breite)

Anbei noch ein Screenshot zur Verdeutlichung

 

[Random Gurgel]

Ok,

aber wie krieg ich dann den Hintergrund dahinter ? Vorher hab ich die als Links ja angeordnet. Soll ich dann ein div machen dessen Hintergrund das Image ist?

Lg

 

[eyecandy]

sorry, felix, aber du baust ein portfolio zum thema webdesign und grafik auf (wahrscheinlich, um entsprtechende dienstleistungen zu verkaufen). gleichzeitig vermittelst du den eindruck, als fehlt da elementares basiswissen in dem bereich …

 

[Random Gurgel]

Ich bin nur ein Freelance Designer und zwar nur Designing und kein Coden. Sonst lass ich es extern coden. Das ist mein erstes mal aber ich hab auch nie gesagt ich könnte Webprogrammieren und das soll das Portfolio auch nicht vermitteln.

Aber wenn man hier nicht fragen darf... :/

 

[sausehuhn]

Alternative zum PNG wäre eine GIF-Grafik. Es gibt leider noch genug Leute da draußen die mit IE6 rumsurfen, der PNGs (ohne zusätlichen Code) nicht darstellen kann. Klar, man kann es nicht allen recht machen, aber in diesem Fall ist's grad so einfach

In Photoshop einfach das Bild ohne Hintergrund "für Web" abspeichern, dann bekommst du eine transparente GIF-Grafik. Damit deine Schrift weiterhin Kantenglättung besitzt kannst du auch die Farbe auswählen, mit der die Ränder der Schrift geglättet werden. Wenn Safari den ausgewählten Farbton dann eine Nuance anders darstellt, sollte das kaum auffallen.

Vorteil davon: die GIF-Grafiken sind kleiner, laden also schneller, und hast keine Darstellungsprobleme. Und abwärtskompatibel zu IE6 bist du auch noch.

Ich rate sowieso ab von großen Grafiken wenn du sie nicht unbedingt brauchst. Für den Hintergrund in der Navigation tut es wahrscheinlich schon (außer für die Hügel am unteren Rand) eine 359*1 Pixel große Hintergrundgrafik die du streckst

 

[Random Gurgel]

Dort ist ein feiner Verlauf im Hintergrund Den bemerkt man so vielleicht nciht aber wenn er weg ist siehts anders aus.
lg

 

[eyecandy]

Dort ist ein feiner Verlauf im Hintergrund Den bemerkt man so vielleicht nciht aber wenn er weg ist siehts anders aus.
lg

ob der in der hintergrund-grafik oder oder als teil des buttons definiert ist, macht keinen unterschied …