CSS-Code - Browser zeigt nicht an

10.08.2016 12:56

tschud61
#1

Hallo allerseits

Ich habe nachfolgenden CSS-Code im Head-Bereich eingegeben und nicht alle Browser zeigen den Effekt wunschgemäß an:
* Microsoft Edge zeigt (fast) gar nichts an (lediglich das blaue Bild)
* Firefox nur einen Teil (nur animierter Text)
* Safari und Chrome zeigen es vollständig an.
Weiss jemand, was ich im CSS-Code ergänzen muss, damit Edge und Firefox auch aktiv werden?
Danke für eure Hilfe.

Lg Stefan

Hier der Link zur fraglichen Seite.
http://www.schuleerstfeld.ch/eltern/

Hier der Code aus dem head-Bereich:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 

<style type="text/css">
/*<![CDATA[*/ /*Fade-Effekt Länderauswahl*/ 
 
.vbox {
    background: transparent;
    position: relative;
    margin: 5px auto;
    width: 205px;
    height: 135px;
    display: block;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.6);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 0px 0px 0px 0px;
    overflow: hidden;
}
 
.vbox .image {
    position: absolute;
    width: 205px;
    height: 135px;
}
 
.vbox a,
.vbox a:hover {
    text-decoration: none;
}
 
.vbox .slogan {
    position: absolute;
    width: 205px;
    height: 135px;
    text-transform: uppercase;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
 
.vbox .slogan {
    background: #1A1A1B;
    top: 100px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    -webkit-box-shadow: 0 0 0px #333;
    -moz-box-shadow: 0 0 0px #333;
    box-shadow: 0 0 0px #333;
}
 
.vbox:hover .slogan {
    color: #fff;
    top: 0px;
    opacity: 0.7;
}
 
.vbox .slogantext {
    position: absolute;
    width: 205px;
    height: 135px;
    text-transform: uppercase;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
 
.vbox .slogantext {
    background: transparent;
    top: 95px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
    -webkit-box-shadow: 0 0 0px #333;
    -moz-box-shadow: 0 0 0px #333;
    box-shadow: 0 0 0px #333;
}
 
.vbox:hover .slogantext {
    color: #fff;
    top: 47px;
    opacity: 0.9;
}
 
.slogan,
.slogantext {
    -webkit-transition: all .5s ease-out !important;
    -moz-transition: all .5s ease-out !important;
    -o-transition: all .5s ease-out !important;
    transition: all .5s ease-out !important;
}
    
    /*]]>*/ 
</style>
 

 
 

Antworten

Beitrag melden

13.08.2016 05:23 (zuletzt bearbeitet: 13.08.2016 05:49)

az_
#2

az_

...manchmal ist CSS echt zickig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 

/*<![CDATA[*/ /*Fade-Effekt Länderauswahl*/ 
 
.vbox {
    background: ;
    position: relative;
    margin: 5px auto;
    width: 205px;
    height: 135px;
    display: block;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.6);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 0px 0px 0px 0px;
    overflow: hidden;
}
 
.vbox .image {
    position: absolute;
    width: 205px;
    height: 135px;
}
 
.vbox a,
.vbox a:hover {
    text-decoration: none;
}
 
.vbox a:hover {
    padding-top: 50px !important;
}
 
.vbox .slogan {
    position: absolute;
    width: 205px;
    height: 135px;
    text-transform: uppercase;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
 
.vbox .slogan {
    background: #1A1A1B;
    top: 100px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    -webkit-box-shadow: 0 0 0px #333;
    -moz-box-shadow: 0 0 0px #333;
    box-shadow: 0 0 0px #333;
}
 
.vbox:hover .slogan {
    color: #fff;
    top: 0px;
    opacity: 0.7;
}
 
.vbox .slogantext {
    position: absolute;
    width: 205px;
    height: 135px;
    text-transform: uppercase;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
 
.vbox .slogantext {
    background: #000;
    top: 95px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
    -webkit-box-shadow: 0 0 0px #333;
    -moz-box-shadow: 0 0 0px #333;
    box-shadow: 0 0 0px #333;
}
 
.vbox:hover .slogantext {
    color: #fff;
    top: 0;
    opacity: 0.9;
    padding-top:45px;
}
 
.slogan,
.slogantext {
    -webkit-transition: all .5s ease-out !important;
    -moz-transition: all .5s ease-out !important;
    -o-transition: all .5s ease-out !important;
    transition: all .5s ease-out !important;
}
    
    /*]]>*/ 
 
 


.vbox .slogantext {
    background: #000;
    top: 95px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
    -webkit-box-shadow: 0 0 0px #333;
    -moz-box-shadow: 0 0 0px #333;
    box-shadow: 0 0 0px #333;
}
 
.vbox a:hover {
    padding-top: 50px !important;
}

.vbox:hover .slogantext {
    color: #fff;
    top: 0;
    opacity: 0.9;
    padding-top:45px;
}

...mehr hab ich nicht geändert. Statt #000 kannst Du natürlich auch rgba(0,0,0,0.5) nehmen, oder so. Jedenfalls funzt es so im Firefox und Chrome.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html