CSS Probleme bei verschiedenen Browsern?

... komplette Frage anzeigen

2 Antworten

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...???

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von BStafflinger
31.08.2016, 16:05

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

0

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.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von BStafflinger
31.08.2016, 20:48

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!

0
Kommentar von BStafflinger
31.08.2016, 20:51

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;
}

0
Kommentar von BStafflinger
31.08.2016, 20:56

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 :(

0

Was möchtest Du wissen?