Frage von BStafflinger, 57

CSS Probleme bei verschiedenen Browsern?

Hallo zusammen,

ich habe folgendes Problem. Ich bin Betreiber einer Wordpress Website. Dort habe ich mit Hilfe von CSS einen Hovereffect eingebaut. Er sieht auch meiner Meinung nach ganz chic aus, nur funktioniert er weder bei Safari, noch am Handy, noch auf dem Tablett.

Wer sich das ganze mal ansehen möchte, kann dies hier gerne tun - möchte aber nicht riskieren gebannt zu werden! Das ist wirklich keine Werbung!

Die Seite heißt: www.muehlen-test.de

Ich bin langsam wirklich verzweifelt. Was ist bei dem mittlerem Bild (Flockenquetsche) anders? Dort funktioniert es bei allen Browsern?? Bin wirklich noch ganz neu in der Materie - ist auch meine erste Website.

Des Weiteren habe ich massive Probleme mit dem Exit-PopUp. Das sollte höchstens einmal täglich aufbloppen - tut es aber bei jeder URL... Hat hier jemand einen Tipp für mich?

Ich bin euch wirklich für eure Hilfe sehr dankbar!

Mit freundlichen Grüßen Benedikt

Antwort
von sudorc, 11

Hallo,

du hast dir die Antwort ja schon selbst gegeben ;). Wenn du CSS Attribute auf browserspezifische Eigenschaften überpüfen willst, lohnt sich immer ein Blick auf http://www.w3schools.com/css/

bzw. wie in deinem Fall auf:

http://www.w3schools.com/css/css3_2dtransforms.asp

Vielleicht liegt der Hase da schon begraben. Ich kann es leider nicht selbst austesten, da ich weder Apple Hardware besitze noch es einen nativen Safari Browser für Linux gibt.

Berichte mal.

Kommentar von BStafflinger ,

hm, ich verzweifle hier echt noch....

ich hab jetzt alles mögliche versuche?! Oder will ich das einfach nicht verstehen???

Moment, ich sende nochmal den Code, den ich jetzt eingebaut habe!

Kommentar von BStafflinger ,

So, hier mal den Code, wo ich bei jedem transform dieses webkit mit rangepackt habe...

.view {
width: 265px;
height: 143px;
margin: 80px 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 265px;
height: 143px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-family: 'Helvetica', sans-serif;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: 'Helvetica', sans-serif;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px;
text-align: center
}
.view a.info {
display: inline-block;
font-family: 'Helvetica', sans-serif;
padding: 7px 14px;
background: #efa537;
color: #ffffff;
text-transform: uppercase;
box-shadow: 0 0 1px #efa537
}
.view a.info:hover {
box-shadow: 0 0 5px #efa537
}
.view-fifth img {
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: #efdf94;
transform: translateX(-265px);
opacity: 1;
transition: all 0.4s ease-in-out;
}
.div {
    -ms-transform: translateX(-265px);
    -webkit-transform: translateX(-265px);
    transform: translateX(-265px);
}

.view-fifth h2{
background: #efc247;
color: #000;
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
opacity: 0;
color: #333;
transition: all 0.2s linear;
}
.view-fifth:hover .mask {
transform: translateX(0px);
}
.div {
    -ms-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

.view-fifth:hover img {
transform: translateX(265px);
transition-delay: 0.1s;
}
.div {
    -ms-transform: translateX(265px);
    -webkit-transform: translateX(265px);
    transform: translateX(265px);
}

.view-fifth:hover p{
opacity: 1;
transition-delay: 0.4s;
}

Kommentar von BStafflinger ,

Ich versteh aber auch einfach nicht, warum das mittlere Bild funktioniert.....

Da ist doch gar nix anders????

Kannst du mir irgendjemanden nennen, der mir da weiterhelfen kann? Ich dreh auf jeden Fall noch durch :(

Kommentar von sudorc ,

Ich habe es mit einem Ipad Simulator versucht und Safari in einer Virtuellen Maschine installiert und getestet, beides ohne Erfolg den benannten Fehler zu reproduzieren.

Was du noch versuchen kannst ist mal den Browser Cache zu leeren. Ansonsten sehe ich von meiner Seite aus leider schwarz, da ich es einfach nicht nachstellen kann. Bei mir wirds in jedem erdenklichen Format und in allen Browsern korrekt angezeigt.


Vielleicht findet sich hier ja jemand mit genau den gleichen Endgeräten wie du sie hast und kann das reproduzieren...

Antwort
von sudorc, 24

a) Wo genau funktioniert was nicht, wo hast du was eingebaut? Code? Ein Beispiel wo es funktioniert zu nennen bringt nix, ohne ein Gegenbeispiel

b) Welchen Browser nutzt du und in welchen funktioniert es nicht oder nur zum Teil?

c) Welches Exit-Popup, wo ist dies zu sehen?

Wirklich nicht einfach nur Werbung...???

Kommentar von BStafflinger ,

Hallo sudorc,
erstmal vielen Dank für deine Antwort.

Indianerehrenwort - ich habe hier wirklich so einige Probleme mit meiner Website. Das ist wirklich keine Werbung. Wenn du magst, nehm ich das auch wieder raus...

Es geht um folgendes: bei Chrome und Firefox funktioniert alles. Bei Safari geht mein Hovereffekt auf der Startseite nicht. Sowohl am Mac, iPhone oder iPad...
Allerdings, und das verwundert mich extrem, funktioniert der Effekt beim mittlerem Bild (bei den Flockenquetschen).

Den Exit PopUp hab ich entfernt, das finde ich einfach nur noch störend.

Ok, wenn ich den Code mal posten soll, mach ich das gerne - wenn ich später Feierabend habe :)

Schonmal Danke für deine Hilfe

Grüße Benedikt

Kommentar von BStafflinger ,

Hallo Sudorc,

war eben auf deinem Profil... Ich glaube du hast wirklich viel Ahnung davon. Ich hoffe du kannst mir hier weiterhelfen?!

Hier mal der CSS Code, den ich auf meiner Seite eingebaut habe.

.view {
width: 265px;
height: 143px;
margin: 80px 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 265px;
height: 143px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-family: 'Helvetica', sans-serif;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: 'Helvetica', sans-serif;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px;
text-align: center
}
.view a.info {
display: inline-block;
font-family: 'Helvetica', sans-serif;
padding: 7px 14px;
background: #efa537;
color: #ffffff;
text-transform: uppercase;
box-shadow: 0 0 1px #efa537
}
.view a.info:hover {
box-shadow: 0 0 5px #efa537
}
.view-fifth img {
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: #efdf94;
transform: translateX(-265px);
opacity: 1;
transition: all 0.4s ease-in-out;
}
.view-fifth h2{
background: #efc247;
color: #000;
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
opacity: 0;
color: #333;
transition: all 0.2s linear;
}
.view-fifth:hover .mask {
transform: translateX(0px);
}
.view-fifth:hover img {
transform: translateX(265px);
transition-delay: 0.1s;
}
.view-fifth:hover p{
opacity: 1;
transition-delay: 0.4s;
}

Ich habe mal gelesen, dass es so spezielle Codes gibt, die unabhänig vom Browser eingegeben werden müssen. sowas wie webkit moz?!

Falls es daran liegt, wo muss ich sowas einbauen? Und wo finde ich die Codes für die einzelnen Browser??

Ich danke dir echt vielmals für deine Mühe!

Liebe Grüße

Benedikt

Keine passende Antwort gefunden?

Fragen Sie die Community